Cara Menambahkan Widget Icon Follow Us Media Sosial Keren Yang Melayang Di Blog

Cara menambahkan widget social media melayang di samping kiri atau kanan di blog. Assalamu'alaikum. wr. wb. Bertemu lagi dengan saya sobat, kali ini saya akan membagikan tutorial Cara menambahkan widget social media melayang di samping kiri. Bagi para bloger Master memang cara ini sudah basi, ya..ya..ya saya akui. Namun bagi para blogger pemula seperti saya ini memang agak kebingungan bagaimana cara menambahkan icon social media pada blog karna kebanyakan pada template bawaan dari blog belum tersedia icon social media dan walaupun sudah tersedia, mungkin iconnya yang kurang keren dan menarik. Sebenernya tutorial ini sudah banyak di paparkan di blog-blog tetangga, namun tidak ada salahnya saya ikut ambil bagian dengan membahasnya kembali karena cara ini lah yang saya gunakan dulu suwaktu saya menambahkan icon social media di blog amitir ku ini. Hehe,... kebanyakan nyerocos ya?? yupi...Langsung saja ya sobat, Let's Do It" ?

~*Langkah pertama ada masuk ke dasbor, tata-letak dan tambah widget-pilih yang mode HTML/JavaScript
~*Langkah selanjutnya, sobat copy paste semua Script di bawah ini

<style>
.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpT_Wvo6Kv3vX_GDL8c-V3MrzwqCs2O_NLMwxrrpV9L0woSFq4crC42tTYvx73NEToYg71iJz3Fa1oDqKXQ-1oDFuCdNQ9SMZYgnUZt-PxjcQPWKqJphyi-6bJrCDRkuNmH92kNv2DNs0/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijPFzDnbpmEWl5K7nvduTdV7Cec_KJ9NG7lBuItBIcOuUKMFlKXF4qj2Jxwu4r0DwLMhigN7mbmetnNhjZUaeOKUXOOP0T2zSHiDxAql0irPK2Ga-ZM03NcobWXzq6L8z5mbxbmf9olIs/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:160px; z-index:1100;}
.fixedmenu_1{margin:0px 0 0 43px}
.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaFebGW6o_iOWfDeuE6vix-ic3amZEJOIXv-AUVwXjL0JA9w5lMviEaB9unmrmpW6i4T0S0j608gRrn6WIsGZW6CGWVVtJNe7FFcJRyhJf-IYgo_sFEUlNwMjqqrt4DbspvXbp2qy_1Q/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLeA6ucbx2ZBqpWPnr0_tRQzEv4qbR0NOp7txFZ_wH6AZgMFl5CRAl6lbkIx78ol_BtZJKYXZNKweD8sNiIdZFiy-YkY73EIvjCBK2yZfn5gfat1tMBFguULwPyDQaFW186LztSH5_Nls/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:205px; z-index:1100;}
.fixedmenutw_1{margin:0px 0 0 43px}
.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKKltEedikZMsIEdoWRsfa1vPddOf28kuMOlY-ppwTQ1GMm-kPotQedRHFHympqEC6d3CiMDXGBkqmPNUfDCr_fW2kwsbXCCWMD0D6NRIG7ceLqcYbBvW52eOmquxVrXTBA4jRLPhua6I/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:250px; z-index:1000;}
.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbtqtIJwuK98166o-iFgrbjsNab-RNZyCHWjWhMM610rS66cZPfUYtCM1CPVGmBRdz2DwC7c9WHWzMYf8-QrtN-cNFNtbS9umxmF9h6rSbyT-dJ9t_VaZckFTPUCEz17XkEOy1HG4s28/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:250px; z-index:1100;}
.fixedmenufb_1{margin:0px 0 0 43px}
.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLVhbfLV-PpvBzbQH5uuLJTW1HevCn1XNFtJct797NI4ne8pk2rRWwuCSMjSLLMTDfCT-av_LbdaVfmylHowtTR5drGxqSBb6tPtLY4jqU8-_xoOEP_cWwDs38foP-Tzet4Fj3LO_Pok/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;left:0px;top:295px; z-index:1000;}
.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CwplP2gaACX7VeOwWzcS67PtzjsVy0mxpmLrk6Xy8Npqg1cnV79gRByekCC00J7SlpGsumKgjmoqz1AHgQVddIkmdpcvuNQsgYhSZ2kaaKcvXumuSgEgatEZwS6-pwwyhvoS8_VKBKc/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;left:0px;top:295px; z-index:1100;}
.fixedmenurss_1{margin:0px 0 0 43px}
</style>
<br />
<div class="fixedmenu" onmouseout="this.className='fixedmenu'" onmouseover="this.className='fixedmenu1'">
<div class="fixedmenu_1">
<a href="alamat facebook sobat" target="_blank"><img alt="Like us on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS6kxuuc7CHDWbo7Tn6xbeb2DGlfe-MhAEJJHduI8nLDglwOJZT14KL-HGzS9eXaEwhR01YiZ8kn7-2VxkCTZcnMmng-99g6VHchytGHcEcsJWpPP81wEHaOTHus7HJblzSoBHeieUIXM/s1600/facebook-hover1.png" title="Like us on Facebook" /></a></div>
</div>
<div class="fixedmenutw" onmouseout="this.className='fixedmenutw'" onmouseover="this.className='fixedmenutw1'">
<div class="fixedmenutw_1">
<a href="alamat twitter sobat" target="_blank"><img alt="Follow us on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsoF2IjmjMvYffAeyIqudCwhq5JUqA8L3b3yo9PVveFQDIvxJdmXhUoL1k532pIbaoZPIZLCddE_fVZAsaBuvYBv367ZEmSNLLlU8tJFeULOF8u34va8Dtl5shVqC5uR_GyVakg41anI/s1600/twitter_hover1.png" title="Follow us on Twitter" /></a></div>
</div>
<div class="fixedmenufb" onmouseout="this.className='fixedmenufb'" onmouseover="this.className='fixedmenufb1'">
<div class="fixedmenufb_1">
<a href="https:"alamat google plus sobat" target="_blank"><img alt="Recommend us on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Ioy1kNOqSOH5tNMlhIwtF5hGzJFgOgESdGNWq0VhfNuEG8hXUq98ZooGvs3ku2lUIFIVPWQ2ueG6Yjvvq8bbsZ3KuXu81jtEqKxtvxj0W8BWnHrzAAfh-2r83gU2uWzqciJHZocomp4/s1600/Gplus_hover1.png" title="Recommend us on Google Plus" /></a></div>
</div>
<div class="fixedmenurss" onmouseout="this.className='fixedmenurss'" onmouseover="this.className='fixedmenurss1'">
<div class="fixedmenurss_1">
<a href="alamat RSS sobat" target="_blank"><img alt="Subscribe me on RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf92JvKuQp8LJuJKXX5038JU_uiP4hny8HqocP4Jf2uMh9by0OJ4jYLVDV5Kjs1z-5SKbD8wE92RZFZ5eb1NiCv24yiHeEQbrX2LZqks9r9QscSTdf9wIecYtgXJzEuOT3h87jETR1SsM/s1600/RSS-hover1.png" title="Subscribe me" /></a></div>
</div>

