Cara Membuat Menu Navigasi Halaman Di atas Header

BANYAK sekali blog yang menampilkan Top Menu Navigasi di atas Header Blog plus ikon akun Media Sosial. Mudah ditiru pula, soalnya 'kan desain template blogger mah menggunakan tiga jenis kode: CSS, HTML, dan JavaScript.

Kita bisa meniru tampilan blog mana pun dan "mengintip" kode-kodenya untuk kita terapkan di blog sendiri
Simak Berikut .

1.Buka Template Edit Html Cari Kode ]]></b:skin>
Copy Kode Di bawah ini Pastekan Diatas ]]></b:skin>

 

   
/* NAVIGATION MENU */
.menu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}
.nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5}
ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:right}
ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:38px}
ul.nav-social li a:hover{color:#fff}
ul.nav-social li a.fcb:hover{background:#3B5A9B}
ul.nav-social li a.gpl:hover{background:#DD4B39}
ul.nav-social li a.twt:hover{background:#1BB2E9}
ul.nav-social li a.ytb:hover{background:#ED3F41}

Selanjutnya Copy Kode Di bawah ini Pastekan diatas <div id='header-wrapper'>

<nav class='menu'>
<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->
<!-- social media button start -->
<ul class='nav-social'>
<li><a class='fcb' href='https://www.facebook.com/ISI Punya Anda' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a>
</li>
<li><a class='gpl' href='https://plus.google.com/Isi Punya Anda' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a>
</li>
<li><a class='twt' href='https://twitter.com/IsiPunya anda rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a>
</li>
<li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a>
</li>
</ul>
<!-- social media button end -->
</nav>
<div class='clear'></div>
</div>

dan Selesai

Tweet