Tips Membuat Menu Navigasi Bar Pada Blogge

Desain blog yang menarik merupakan kebanggan tersendiri bagi kita semua dan pengunjungpun tertarik pada blog anda  Menu Navisagis atau menu Horizontal, Biasanya menu navigasi terletak dibawah header. Maka dari itu lah saya kali ini menulis artikel tentang Tips Membuat Menu Navigasi Bar Pada Blogger, cara ini bisa di bulang cukup mudah, namun butuh sedikit ketelitian, karna dengan ketelitian itu bisa membantu berhasil atau tidak nya cara yang kita lakuin.

Langsung saja, Berikut langkah-langkah  membuat menu Navigasi:
1. Login/Masuk ke blogger.
2. Pilih Tata Letak --> Edit HTML --> centang "Expand Templte Widget".
3. Tapi setiap melakukan perbaikan template, sebaiknya simpan Template engan meng-klik tulisan Download Template Lengkap. Kemudian simpan di file Komputer anda, Bila terjadi kesalahan pada Template anda sudah memiliki back-up untuk mengembalikannya kembali.
4. Cari kode ]]> atau dengan cara tekan Ctrl+F Ketik ]]> Copy kode dibawah ini dan Paste diatas kode ]]>

Klik show untuk melihat

/* navbar ================== */ #bg_nav { background: #ffffff; width: 850px; height: 29px; font-size: 11px; font-family: Arial, Tahoma, Verdana; color: #000000; font-weight: bold; margin: 0px auto 0px; padding: 0px; border-top: 1px solid #000000; border-bottom: 1px solid #ffffff; overflow: hidden; } #bg_nav a, #bg_nav a:visited { color: #000000; font-size: 11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 3px; } #bg_nav a:hover { color: #000000; text-decoration: underline; padding: 0px 0px 0px 3px; } #navleft { width: 500px; float: left; margin: 0px; padding: 0px; } #navright { width: 220px; font-size: 11px; float: right; margin: 0px; padding: 3px 5px 0px 0px; } #navright a img { border: none; margin: 0px; padding: 3px 5px 0px 0px; } #nav { margin: 0px; padding: 0px; list-style: none; } #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { background: #ffffff; color: #000000; display: block; font-weight: bold; margin: 0px; padding: 8px 15px 8px 15px; border-left: 1px solid #ffffff; } #nav a:hover { background: #c06000; color: #000000; margin: 0px; padding: 8px 15px 8px 15px; text-decoration: none; } #nav li { float: left; margin: 0px; padding: 0px; } #nav li li { float: left; margin: 0px; padding: 0px; width: 150px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 160px; float: none; margin: 0px; padding: 7px 30px 7px 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } #nav li li a:hover, #nav li li a:active { background: #c06000; padding: 7px 30px 7px 10px; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; display: block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; }

5. Ganti kode css yang berwarna merah diatas sesuaikan dengan blog kamu.
6. Cari kode seperti di bawah ini.
<div id='header-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
</b:section>

7. Letakkan kode dibawah ini tepat dibawah kode
<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://pertamamedia.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- akhir bg_nav -->

8. Terakhir ganti text yang berwarna merah dengan Url blog anda kemudian simpan Template lihatlah blog anda.

sekian artikel yang saya tulis, semoga dengan apa yang saya tulis bisa membatu anda untuk membuat navigasi Bar menu pada blogger, selamat mencoba.