Senin, 05 Desember 2011

Menempatkan Menu Horizontal Pada Blogger

Menu horizontal menu navigasi yang memiliki bentuk arah deret horizontal. Jadi dengan menu ini, kita bisa mengatur beragam menu di blog kita. Biasanya menu yang disediakan meliputi home atau halaman depan blog, daftar isi, profil, dsb dan tentunya kita bisa mengaturnya sedemikian rupa sesuai keinginan.

Cara membuatnya seperti biasa perta kali kita login ke blogger, lalu klik Tata Letak lalu Edit HTML.

Selanjutnya letakkan kode berikut ini tepat di atas kode tag ]]>

horizontal-menu{width:100%; overflow:hidden; border-bottom:1px solid #000000;}
horizontal-menu ul{margin:0; padding:0; padding-left:0px; font:11px Arial; list-style-type:none}
horizontal-menu li{display:inline; margin:0}
horizontal-menu li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#999999;}
horizontal-menu li a:hover{color:#FFFFFF; background:#FF9900}

Setelah selesai di ketik, lalu simpan

yang di atas header. Kalau sudah menerapkan trik tersebut, maka langkah selanjutnya (pastikan anda sekarang berada pada halaman tata letak/layout) adalah klik add gadget/tambah gadget, pilih gadget HTML JavaScript, dan isikan kode HTML berikut di dalamnya
<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="horizontal-menu">
<li>

<a href="http://tutorial-sauterico.blogspot.com/">Home</a>

<a href="http:// tutorial-sauterico.blogspot.com/">Profil</a>

<a href="http:// tutorial-sauterico.blogspot.com/">Belajar Blok<;/a>

</li>
</div>
</div>

Kemudian Disimpan

Yang perlu kita ubah adalah pada bagian yang telah saya tandai dengan tulisan miring itu adalah link/URL menu serta bagian yang di-bold/ditebalkan yaitu keterangan dari link/URL tersebut, ex: http:// tutorial-sauterico.blogspot.com ===>> Home

Ya…. Udah selesai. Selamat mencoba, semoga bermanfaat dan sukses.

Seja o primeiro a comentar

Posting Komentar

Linkwithin

Related Posts Plugin for WordPress, Blogger...

Mari Gabung Disini

My Pagerank

Powered by  MyPagerank.Net
Yahoo bot last visit powered by MyPagerank.Net
Counter Powered by  RedCounter
Cpx24.com CPM Program

  ©Template by Dicas Blogger.

TOPO