Salam blogger, setelah memahami apa itu blog, dan bagaimana caranya agar bisa menampilkan sesuatu yang menarik dari blog, saya jadi tertarik untuk membicarakan tentang cara buat menu bar di atas laman blog. Mengapa demikian, dengan adanya menu bar ini akan memudahkan si pembaca blog anda dalam mencari informasi yang ditujunya, dengan demikian pengunjung akan merasa puas dan ramah dengan blog anda, sehingga pengunjung tidak merasa bosan untuk mengunjungi blog anda kembali.
Adapun ulasan yang akan saya uraikan cara membuat menu bar di atas laman blog sangatlah singkat dan mudah untuk dipahami, bahkan untuk seorang pemula seperti saya sendiri, untuk itu jika anda merasa artikel saya berguna untuk anda mari kita lanjutkan dan mudah-mudahan bisa anda terapkan kedalam blog anda. Sebagai contohnya seperti pada gambar blog saya.
Saya gunakan menu bar itu sebagai menu privacy pilicy sedangkan menu yang dibawah sebagai menu blog saya dengan begi jadi simpel
Langkah pertama yang harus anda lakukan
1. masuk pada blogger anda
2. klik templat dan pilih edit html
3. kemudian anda cari kode ]]></b:skin> dengan cara tekan ctrl+f bersamaan lalu masukkan kode tersebut dan enter setelah itu baru anda masukkan kode berikut tepat pada bagian atas kode ]]></b:skin>
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
fungsi dari kode tersebut untuk menyembunyikan kode navbar setandar blogger.
4. lamjut pada langkah berikutnya kode CSS masih berlaku kode ]]></b:skin> kemudian letakkan kode tersebut tepat diatasnya kode ]]></b:skin>
/*--------------------------------------------------------------Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman BlogOleh: Bambang HermantoBlog: Trik-Trik JituURL : http://gooblogi.com/--------------------------------------------------------------*/.bilah-menu-atas {width: 100%;min-width: 960px;position: fixed;top: 0px;left: 0px;right: 0px;height: 27px;font-size: 13px;z-index: 99;white-space: nowrap;background-color: #336699;background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);box-shadow: 0px 2px 0px rgb(14, 90, 140);border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.kolom-utama {-moz-transition: all 0.2s linear 0s;width: 960px;height: auto;margin: 0px auto;}.kolom-menu {width: 521px;height: auto;margin: 0px 0px 0px -41px;float: left;display: inline;}.kolom-menu ul {height: auto;margin-top: 0px;}.kolom-menu ul li {float: left;position: relative;list-style: none outside none;}.kolom-menu ul li:first-child {border-left: 1px solid rgba(30, 30, 30, 0.125);}.kolom-menu ul li a {color: #ffffff;font-weight: bold;text-shadow: -1px -1px rgba(0, 0, 0, 0.2);text-decoration: none;display: inline-block;padding-top: 5px;padding-right: 10px;padding-bottom: 5px;padding-left: 10px;position: relative;border-right: 1px solid rgba(30, 30, 30, 0.125);box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);}.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {background-color: rgba(255, 255, 255, 0.125);}
5. langkah terakhir cari kode </body> dan letakkan kode berikut tepat di atas kode </body>
<div class='bilah-menu-atas' id='bilahmenuatas'><div class='kolom-utama'><div class='kolom-menu'><ul><li><a href='http://www.gooblogi.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTZ3TAgePDgqHW9W1Du-W535pWXCsTbCNzI7IrN4K0uzX9JeWV8Auvb9Mrs1Yg6AoeA-gjgq7PR8tbDmtfWCZtW5VhvNQ8Vs88gztkJbKs13t-zLiVj_NQgs8yU6eC54UUQWgKLi-UmQ/s800/Beranda.png' width='20px'/></a></li><li><a href='http://www.gooblogi.com/p/privacy-policy-for-www.html'>Privacy policy</a></li><li><a href='http://www.gooblogi.com/p/discl.html'>Disclaimer</a></li><li><a href='http://www.gooblogi.com/p/contack_13.html'>Contact</a></li><li><a href='http://www.gooblogi.com/p/blog-page.html'>Tentang situs</a></li></ul></div></div></div>
Catatan
Yang saya beri warna merah silahkan anda rubah dengan situs anda sendiri. Demikian ulasan ini saya sampaikan semoga dapat bermanfaat untuk anda.
baca juga: cara mencari backlink berkualitas
baca juga: cara mencari backlink berkualitas
Post a Comment