Membuat Menu Horisontal

Blogger Dengan Template standar tidak menyediakan menu pada halaman home.Anda Bisa membuat sendiri dengan menambah beberapa Baris Kode CSS dan HTML melalui jendela kode tamplate.

1. Login Ke Dashboard Blogger dan buka halaman Tata Letak
2. Berikutnya Klick Tambah Gadget Dengan Tipe >>HTML/Javascript
3. Masukan Kode Di Bahwa Ini
4. Salin Semua Kode Ini Pada Jendela kode

<style>
#mnu { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; }
#mnu ul { margin:0; padding:10px 10px 0 50px; list-style:none; }
#mnu li { display:inline; margin:0; padding:0; }
#mnu a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBASOCoKLvJt6x3NWgm7w9daoILaF7nhGliJShqIvf8AP2CQY7xxK6ONUCSOUO0pDcPZNEvOrPkOVB2ig5vG3UxHvaLjhVQAd-YcGsHmqnPdlf3AlSwRcSTQnIBy8bzUs2Qythr1TaKSY/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
#mnu a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9E2tG-DwoOuHBTF8738BlLtZQnJRUURbt4dVOXe4zCzLsFhkGUgBPS0adjjMauRIe2acazoYVXHiNPMbg6zQtG3EXi7B38-HbPzdB1Suml8JZNwfKGvMbtQkBIAtr5nAmJNyJipic8E/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; }
#mnu a span {float:none;}
#mnu a:hover span { color:#FFF; }
#mnu a:hover { background-position:0% -42px; }
#mnu a:hover span { background-position:100% -42px; }
</style>
<div id="mnu">
<ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul>
</div>

5.simpan Kode Dan Letakkan Gadget Yang Baru Dibuat Pada Posisi Dibawah Header(Gambar Di bawah Post Ini). 
6.Simpan Perubahan Layout dengan Mengklik Tombol Simpan Setelan.
7.Buka Kembali Halaman Depan Blog Untuk Melihat Hasilnya.


Gambar Nomor 5

Tweet

Artikel keren lainnya: