Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal – Blogger dengan template bawaannya tidak menyediakan menu pada halaman awal, anda dapat membuat menu horizontal dengan kode javascript. Dan dengan adanya menu horizontal di blog anda ini, akan menambah nilai plus tersendiri karena memudahkan pengunjung menuju suatu link.

Langsung saja ke langkahnya:

• ·         Login ke Dashboard Blogger anda.
• ·         Buka menu Layout/Tata Letak >> Add a Gadget/Tambahkan Gadget >> HTML/Javascript.
• ·         Salin kode dibawah ini.

<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/AVvXsEjroQiH5it6hzfcULHHMiSl9F2iHz9OXbO4zUZ4kgZ2rfQ5HdRsWFK5gZ7koZf2TrTx9xXBH1lypa3AaTG5RLIi36rB3_FwtXeFNkm3jLRebQjzBIn-4k4RZZqkYLa1G85p3f6waum_UYg/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/AVvXsEhmD22FPISymWu9EwLhYvkKhQATpKZh1gZryhqjlgdf_AWqQzt6PmDDakxGYAzQAQggJnYVDUMaaRSbNTSkCAOAsYhoXjMu_lJFGjX4KxlIvt7cSXLjBEg6xRGn9Nbb8j409M2y6hIo3oI/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>

• ·         Lalu tempelkan kode diatas di kotak dialog kode Javascriptnya, perhatikan gambar.

• ·         Pada Tata Letak, simpan template. Kemudian refresh blog anda.

Perhatian: Link 1 – Link 7 adalah judul link yang akan timbul di blog, biasanya home, template, seo, dll.

Pada kode <a href="#">, ganti tanda #(pagar) dengan link tujuan anda, misalnya http://www.google.com.

Terimakasih telah membaca artikel Cara Membuat Menu Horizontal Keren. Semoga anda berhasil memasang menu horizontalnya.


Trik Blogger Simple