-->
IBX5824722692B28

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
Judul: Cara membuat Menu Navigasi Responsif diatas Header Blog; Ditulis oleh Unknown; Rating Blog: 5 dari 5

4 Responses to "Cara membuat Menu Navigasi Responsif diatas Header Blog"

  1. gan ko saya lebarnya melebihi lebar blog yah, padahal lebar nya sudah diatur

    ReplyDelete
    Replies
    1. Periksa Baik2 siapa tau lebar blognya beda karena untuk psang Menu ini gk ckup sulit atau mudah

      Delete