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.

Tutorial Cara Membuat Menu diatas header Blog Dengan Sosial Media

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>

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

<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>

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.

Tweet