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

7 Responses to "Cara Membuat Menu Navigasi Responsive di atas Header Blog plus Media Sosial pada Blogspot"

  1. Cara buat top menu + kotak pencarian responsive seperti di blog ini gimana?

    BalasHapus
    Balasan
    1. Sudah ada.pertunjukannya mas..ini di dalam deringan kode html pada template..

      Masuk dashboard > template > HTML

      Hapus
  2. Balasan
    1. 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

      Hapus
  3. Terimakasih tutorialnya gan. Keren banget. Work di blog saya. Makasih, ya..

    BalasHapus
  4. 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

    BalasHapus

Hanya sebagian kecil komentar yang disetujui. Jangan membuang waktu Anda jika hanya untuk melakukan "spam" di Forum Blogger Indonesia ini. So, komentar yang Anda tuliskan menunjukkan tingkat kualitas diri Anda.

Salam blogger

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel