Cara membuat Menu Navigasi Responsif diatas Header Blog
Cara membuat Menu Navigasi Responsif diatas Header Blog - Kali ini saya akan membagikan kembali salah satu tutorial yang menurut saya sangat bagus dan berguna bagi para blogger pemula,sebenarnya tutorial ini telah di posting sebelumnya oleh contoh blog /blog CB, seperti yang dikatakan bahwa menu navigasi ini mudah digunakan,terkesan profesional dan mudah di Eksplorasi oleh pengunjung blog kita.
Silahkan cek untuk melihat tampilannya : Demo
Menu navigasi ini menurut saya sangat baik untuk digunakan pada saat proses pendaftaran Google Adsense , dimana pada Menu-menu tersebut bisa kita pasang menu seperti Home,About,Sitemap,Privacy Policy,Disclaimer dlln. Untuk melancarkan proses pendaftaran di Google Adsense ada baiknya sobat menggunakan Menu Responsif ini jika ada ruang yang cukup diatas Header Blog anda.
 |
| Cara membuat Menu Navigasi Responsif diatas Header Blog |
- Masuk ke Dashboard Blogger > Template > Edit HTML
- Ctrl + F cari kode berikut : ]]></b:skin>
- Nah setelah ketemu copy kode Berikut dibawah ini dan letakkan Tepat diatas kode ]]></b:skin>
/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#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:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.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;}
Jika mau ganti Warna background > background : #eeeded;
Ganti warna huruf menu > color:#222;
5. Kembali Ctrl + F cari kode berikut : <body>
6. Letakkan kode berikut ini dibawah <body>Cat : Ganti Link https://pusatbacklinks.blogspot.com dengan Link kamu sendiri<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='https://pusatbacklinks.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
7. Save Template dan Lihat hasilnya.
Itulah cara membuat Menu Navigasi Responsif diatas Header Blog semoga berhasil juga diaplikasikan di blog atau website anda dengan cara yang saya telah kemukakan diatas. Salam Blogger
