Membuat menu navigasi dan social media ala Evo magz diblog Terbaru

Pada kali ini saya akan share cara Membuat menu navigasi dan social media ala Evo magz diblog, Evo magz sendiri adalah Salahsatu Template blogger buatan mas sugeng yang menurut saya templatenya keren - keren selain itu juga responsif. Nah.. mungkin sobat - sobat sudah pada tahu ya fungsi dari menu navigasi ini, yaitu untuk memudahkan para pengunjung blog kita guna mencari kategori isi postingan pada blog tersebut. Selain itu, tampilan dari menu navigasi dan disertai tombol sosmed ini sangat bagus dan terlihat sangat keren pemirsa. Untuk melihat contohnya sobat bisa lihat Gambarnya dibawah.

Bila sobat tertarik ingin mencobanya memasang ditemplate kesayangan sobat agar memperlengkap jaga mempercantik template sobat, Yuk kita simak caranya berikut ini :

Cara memasang menu navigasi dan tombol sosmed diatas header

Langkah 1 Silahkan sobat login akun blogger sobat
Langkah 2 Masuk Dasboard >> Template >> Edit HTML
Langkah 3 Copy kode Css dibawah ini dan letakkan diatas kode /style, untuk memudahkan pencarian tekan ctrl+f.

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

Langkah 4 Selanjutnya cari lagi kode <div class='header-wrapper'> atau <div id='header-wrapper'> atau <header id="header-wrapper"> dan letakkan kode dibawah ini tepat diatasnya.

<div id='nav-wrap'>
<nav class='menu'>

<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='https://www.facebook.com/infoku.mycymot' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a>
</li>
<li><a class='gpl' href='https://plus.google.com/u/0/106933900960285139194' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a>
</li>
<li><a class='twt' href='https://twitter.com/mulyanacymot' 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>

</nav>
<div class='clear'></div>
</div>

Langkah 5 Dikarenakan tombol sosmed ini menggunakan font awesome dengan begitu kita perlu memasang maxcdn font awesomenya ,supaya icon sosmednya muncul ditemplate sobat. Caranya copy lagi kode script dibawah ini dan letakkan diatas kode </head>

Note : Jika pada template sobat sudah ada kode script diatas tersebut, lewati saja langkah 5.

Langkah 6 Bila sobat sudah yakin dengan benar pemasangannya sobat klik Simpan template.

Gimana, mudahkan? Cukup demikian saja postingan saya cara Membuat menu navigasi dan social media ala Evo magz diblog, semoga dapat membantu dan bermanfaat buat sobat. Bila ada yang mau ditanyakan atau kasih sarannya, silahkan tinggalkan komentar dibawah.