Cara Membuat Menu Navigasi Dengan Tombol Sosial Media di blog

Cara membuat menu dropdown diatas header blog

memang ada banyak sekali modelnya mulai dari yang simple , responsive , fast loading sampai disertai dengan tombol sosmed ( facebook ,google plus , twitter dan youtue ). Namun pada intinya memasang menu navigasi di blogspot tujuannya sama yaitu memberikan kemudahan kepada pengunjung untuk mencari artikel yang ada di blog kita , berdasarkan tags maupun kategori.

Kali ini tutorial membuat menu drop down di blog yang saya share adalah menu yang disertai dengan tombol sosmed ( sosial media ) karena dari kemaren banyak sekali request teman blogger yang ingin di buatkan tutorial kayak gini . Dengan demikian untuk menanggapi request tadi , menu top header with share button ini saya ambil dari menu topnya template evomagz buatan mas sugeng. karena menurut saya widget menunya tersebut sangat simple , keren dan responsive.
Seperti apakah demo dari menu laman navigasi diatas header lengkap dengan sosial media yang saya bagikan kali ini ? untuk melihat demonya sobat bisa tengok ke template premium evomagz milik mas sugeng , atau untuk lebih jelasnya sobat bisa melihat demonya secara langsung dengan menonton gambar dibawah ini.

 1. Seperti biasanya silahkan sobat login ke akun dasbhor blog sobat

2. Pergi ke editor template , caranya pilih menu template => Edit Html

3. Pada kolom editor template cari kode

</style>

4. Salin dan tempelkan kode dibawah ini diatas kode

</style>

Ini Kodenya 

 tempelkan kodenya
.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. Copas kode berikut ini di atas kode

<div class='header-wrapper'>

atau

<div id='header-wrapper'>

atau

<header id="header-wrapper">

Intinya kita cari elemen div headernya

ini Dia Kodenya yang akan diTempel

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

6. Karena tomol sosmed ini menggunakan font awesome maka supaya icon sosmednya muncul , kita perlu memasang maxcdn font awesomenya , caranya pasang kode dibawah ini diatas kode

</head>



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

Jika di template sobat sudah ada kode diatas maka lewati saja langkah ke 6 ( cukup 1 saja , jika lebih dari satu akan memperberat loading blog )

7. Setelah langkah diatas sudah di kerjakan semua , kini kita tinggal klik save.

Sampai disini cara gampang membuat menu navigasi lengkap dengan tombol sosial media di blog sudah selesai , jika sobat ingin tampilanya lebih keren lagi , silahkan di modif sendiri cssnya maupun htmlnya. dan jika sobat mengalami kendala tentang tutorial memasang menu navigasi di blog silahan berkomentar diawah . Salam blogger dan selamat mencoba kawan.