-->

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
Cara membuat Menu Navigasi Responsif diatas Header Blog
Berikut cara memasang Menu Navigasi Responsif diatas Header Blog :

  1.  Masuk ke Dashboard Blogger > Template > Edit HTML
  2.  Ctrl + F cari kode berikut :   ]]></b:skin>
  3.  Nah setelah ketemu copy kode Berikut dibawah ini dan letakkan Tepat diatas kode ]]></b:skin> 
  4. /*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;}
          Cat :  Sesuaikan lebarnya (width: 950px) dengan lebar header template Anda.
                   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>

<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>     
       Cat : Ganti Link https://pusatbacklinks.blogspot.com dengan Link kamu sendiri   

   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

Iklan Atas Artikel

ads here

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

ads here