Cara Membuat Toolbar Statis di Atas Header Blog
February 16, 2015
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>
<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;
}
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
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Cara Membuat Toolbar Statis di Atas Header Blog
Post a Comment