Skip to main content
KOMPI AJAIB

follow us

Membuat Announcement Bar Sticky Header Di Template Kompi Ajaib AMP V3

Membuat Announcement Bar Sticky Header Di Template Kompi Ajaib AMP V3 - Untuk membuat announcement bar dengan sticky header pada template Kompi Ajaib v3 agak berbeda karena header-nya sudah fixed sehingga tidak bisa mengikuti tutorialnya begitu saja.

Beberapa pengguna template Kompi Ajaib v3 kesulitan membuat announcement bar pada blog dengan mengikuti tutorial announcement bar dengan sticky header yang sebelumnya sudah saya buat.

Untuk itu, daripada saya bantu satu per satu, lebih baik saya buatkan tutorialnya agar pengguna lainnya yang ingin membuat announcement bar di blognya bisa lebih mudah.

Nah, untuk pengguna template Kompi Ajaib v3 yang ingin membuat announcement bar di blognya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Silahkan cari kode berikut


<div class='positionfixed' id='header-wrapper'>

Lalu silahkan hapus kode yang ditandai.

2. Langkah Kedua

Silahkan simpan kode berikut sesuai gambar.


<div class='head-wrap'>
    <div class='announcement'>
        &#10140; <a href='#' title='Kata-kata Pengumuman'>Kata-kata Pengumuman</a>
    </div>

Dan


</div>

Klik gambar untuk memperbesar. Klik Esc di keyboard untuk kembali.

3. Langkah Ketiga

Silahkan copy CSS berikut:


.head-wrap{position:-webkit-sticky;position:sticky;top:-30px;margin:0 -10px;z-index:999}
.home_page .head-wrap{margin:0 -20px}
#header-wrapper{position:relative}
.content-wrapper{padding:0}
.announcement{width:100%;font-size:16px;font-weight:300;line-height:30px;background:#ffeb71;text-align:center;color:#333}
.announcement a{font-size:16px;font-weight:700;color:#333;text-decoration:none}
#sidebar-wrapper{top:unset;position:static;height:calc(100vh - 100px)}
.stickyhead #sidebar-wrapper{top:70px;position:fixed;height:calc(100vh - 70px)}

Simpan di atas kode ini


@media screen and (max-width:1366px)

Klik gambar untuk memperbesar. Klik Esc di keyboard untuk kembali.

Lalu silahkan cari kode berikut


.content-wrapper{padding:53px 0 0}

Silahkan rubah jadi seperti berikut


.content-wrapper{padding:0}

4. Langkah Keempat

Silahkan simpan kode berikut di atas kode &lt;!--</body>--&gt; &lt;/body&gt;


<b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>
<script>
//<![CDATA[
function scrollFunction(){if(0!=document.body.scrollTop||0!=document.documentElement.scrollTop){var n,c,o;n=document.body,c="stickyhead",o=n.className.split(" "),-1==o.indexOf(c)&&(n.className+=" "+c)}else{var n=document.body;n.className=n.className.replace(" stickyhead","")}}var mql=window.matchMedia("screen and (min-width: 801px)");mql.matches&&(window.onscroll=function(){scrollFunction()});
//]]>
</script>
</b:if>

Berikut hasilnya

Jika Anda menggunakan kalimat yang agak panjang, sehingga membuat kalimatnya menjadi 2 baris di lebar device kecil, maka tambahkan CSS ini.

Misalkan di lebar 425px ke bawah menjadi 2 baris.


@media screen and (max-width:425px){.head-wrap{top:-60px}}

Semoga bermanfaat.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar