Cara Membuat Menu Navigasi Responsive di atas Header Blog plus Media Sosial pada Blogspot

Cara Membuat Menu Navigasi Responsive di atas Header Blog plus Media Sosial

Pentingnya Navigasi Menu Blog plus Media Sosial

Jika rekan-rekan melihat blog ini di bagian kanan atas, akan terlihat menu navigasi berupa icon youtube, linkelin, google+, twitter dan facebook. Media social itu ane pasang memang mempunyai tujuan tertentu, yakni untuk lebih dekat kekeluargaan sesama rekan-rekan blogger lain. 

Dengan memanfaatkan media sosial tersebut, kita bisa memberikan peluang kepada pembaca setia kita untuk melakukan submit atau berlangganan artikel kita.

Sangat bersahabat bukan?

Dengan menerapkan pola user friendly, ane coba berikan tips dalam membuat menu navigasi di atas header blog plus media sosialnya. Berikut langkah-langkahnya.

Baca juga: 6 Menu Navigasi Wajib Ada pada Blog - Tips SEO 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'>

<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. Copy paste kode di bawah ini dan letakkan di atas kode </head>

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

6. Save Template!

Selamat. Kini blog Sobat sudah terintegrasi dengan media sosial . Simak pula cara membuat featured post responsive. (http://forumblogindo.blogspot.com/).*

SL Blogger

Hanyalah seorang blogger yang ingin bermanfaat untuk sesama

Share this post