Cara Membuat Menu Navigasi Dengan Tombol Sosial Media Di Blog

Cara Membuat Menu Navigasi Dengan Tombol Sosial Media di blog. Memasang menu navigasi di suatu blog ini bertujuan untuk memberikan kemudahan kepada para pengunjung untuk mencari artikel yang ada di blog anda yang berdasarkan Tags maupun Kategori.

Sebenarnya sudah banyak cara untuk membuat menu dropdown di atas header blog dengan berbagai macam model, seperti yang Simple, Responsive, Fast Loading sampai ada juga yang disertai tombol Sosial Media seperti Facebook, Twitter, Google Plus dan masih banyak lagi.

Maka dari itu, di artikel yang saya tulis ini tentang "Cara Membuat Menu Navigasi Dengan Tombol Sosial Media Di Blog" akan membahas tentang salah satu cara membuat menu dropdown yang dilengkapi dengan sosial media, Jika anda belom mencobanya, tunggu apalagi, segeralah mencobanya, karena bukan hanya untuk memudahkan para pengunjung, ini juga bisa mempercantik tampilan pada blog anda.

Jika anda tertarik, langsung saja ikuti beberapa langkah yang sudah saya seddiakan dibawah ini, ingat anda anda perlu bangaet dengan yang namanya ketelitian karna dengan teliti semua cara bisa anda lakukan sesuai dengan apa yang anda harapkan.

Cara Membuat Menu Navigasi Dengan Tombol Sosial Media Di Blog

=> Masuk ke Dasboar Blog anda
=> Pilih Template -> Edit HTML
=> Carilah kode  </style> (gunakan Ctrl+F untuk memudahkan pencarian)
=> Letakkan kode dibawah ini tepat 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}

=> Selanjutnya cari lagi kode seperti dibawah ini

<div class='header-wrapper'>

atau

 <div id='header-wrapper'>

atau

<header id="header-wrapper">

=> Letakkan kode dibawah ini tepat diatas salah satu kode yang saya tuliskan diatas

<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='ID FACEBOOK' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a>
</li>
<li><a class='gpl' href='ID Google Plus' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a>
</li>
<li><a class='twt' href='ID TWITTER' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a>
</li>
<li><a class='ytb' href='ID YOUTUBE' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a>
</li>
</ul>
<!-- social media button end -->
</nav>
<div class='clear'></div>
</div>

Keteranga :
Ganti Text yang berwarna merah dengan yang sesuai dengan anda.

=> Terakhir, Pasangkan kode dibawah ini tepat diatas kode </head>

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

=> Save / Simpan Template
=> Selesai, dan lihat hasilnya

Baca juga
=> Cara mudah daftar ke Alexa Page Rank
=> Cara Mudah daftar ke Histats

Sekian artikel yang saya tulis ini tentang "Cara Membuat Menu Navigasi Dengan Tombol Sosial Media Di Blog" Semoga bisa bermanfaat dan berguna untuk anda. Selamat Mencoba.

Share :