Cara Membuat Menu Navigasi Responsive di atas Header Blog plus Media Sosial pada Blogspot
Wednesday, 20 May 2015
7 Comments
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
2. Cari kode </b:skin>
3. Copas kode di bawah ini, tempatkan di atas kode </b:skin>
Cara Membuat Menu Navigasi di atas Header Blog plus Media Sosial
1. Template > Edit HTML2. 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/).*
Cara buat top menu + kotak pencarian responsive seperti di blog ini gimana?
ReplyDeleteSudah ada.pertunjukannya mas..ini di dalam deringan kode html pada template..
DeleteMasuk dashboard > template > HTML
Minta tutorialnya, newbie
ReplyDeleteDi atas sudah ada petunjuknya mas...silakan dibaca secara lengkap...
DeleteJika ingin menggunakan metode dan desain berbeda, silakan lakukan langkah ini..
http://www.forumblogindo.com/2015/12/cara-membuat-menu-navigasi-seperti-evo-magz.html
Terimakasih tutorialnya gan. Keren banget. Work di blog saya. Makasih, ya..
ReplyDeleteselamat mas..semoga sukses, aamiin
Deletemakasih suhu... akhirnya berhasil yeeyyy,,, nyari2 udh dpt tp bnyak yg ga sesuai keinginan hasilnya... tp yg ini sesuai keinginan aq :)
ReplyDeletejangan lupa liat blog aq yaah di :Lentera Bagi