Membuat Announcement Bar Sticky Header Template

Beberapa pengguna template  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

DEMO

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.