Membuat Announcement Bar Sticky Header Di Template Kompi Ajaib AMP V3

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/11/2019

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>

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)

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.