Cara Membuat Menu Navigasi di atas Header Blog plus Media Sosial

Cara Membuat Menu Navigasi di atas Header Blog plus Media Sosial

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 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.

Banyak juga blogger yang sudah berbagi kodenya, seperti Responsive Blogger Navigation with Drop-Down Menu. Inilah yang saya bagi di posting ini, namun sudah dimodifikasi. Demonya bisa dilihat di my another blog.

Cara Membuat Menu Navigasi di atas Header Blog plus Media Sosial

1. Template > Edit HTML
2. Cari kode </b:skin>
3. Copas kode di bawah ini, tempatkan di atas kode </b:skin>

<style type='text/css'>
/* TOPMENU */
.topmenu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 0 10px 0;height:35px;border-bottom: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}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5}
ul.nav-social{height:35px;margin:0 0 10px 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}
ul.nav-social li a{display:inline-block;line-height:35px;height:35px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:35px}
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}
</style >

4. Copas kode berikut ini di atas kode <div class='header-wrapper'> atau <div id='header-wrapper'>
atau <div class='header-outer'> 

<div id='nav-wrap'>
<nav class='topmenu'>
<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>
<ul class='nav-social'>
<li><a class='fcb' href='#' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a></li>
<li><a class='gpl' href='#' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a></li>
<li><a class='twt' href='#' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a></li>
<li><a class='ytb' href='#' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a></li>
</ul>
</nav>
<div class='clear'></div>
</div>

5. Copas kode berikut ini di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

6. Save Template!

Kini Top Menu Navigasi di atas Header Blog Anda, plus Media Sosial, sudah muncul.