 |
| Cara Membuat Menu Navigasi Responsive di atas Header 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.
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.
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 >
<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/).*
Di atas sudah ada petunjuknya mas…silakan dibaca secara lengkap…
Jika ingin menggunakan metode dan desain berbeda, silakan lakukan langkah ini..
http://www.forumblogindo.com/2015/12/cara-membuat-menu-navigasi-seperti-evo-magz.html
Minta tutorialnya, newbie
Sudah ada.pertunjukannya mas..ini di dalam deringan kode html pada template..
Masuk dashboard > template > HTML
Cara buat top menu + kotak pencarian responsive seperti di blog ini gimana?
selamat mas..semoga sukses, aamiin
Terimakasih tutorialnya gan. Keren banget. Work di blog saya. Makasih, ya..
makasih suhu… akhirnya berhasil yeeyyy,,, nyari2 udh dpt tp bnyak yg ga sesuai keinginan hasilnya… tp yg ini sesuai keinginan aq 🙂
jangan lupa liat blog aq yaah di :Lentera Bagi