Beranda » Tutorial Blog » Membuat Menu Horisontal

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.

Login Ke Dashboard Blogger dan buka halaman Tata Letak
Berikutnya Klick Tambah Gadget Dengan Tipe >>HTML/Javascript
Masukan Kode Di Bahwa Ini
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

Belum ada tanggapan untuk "Membuat Menu Horisontal"

Post a Comment

Peraturan berkomentar di blog ini :

- Dilarang SPAM.
- Dilarang menautkan link aktif atau link mati kecuali admin.
- Dilarang menggunakan huruf "Kapital" secara keseluruhan.
- Dilarang berkomentar yang mengandung SARA.
-Dilarang Berkampanye
- Jika ingin bertanya silahkan berikan pertanyaan yang jelas agar mudah dijawab oleh admin.

Jika ada beberapa point diatas yang tidak anda patuhi dalam berkomentar otomatis komentar Anda Otomatis akan Di Hapus Dari blog ini.

Subscribe to: Post Comments (Atom)