Cara Membuat Menu Disertai dengan sosial Media Icon Di Blog

Posted by Serba Serbi Bisa Posted on August 21, 2016

Membuat Menubar dengan tombol sosial media seperti Facebook, Twitter, Youtube, Instagram, dll, di blog adalah salah satu kriteria untuk mempercantik sebuah blog selain itu sangat penting sebagai alat untuk mempermudah pengunjung dalam menjelajahi isi blog, mengarahkan link kesebuah artikel yang penting dan tentunya ada banyak manfaat yang bisa didapat dengan adanya Menubar dengan tombol sosial media ini. disamping itu blogger sendiri merekomendasikan untuk menambahkan navigasi menu ini didalam blog. untuk membuat menu dengan disertai sosial media acon memang sedikit rumit dan perlu ketelitan dalam penempatan script atau kode html nya. Jika sudah familiar dengan kode kode html atau lebih dikenal dengan sebutan javascript maka langkah membuat menubar seperti ini tidak akan sulit.

Contoh menu bar yang akan dibuat adalah seperti gambar dibawah ini, jika anda tertarik untuk membuatnya silahkan ikuti langkah - langkah berikut ini

Cara Membuat Menu Disertai Dengan Sosial Media Icon
Pertama Login Blogger kemudian cari pengaturan Template dan Edit Html
Pada tampilan Editor cari kode

</Style>

Salin kode dibawah ini dan letakan tepat di atas 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}

Setelah itu copy paste kode dibawah dan letakan di atas kode <div class='header-wrapper'>
jika tidak menemukan kode tersebut cari kode yang <div id='header-wrapper'> atau <header id="header-wrapper">  kode tersebut tidak harus jadi patokan yang penting ketemu elemen Div header nya.

<div id='nav-wrap'>
<nav class='menu'>
<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='http://www.kangobboy.blogspot.com/p/about-me.html'>About me</a></li>
<li><a href='http://www.kangobboy.blogspot.com/p/about-us.html'>Contact Us</a></li>
<li><a href='http://www.kangobboy.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://www.kangobboy.blogspot.com/p/disclaimer.html'>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/playpgi/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/u/0/117410149211688397255' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='https://twitter.com/kang_obboy' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='https://www.youtube.com/channel/UC8lNpfo1lrFjHt4HRv8EVrg' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
</li>
</ul>
<!-- social media button end -->
</nav>
<div class='clear'/>
</div>

Selanjutnya langkah untuk menampilkan icon sosial medianya salin kode berikut dan letakan persis diatas kode </Head>

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

Kemudian Simpan dan selalu lakukan pratinjau terlebih dahulu untuk melihat perubahan pada blog
Jika tidak ada kesalahan di setiap langkah - langkah cara diatas seharusnya menu dengan media sosial icon sudah di blog anda sudah bisa ditampilkan. jika belum berhasil lakukan pengecekan dengan teliti dan lakukan "Ctrl + Z" pada keybboard untuk mengembalikan pengaturan kesebelumnya dan jangan lupa setiap mengedit template sebaiknya lakukan back up tempalte terlebih dahulu untuk menghindari kegagalan dalam pengaturan template.

Demikian Cara Membuat Menu dengan sosial Media Widget di Atas Header Blog yang bisa diberikan semoga berhasil. Jika masih kesulitan segera hungungi saya atau bertanya di kolom komentar, terimakasih sudah berkunjung semoga bermanfaat.