Vertikal Menu Navigasi pada Blog V.2

Menu navigasi atau menu tab adalah jantung dari setiap halaman web atau blog. Ini menyediakan cara jalan untuk semua halaman penting dari situs web. Untuk membuat menu navigasi Anda harus memiliki pengetahuan yang baik tentang CSS dan HTML. Tapi karena desainer lebih dan lebih berbagi tutorial online mereka, pengkodean telah menjadi jauh lebih mudah. Pada tutorial sebelumnya sudah dibahas tentang cara memebuat Vertikal Menu Navigasi pada Blog.

Menu Navigasi Horizontal di bawah ini sebagian besar diciptakan oleh Christopher dan Highdots dan beberapa oleh MyBloggerTricks. Untuk itu, sebagian besar kode dalam rangka untuk membuat mereka bekerja di blogger dan juga telah membuat mereka cukup mudah untuk dipahami oleh sebagian besar dari Anda.

Ikuti langkah - langkahnya ya?
* Langkah I

• Login ke Blogger anda;


• Klik Edit HTML;
  


• carilah kode ]]></b:skin>;


• Copy Paste kode berikut diatas ]]></b:skin>;

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62AuSKxI3ZmocbUAmVY9SOhDtrLV2nNwkyqmu8Z9bUi_r03pFJLLpXXAbsgJ57Y0CrwuuwsgDsy5st6hPBSwmQRzQL5RdZYThtXP3oz19y7ldhGwbDoFko7ahOepZATP_DLfjch_4o28/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62AuSKxI3ZmocbUAmVY9SOhDtrLV2nNwkyqmu8Z9bUi_r03pFJLLpXXAbsgJ57Y0CrwuuwsgDsy5st6hPBSwmQRzQL5RdZYThtXP3oz19y7ldhGwbDoFko7ahOepZATP_DLfjch_4o28/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

• Jika selesai pilih Simpan.

* Langkah II

• Tambahkan Gadget sesuai dengan keinginan anda;


• Pilih HTML/Javascript;
  


• Copy paste kode berikut;
  

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62AuSKxI3ZmocbUAmVY9SOhDtrLV2nNwkyqmu8Z9bUi_r03pFJLLpXXAbsgJ57Y0CrwuuwsgDsy5st6hPBSwmQRzQL5RdZYThtXP3oz19y7ldhGwbDoFko7ahOepZATP_DLfjch_4o28/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62AuSKxI3ZmocbUAmVY9SOhDtrLV2nNwkyqmu8Z9bUi_r03pFJLLpXXAbsgJ57Y0CrwuuwsgDsy5st6hPBSwmQRzQL5RdZYThtXP3oz19y7ldhGwbDoFko7ahOepZATP_DLfjch_4o28/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

• Selesai dan simpan.
  

Oke selamat mencoba ya? dan bermanfaat.