Cara Membuat Navigasi Horisontal

Anda tentu tahu Navbar Blogger bukan? Sebuah widget navigasi blog yang begitu banyak fungsinya. Karena kode dasar navbar blogger berbentuk sripct code, maka cenderung agak sulit untuk diubah dan diutak-atik. Lain halnya jika suatu widget berbentuk HTML code, mungkin akan lebih mudah bagi kita untuk memainkannya sesuka hati. Tidak bisa dipungpikir bahwa widget navigasi adalah kebutuhan mendasar yang memilki fungsi dan kegunaan bagi para bloggers. Untuk itu, Kotak Tutorial akan memberikan tips untuk membuat Navigasi Horisontal di Blog Anda.

Langkah pertama, seperti biasa Anda terlebih dahulu login di account blogger Anda. Setelah itu langsung menuju ke halaman edit HTML. Cari kode ]]></b:skin>. Lalu letakkan kode CSS di bawah ini tepat di atas kode tersebut :

/* Menu Horizontal
---------------------------------------------*/
.menuhorisontal{background:#ddd; width: 918px;height:30px;float:center; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

.menuhorisontal ul{ margin: 0; padding: 0; padding-left: 0px; font: bold 11px Arial;color:#555; text-transform:uppercase; list-style-type: none; letter-spacing:.0001em; }
.menuhorisontal li{ display: inline; margin: 0; }

.menuhorisontal li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 8px 10px; border-right: 1px solid #efefef; color: #555}

.menuhorisontal li a:visited{ color: #555; }

.menuhorisontal li a:hover, .menuhorisontal li.selected a{background:#fff;color:#000; /*Background Setelah Pointer Diarahkan */ }

Setelah itu, cari kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Kotak Tutorial Header)' type='Header'/>
</b:section>
</div>

Copy paste kode berikut, lalu letakkan tepat di bawah kode di atas :

<div class='menuhorisontal'>
<ul>
<li><a href='http://kotaktutorial.blogspot.com'>Home</a></li>
<li><a href='http://kotaktutorial.blogspot.com/search/label/Blog%20Tutorial'>Blog Tutorial</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Blogger Hack</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Blogger Tricks</a></li>
<li><a href='http://kotaktutorial.blogspot.com/search/label/Blogger%20Tips'>Blogger Tips</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Free Template</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Bisnis Online</a></li>
<li><a href='http://kotaktutorial.blogspot.com/search/label/Blogging'>Blogging</a></li></ul>
</div>

Jangan lupa untuk mengganti alamat URL link sesuai dengan keinginan Anda. Begitu pula dengan ukuran dan warna Navigasi Horisontal. Anda harus menyesuaikan lebar dan tinggi sesuai dengan ukuran template Anda. Selesai, silahkan simplate template dan lihat hasilnya.