Cara Membuat Top Menu Responsive Di Blog Dengan Media Sosial

Hallo sobat pada artikel pertama saya ini saya akan membagikan cara yaitu membuat Top Menu Responsive Di Blog Plus Media Sosial nya,  top menu memiliki fungsi yang penting untuk blog untuk menambahkan link sitemap, privacy, about, dan discalimer. Kenapa bisa di sebut penting menurut mastah blogger, blog harus memiliki link privacy, about, disclaimer untuk mendaftar adsense karena menurut saya 20% keberhasilan diterima adsense adanya link menuju laman privacy dan lainnya. Tapi sobat juga sebenarnya tidak terlalu perlu top menu karena link privacy bisa di pasang di footer tepatnya di kiri credit link ( beda template beda peletakan credit link ) pembuat template blog yang sobat pakai.

Tapi jika sobat tidak bisa memasang sitemap atau privacy di footer nah sobat bisa memakai top menu responsive plus media sosial yang saya berikan ini. CSS Top Menu nya ada 2 yang pertama dengan media sosial seperti evomagz yang kedua dengan search box jadi sobat bisa pilih sesuka hati sobat agar tampilan blog sobat makin keren dan bagus tentunya.

Cara Membuat Top Menu Plus Media Sosial
1. Masuk ke editor template caranya: Tema - Edit HTML
2. Klik CTRL + F pada template agar muncul search box untuk memudahkan sobat mencari kode nya.
3. Cari kode </style>
4. Salin  kode di bawah ini dan letakan tepat di atas kode </style>

/* 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}

5. Cari lagi kode <div class='header-wrapper'> atau <header id="header-wrapper"> dan letakan kode di bawah ini di atas salah satu kode header diatas.

<div id='nav-wrap'>
<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/evotemplatesnet' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a></li><li><a class='gpl' href='https://plus.google.com/+SugengRiyadi' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a></li><li><a class='twt' href='https://twitter.com/blogmassugeng' 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>

Kemudian save, nah itu Top menu yang pertama dengan sosial media nya.

Cara Membuat Top Menu Responsive Dengan Search Box
Kode Top Menu ini saya ambil dari blog idblanter.com

1. Cari kode 'header-wrapper'
2. Simpan kode dibawah ini tepat di atas kode 'header-wrapper'

<div id='nav-wrap'>
<nav class='menu'>
<!-- idblanter.com top 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>
<!-- idblanter.com top menu end -->
<!-- search form start -->
<ul class='nav-search'>
<form action='/search' method='get'>
<input class='navsearch' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...'/>
<button class='subsearch' type='submit'><i class='fa fa-search'></i></button>
</form>
</ul>
<!-- search form end -->
</nav>
<div class='clear'></div>
</div>

3. Simpan kode CSS ini tepat diatas kode ]]></b:skin>

/* BLANTER TOP MENU */
.menu {
font:normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
border:1px solid #f0f0f0;
overflow:hidden;
text-transform:uppercase;
}
.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:#8D8D8D;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
ul.nav-search {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:right;
}
.navsearch {
padding: 10px;
border-left: 1px solid #ddd;
color: #666;
border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd;
transition:all 0.5s ease-out;
font:normal normal 14px Open Sans Condensed, Arial, sans-serif;
float:left;
}
.navsearch:focus {
background:#fafafa;
}
.subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;}
.subsearch:hover {background:#fafafa}

Jika terjadi eror di kode top menu dengan search box tambahkan kode di bawah ini tepat diatas kode </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>

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

Klik save template, selesai nah itu kode Membuat Menu Navigasi Diatas Header nah nantikan artikel saya selanjutnya, dan semoga bermanfaat.