Widget Menu Navigasi

Cara Membuat Menu Navigasi Horisontal
ntuk Membuat Menu Navigasi Horisontal bisa di lakukan dengan dua cara, yang pertama dengan menempatkan kode HTML pada edit HTML sobat dapurblogger, cara membuat menu navigasi horisontal yang kedua adalah dengan menempatkan kode HTML pada elemen halaman atau add gadget pada blog sobat dapurblogger.

Menurut saya, cara tercepat dan termudah untuk membuat menu navigasi horizontal adalah dengan menempatkan kode html menu navigasi horizontal tersebut pada add gadget blog kita.
Bagi blogger yang senior untuk membuat menu navigasi horisontal tidak akan mengalami kesulitan, tapi untuk blogger yang masih tertatih-tatis seperti saya ini, membuat menu navigasi horisontal adalah hal yang rumit, apalagi kalau harus masuk ke edit html, jadi tambah rumit deh karena kode html menu navigasi horisontal ini akan bercampur dengan kode html-kode html yang lain.
Untuk membuat widget menu navigasi horisontal ini, sobat dapurblogger bisa menggunakan langkah-langkah seperti di bawah ini.

Langkah-langkah membuat menu navigasi horisontal

1. Login ke account blog sobat dapurblogger
2. Klik Layout atau tata letak
3. Klik Add a Gadget
4. Klik Html/ JavaScript
5. Masukkan kode html menu navigasi horisontal di bawah ini

<style><br />
#tabsE {<br />
float:left; <br />
width:100%; <br />
background:#000; <br />
font: bold 7.5pt Verdana; <br />
line-height:normal; <br />
} <br />
<br />
#tabsE ul <br />
{ margin:0; <br />
padding:10px 10px 0 50px; <br />
list-style:none; <br />
} <br />
<br />
#tabsE li { <br />
display:inline; <br />
margin:0; <br />
padding:0; <br />
}<br />
<br />
#tabsE a { <br />
float:left; <br />
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; <br />
margin:0;<br />
padding:0 0 0 4px;<br />
text-decoration:none;<br />
}<br />
<br />
#tabsE a span { <br />
float:left; <br />
display:block; <br />
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; <br />
padding:5px 15px 4px 6px;<br />
color:#FFF;<br />
}<br />
/* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} <br />
/* End IE5-Mac hack <br />
*/ #tabsE a:hover span {<br />
color:#FFF;<br />
}<br />
#tabsE a:hover { <br />
background-position:0% -42px; <br />
} <br />
#tabsE a:hover span {<br />
background-position:100% -42px; <br />
} </style> <div id="tabsE"> <br />
<ul> <li><a href="http://dapurblogger.blogspot.com/"><span> Home</span></a></li> <br />
<li><a href="http://dapurblogger.blogspot.com"><span> Blog Hacking </span></a></li><br />
<li><a href="http://dapurblogger.blogspot.com/search/label/SEO%20Ampuh"><span>SEO <br />
</span></a></li> <br />
<li><a href="http://dapurblogger.blogspot.com/search/label/Affiliate%20Program"><span> Affiliate</span></a></li> <br />
<li><a href="https://www.google.com/"><span>Ponsel Tips &amp;News</span></a></li> <br />
<li><a href="http://www.blogger.com"><span>Admin</span></a></li></ul><br />
</div>

Teks di atas yang berwarna hitam, sobat blogger ganti dengan url yang akan sobat dapurblogger jadikan link untuk Menu navigasi sobatdapurblogger.
Setelah semua selesai, sobat dapurblogger kemudian save gadget yang baru saja sobat dapurblogger buat. Kemudian tarus gadget baru tersebut sesuai dengan selera sobat dapurblogger.

Demikian cara membuat menu navigasi horisontal dengan menggunakan gadget atau widget blog.

Selamat mencoba
Semoga bermanfaat