Setelah sobat mencopy paste kode script di atas, lalu save dan lihat hasilnya"

NB: Yang Perlu Sobat Ganti Adalah:

• Tulisan yang saya beri warna biru adalah letak dimana kita akan menaruh icon, di situ saya menuliskan left yang berarti kiri. Jika sobat ingin menaruhnya di bagian kanan, maka ganti kodenya menjadi right.
• Tulisan yang saya beri warna KUNING adalah alamat social media, ganti dengan url social media sobat.

Sekarang lihat hasilnya, jika langkah-langkah di atas sudah benar maka icon social medianya akan seperti yang saya gunakan di blog ini.
Sekian dulu tutorial dari saya, apabila ada masukan, kritik dan saran serta pertanyaan, mohon sudi kiranya untuk meninggalkan komentar. Semoga bermanfaat" ?

Wassalamu'alaikum. wr. wb

Baca juga:

• 5 Aplikasi Ini Diciptakan Untuk Memudahkan Hidup Orang Indonesia
• 13 Hal-hal yang Harus Dihindari Ketika Berada di Luar Negeri
• Yes! Kesempatan terakhir untuk mendapatkan boneka Polar Bear yang cute ini.
• Lakukan ini saat bulan Ramadan, dan lihat apa yang terjadi kemudian.
• Luar biasa! Inilah 15 nasihat sederhana yang sudah mengubah hidup banyak orang.
• Siapa sangka, tantangan 15 detik ini yang bisa mendekatkan anak dan orangtuanya.
• Buka bersama, tarawih bareng, itikaf bareng. Sekarang waktunya bikin video 
• Banyak orang berhasil mendapat gaji idamannya setelah mempraktekkan 7 trik ini.
• Mau THR istimewa dari Coca-Cola? Taklukkan tantangan 15 detik ini.
• 7 Alasan Utama Orang Indonesia Suka Banget Nge-Mall. Tebak #1?

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest