 |
| Cara mudah membuat menubar pada blogger |
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.
Baca juga : Cara membuat kotak komentar facebook di blogger terbaru 2014
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtUZ_rYSnD9qTlDiG9yuKyfw8xWDqe_qnfqKWAP-I3nFw6rUXnKyDl57A3kupOKgamVZB_7b_wAzCNjc_qfOh91RCrJu0pJQ-HB8_fYgAXjv4X5dUISBcpf2IpznPs4DuJdCfYuxaAHGE/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.
Ditulis Oleh : Unknown
Sobat sedang membaca artikel tentang : Cara buat menu bar keren dan ringan di blogger 2014. Jangan lupa yah kritik saran nya karna itu sangat berguna. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya karena blog ini di lindungi OLEH : DCMA kita sesama blogger harus saling mendukung bukan saling menyingkirkan salam blogger.
dibawah (body) gak ada juga kode (header-wrapper). jadi harus gmn? langsung aja masukkan kode itu di bawah (body) atau gimana???
BalasHapuskode ini /header-wrapper kok nggak ada ya ? tolong jawab ya. terimakasih
BalasHapus