Cara membuat menu navigasi dengan sosial media ala evo magz

Baca Juga

Hallo sobat setia FARB pada kesempatan kali ini saya akan share cara membuat menu navigasi dengan social media ala evo magz. Fungsi dari menu navigasi ini, yaitu untuk memudahkan para pengunjung blog kita untuk mencari kategori isi postingan pada blog tersebut. Selain itu, tampilan dari menu navigasi yang disertai tombol sosial media ini sangat bagus dan terlihat sangat keren.

Evo magz sendiri merupakan salah satu template buatan mas Sugeng yang sudah sangat terkenal dengan struktur SEO dan responsivenya. 

Jika sobat belum tau bagaimana model dari menu navigasi disertai dengan sosial media tersebut, sobat bisa lihat gambar dibawah ini :

Jika sobat tertarik dengan model dan desain dari menu navigasi dan sosial media evo magz tersebut, sobat bisa langsung simak tutorialnya dibawah ini

Cara membuat menu navigasi dengan sosial media ala evo magz

Caranya sangat mudah sekali sobat, yang perlu sobat lakukan adalah sebagai berikut :
1. Sobat login dulu ke blogger.com
2. Sobat pilih menu template
3. Pilih tombol "Edit HTML" yang ada didalam menu template
4. Kemudian sobat pasang kode di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>. Gunakan "CRTL+F" agar lebih mudah untuk mencari kode tersebut.

/* 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 <div id='header-wrapper'> atau <header id="header-wrapper"> dan letakkan kode dibawah ini tepat diatasnya.

<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='#' 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>
<!-- social media button end -->
</nav>
<div class='clear'>
</div>
</div>

Karena tombol sosmed ini menggunakan font awesome, jadi sobat perlu memasang maxcdn font awesomenya.

6. Untuk memasang font awesomenya, sobat hanya perlu mengcopy kode dibawah ini sebelum atau diatas kode </head>

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

7. Terakhir, sobat tinggal simpan template


Nah, sekian dulu artikel kali ini tentang cara membuat menu navigasi dengan sosial media ala evo magz, semoga artikel kali ini bermanfaat, selamat mencoba dan semoga sukses. Keep visit sobat...

~salam FARB