Blogging

Cara Memasang Menu Navigasi Diatas Header

ALL IN ONE – Cara Memasang Menu Navigasi Diatas Header. Atau bisa juga disebut Top Menu. Menu navigasi diatas header ini biasanya digunakan untuk mengakses halaman sebuah blog, seperti halaman contact us, policy privacy, disclaimer, sitemap dan lain-lain. Kenapa halaman tersebut diperlukan? Tentu saja menjadi salah satu syarat diterima adsense, selain itu halaman tersebut menunjukkan bahwa blog yang anda miliki adalah blog yang profesional. Ada beberapa blog yang meletakkan tombol navigasi ini dibagian paling bawah blog, itu pun tidak masalah. Yang jelas halaman-halaman tersebut harus ada dalam sebuah blog untuk menjamin keaslian blog itu sendiri.

Memasang Menu Diatas Header

Cara memasang menu navigasi blog ini sangat mudah. ikuti langkah dibawah ini :
1. Buka dan login ke dalam dasbor blogger anda 
2. Masuk Template – Edit HTML
3. Cari kode ]]></b:skin> dengan cara Ctrl +F agar lebih cepat
4. Apabila sudah ketemu copy kode script dibawah ini ke atas kode ]]></b:skin> tadi
/*Venom Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ffffff;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:left;}
.topnav li a {font-family: helvetica; font-weight:bold; font-size:12px;display:block;padding:10px 10px;color:#222;text-decoration:none;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
#navbar-iframe {display: none !important;}

5. Jika sudah, cari kode <body> dan pastekan kode dibawah ini dibawah kode <body>

<div id=’top’>
<div id=’top-wrap’>
<div class=’topnav’>
<ul id=’topnav’>
<li><a href=’http://venom-ku.com/’ title=’Top Menu’>Top Menu</a></li>
<li><a href=’http://venom-ku.com/’ title=’Contact’>Contact</a></li>
<li><a href=’http://venom-ku.com/’ title=’Disclaimer’>Disclaimer</a></li>
<li><a href=’http://venom-ku.com/’ title=’Privacy Policy’>Privacy Policy</a></li>
<li><a href=’http://venom-ku.com/’ title=’Facebook’>Facebook</a></li>
<li><a href=’http://venom-ku.com/’ title=’Twitter’>Twitter</a></li>
<li><a href=’http://venom-ku.com/’ title=’Google Plus’>Google Plus</a></li>
</ul>
</div>
</div>
<div style=’clear: both;’/>
</div>

6. Jika sudah Save Template dan lihat hasilnya

Note : anda dapat mengubah huruf berwarna merah dengan URL anda sendiri, dan huruf berwarna ungu dengan kode warna HTML untuk mengubah warna background menu navigasi. anda juga dapat ber experimen sendiri dengan mengubah script warna dan lebar maupun tinggi menu navigasi yang di akhiri “px”
Nah sekian Cara menambahkan menu navigasi diatas header. Sangat mudahkan? atau jika anda masih kebingungan, anda dapat mendownload Template SEO saya yang lama. Disana sudah terdapat menu untuk meletakkan privacy policy, disclaimer, about us, dan contact us. Semoga artikel ini bermanfaat.

7 Comments

Leave a Comment