Skip to main content

Cara Membuat Menu Horizontal Keren di Blog Terbaru

Cara Membuat Menu Horizontal di Blog - Menu horizontal atau navbar pada blog banyak variasinya dan sangat menarik di blog, menurut saya keren abis .Menu horizontal tentunya menjadi bagian penting dalam dunia template blog karena selain mempercantik blog, menu horizontal atau navbar sangat membantu dalam desain dan layout blog misalnya untuk memasang kontak saya atau bertukar link juga privasi.

Baiklah, silahkan baca tutorial ini sampai habis ya, biar bisa memasang dengan mudah, Tips kali ini cukup mudah dan untuk mengeditnya juga cukup gampang jadi tidak perlu ribet edit html untuk mengganti link.

Jika Anda seorang blogger yang tertarik dengan cara membuat menu horizontal keren di blog, silahkan simak tutorial dibawah ini sampai selesai:

Cara Membuat Menu Horizontal Keren di Blog Terbaru

1. Silahkan login ke akun blog Anda.

2. Pilih Tata Tetak > Tambahkan Gadget > Pilih HTML/JavaScript.

3. Masukkan kode di bawah ini pada kotak HTML/JavaScript.

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <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> 

Catatan:

Gantilah tanda # dengan alamat url halaman tujuan, kemudian dilanjutkan dengan mengganti tulisan About, Contact, Sitemap sesuai keinginan anda.

4. Klik Simpan untuk menyimpan gadget.

5. Drag dan drop gadget yang baru dibuat (sebaiknya) tepat di bawah Header.

6. Klik Simpan pengaturan di pojok kanan untuk menyimpan perubahan dan melihat hasilnya.

Demikianlah artikel tentang cara membuat menu horizonal keren di blog terbaru yang responsif, selamat mencoba dan semoga bermanfaat.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar