Home » » Cara Bikin dan Memasang Menu Navigasi diatas Header Blog

Cara Bikin dan Memasang Menu Navigasi diatas Header Blog

Bagaimana cara membuat dan memasang menu navigasi berada diatas header blog? Ada beberapa contoh menu navigasi diabtaranya  menu navigasi horizontal atau menu navigasi bertingkat atau menu navigasi accordion efek smooth jquery. Pada pembahasan kali ini saya akan berikan cara membuat menu navigasi yang fungsinya seperti untuk menu sign up, menu untuk login dan cara pemasangannya berada diatas header blog. Biasanya menu untuk login atau sign up digunakan atau diarahkan ke link forum atau semacamnya. Nah simak cara membuat menu navigasi untuk menu sign / login, register diatas header.

Cara Membuat Menu Navigasi diatas Header Blog
1. Buka blog anda
2. Pada dasbor silahkan pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
.toppic{width:100%;margin:0 auto;border-bottom:0px solid #666;}
.topnav{background:#ffffff;width: 960px;height:32px;overflow: hidden;margin:0 auto; padding:10px 10px 0px 10px; }
.toppic{background:#ffffff;width:1000px;margin:0 auto;border-bottom:1px solid #999;}
.topnav{width: 960px;height:20px;overflow: hidden;margin:0 auto;  padding:0px 0px 10px 10px; }
.menupic{background:#fff;width:960px;margin:0 auto;}
Keterangan : ganti angka dan warnanya sesuai kebutuhan anda

4. Lalu cari kode <body> dan copy paste kode berikut dibawahnya
<div class='toppic'>
<div class='topnav'>
<div style='font: 11px Arial;float:left;padding-top:3px;letter-spacing:.01em;color:#000000;'>
Wellcome  |  Members area  :  <a href='http://www.blogger.com' title='log in to blogger'>Register</a>  |  <a href='http://www.blogger.com' title='log in to blogger'>Sign in</a> </div>

<div style='font: 11px Arial;float:right;padding-top:3px;letter-spacing:.01em;color:#000000;'>
<a href='http://lintas-tutor.blogspot.com/p/about-me-terlintas.html' title='about me'>About Me</a> | <a href='http://lintas-tutor.blogspot.com/p/contact-us-terlintas.html' target='_blank' title='contact us'>Contact Us</a> | <a href='http://lintas-tutor.blogspot.com/p/daftar-isi-terlintas.html' title='sitemap'>Sitemap</a> | <a href='http://lintas-tutor.blogspot.com/2013/10/pasang-iklan-banner-murah-di-blog.html' title='advertiser'>Advertiser</a></div></div></div>
Keterangan : ganti link diatas sesuai kebutuhan anda

Demikianlah postingan mengenai cara membuat menu navigasi diatas header, semoga bermanfaat


Related Posts

 
Copyright © 2011. Terlintas | Template by Creating Website | Powered by Blogger