Cara Membuat Menu Navigasi

Menu navigasi pada blog sangat di perlukan, hal ini akan memudahkan kita maupun pengunjung untuk menuju pada suatu tool atau label artikel yang ada pada blog kita. Menu Navigasi pada blog juga akan memudahkan kita untuk melakukan editing pada blog kita. Menu Navigasi ini akan sangat di perlukan, khususnya bagi anda yang sudah  terlanjur menghilangkan navbar pada template blog bawaan dari blogger.

Untuk memasang menu navigasi ini caranya cukup mudah, kita tinggal memasang kode html yang akan saya tuliskan seperti di bawah ini, dan kita gunakan sebagai widget pada blog. Yang kita lakukan seperti pada waktu kita memasang widget baru untuk side blog kita.

Berikut ini kode html yang harus anda pasang untuk membuat menu navigasi baru pada blog kita.

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

Tulisan yang berwarna, anda ganti dengan alamat url link yang akan di jadikan link untuk menu navigasi pada blog anda.

Selamat Mencoba

No comments:

Post a Comment

© Google Blog Tools. Template by Template Responsive Design Powered By Blogger