Beranda » Desain Blog » Cara Membuat Toolbar Statis di Atas Header Blog

Cara Membuat Toolbar Statis di Atas Header Blog

TOOLBAR Statis (Floating/Static Toolbar) yaitu "palang" (bar) mirip menu navigasi yang muncul di atas header atau bagian atas halaman blog. Biar lebih jelas, lihat contohnya di blog demo New Thesis SEO. Di sana ada "pengumuman" bahwa telah tersedia New Thesis SEO V2 dan V3 Responsive!

Anda bisa menggunakan Toolbar Statis ini jika ingin mengumumkan sesuatu yang sangat penting. Bisa juga digunakan di blog toko online untuk mengumumkan sale, promo, diskon, atau produk baru.

Karena sifatnya statis, fixed, atau floating, Toolbar ini muncul terus saat halaman blog discroll ke bawah. Pokoknya lihat aja demonya deh. Variasi Toolbar Statis lainnya juga akan di-share di blog CB ini.

Cara Membuat Toolbar Statis di Atas Header Blog

Cara membuatnya gampang, tanpa javascript, cuma kode HTML & CSS, sehingga tidak pengaruh sama loading ataupun seo blog. Proses pembuatannya mirip cara membuat Navigasi Menu Statis di Atas Header.

1. Template > Edit HTML
2. Temukan kode <body>
3. Copas kode berikut ini di bawah kode <body>

<div id="toolbar" style='color:#fff;'>
<p>Kini hadir New Thesis SEO V2 dan V3 Responsive!!! Silakan meluncur ke <a href='http://contohblognih.blogspot.com/' target='_blank' style='color:#ff9;'>CB Blogger</a>
</p>
</div>

4. Temukan kode ]]></b:skin>
5. Copas kode berikut ini di atas kode ]]></b:skin>

#toolbar {
position: fixed;
width: 100%;
height: 15px;
top: 0;
left: 0;
padding: 0px 10px 25px;
background: #777;
z-index: 999;
border-bottom: 3px solid #ddd;
}

6. Save Template!

Anda bisa mengubah warna latar belakang dan warna huruf. Lihat: Kode Warna HTML.

Demikian Cara Membuat Toolbar Statis di Atas Header Blog. Good Luck! (http://contohblognih.blogspot.com).*

Code Source

Belum ada tanggapan untuk "Cara Membuat Toolbar Statis di Atas Header Blog"

Posting Komentar