Panduan lengkap tentang blogger - Menubar
memang sangat penting di dalam sebuah website atau blog karena dari
menu bar inilah pengunjung akan lebih mengenali konten apa yang sedang
di cari nya. Pada kesempatan ini saya ingin berbagi cara terbaru 2014
yaitu membuat tampilan menubar yang sangat keren dan seo tentu nya.
Munkin banyak sekali blogger pemula bertanya-tanya bagaimana kah cara
membuat tampilan menu yang ada di blog.? dan mereka masih bingung untuk
mencari nya dengan keyword apa dia harus mencari tampilan menu ini.
Dengan blog berbagi ilmu
teman-teman akan mendapatkan pelajaran yang berharga dan cara yang saya
ajarkan lengkap dengan gambar nya. Sebener nya jika kita mempunyai
niat, keinginan yang tinggi dan dengan di tambahkan nya menjadi hobby
dunia blogger itu tidak serumit yang kita bayangkan. Apa lagi kita tidak
malas untuk mengerjakan nya. maaf sedikit ceramah jadi nya. he
Langkah-langkah Buat Menu bar Keren Di Blogspot :
- LOG IN ke blog anda di www.blogger.com
- Setelah anda log in maka anda akan di bawa ke dasboard blog, nah di dasboard blog inilah anda harus klik tanda segitiga kebalik (opsi pilihan) lalu pilih TEMPLATE. Untuk lebih detail nya lihat gambar di bawah ini :
 |
| Gambar tampilan dasboard blogger |
- Jika anda sudah mengklik template anda maka anda akan di bawa ke halaman HTML dan pilih EDIT HTML Untuk lebih detail nya lihat gambar di bawah ini :
 |
| Gambar tampilan edit html blogger |
- Jika anda sudah masuk di dalam kolom halaman html blog lalu cari kode ]]></b:skin> untuk mempercepat pencarian klik 1x di dalam kotak HTML lalu anda tekan CTRL + F Nanti akan ada kolom kecil di di pojok kanan atas lalu masukan kode ]]></b:skin> di kolom tersebut dan tekanENTER pasti langsung dapat kode tersebut. Lalu Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :
MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE : ]]></b:skin>
/* Menu Horisontal
---------------------------------------------*/
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{background:#e9e9e9 url(http://2.bp.blogspot.com/_tUdwiyEcqV4/TVAvFqOyxcI/AAAAAAAAAs8/ZE7Yc8WL1n4/s1600/bg_menu.gif) repeat-x bottom left;width:980px;height:30px;margin:0 auto; padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;border-top:solid 1px $bordercolor;}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{float: left;display: block;text-decoration:none;
padding:7px 7px 7px 7px;border-right:1px solid #dadcde;border-bottom:solid 1px #d2d4d6;color:#357798;}
.menuhorisontal li a:visited{color:#357798;}
.menuhorisontal li a:hover {background:#fff;color:#333;text-decoration:none;border-bottom:solid 1px #fff; /*Background Setelah Pointer Diarahkan */}
.menuhorisontal li.selected a {background:#fff;color:#333;border-bottom:solid 1px #fff;padding:7px 10px 7px 10px;}
- Sekarang Cari Kode <!-- /header-wrapper --> Cara nya sama untuk mencari nya CONTROL + F lalu letakan kode di bawah tepat di bawahnya :
<div class='menupic'>
<div class='menuhorisontal'>
<ul>
<li><a href='http://www.berbagi-ilmu-terlengkap.blogspot.com/'>HOME</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
</div>
CATATAN PENTING ...!!!
A. Ubah Tulisan yang bewarna kuning dengan alamat blog anda.
B. Ubah tulisan yang orange dengan menu blog anda.
C. Ubah tanda # dengan alamat tujuan dari judul menubar anda.
Jika Kode <!-- /header-wrapper --> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /header-wrapper --> biasanya terletak di bawah tag <body> Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas.
B. Ubah tulisan yang orange dengan menu blog anda.
C. Ubah tanda # dengan alamat tujuan dari judul menubar anda.
Jika Kode <!-- /header-wrapper --> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /header-wrapper --> biasanya terletak di bawah tag <body> Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas.
Jika
anda masih ada yang blum mengerti bertanya saja, Dengan cara koment di
bawah ini entah dari facebook ataupun dari kkomentar blog terimakasih.(sumber : http://berbagi-ilmu-terlengkap.blogspot.com/2014/03/cara-buat-menu-bar-keren-dan-ringan-di.html)