Cara Membuat Widget Social Media Melayang di Blog

Preview Widget

FARESPO - Tak bisa dipungkiri lagi bahwasanya social media atau yang sering disapa jejaring sosial adalah sarana berinteraksi online terbaik saat ini, tentunya masih ada sarana-sarana pendukung lainya, seperti forum, grup, chat, dan lain sebagainya, akan tetapi sekarang ini social media masih menjadi prioritas diantara para pengguna internet. Dengan social media, para pengguna dapat berinteraksi dengan mudah layaknya di dunia nyata, tanpa batasan dan aturan apapun.

Sebagai blogger, apa manfaat yang dapat kita peroleh dari layanan social media? tentunya banyak sekali benefit ataupun keuntungan yang akan didapat, salah satunya adalah mempermudah marketing atau promosi blog kita, di social media kita dapat dengan mudah merekomendasikan blog kita ke orang-orang yang mungkin menyukainya, jadi selain SEO kita masih punya backup trafik yang bersumber dari social media.

Sehubungan dengan mendapatkan trafik dari social media, pada kesempatan kali ini FARESPO ingin membagikan cara membuat sebuah widget social media atau jejaring sosial, namun kali ini widgetnya bersifat melayang atau popup, jadi tidak memakan tempat, selain itu efeknya keren dan loadingnya juga cukup ringan karena tidak menggunakan bantuan javascript.

Cara Membuat Widget Social Media Melayang di Blog

1. Login ke Blogger.

2. Pilih Tata Letak / Layout.

3. Klik Add / Tambahkan gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<style>
.farespo-fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqzORmKG0ZVJOOYU53u5bCf2mh_HeMTlMCe_Y9T2fUcXEHEJP6jmBzHkp5hXE0SzsvghzEmCs9a6iWALf3aWWnq5iP1Vsd0B-avVMzYqxOEdqDUI8pCM7NsnsFkehZeZHJlPxQDCTTHk/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.farespo-fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieir-NTGCxGaW5JQvggYh-el6Dpi1bH_aHbaEXmKYKojgZ_MQ3JKivgH4sLJpAktD-0keGbTrvlK0VJ0yw4DaJ0KIwiTleDKG0jn9msKtF44qmd2-fcI5_2Fj2pgmrg1AbMLErGLTSdV8/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.farespo-fixedmenu_1{margin:0px 0 0 43px}
.farespo-fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZbLIIGLiOYHJaoIId_oGS14_Gz8wrd23Oih4FnW0UUsFoKgrC_DxwwVo5Z2clNFLhEANwqIBd8z_HDAJ2gUxeNPLS8uTsEOx1YLHZgNBF17cGDhjqeJhNh9Bm0_4zXxaZBCKUwzzHFM/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.farespo-fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeO5GINrcaltD94ZLnUDStXgCzdBfHgcKeiXDBsiHf1-GxdK0D_blioAvb93IYbenKNjCeZfg70EPluhIsREweSj-IXjub3VE2s9sodHpl3gOR_8hn9Q60GbPYPRZilFYOB_R07pwLkZ0/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.farespo-fixedmenutw_1{margin:0px 0 0 43px}
.farespo-fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePy_osjYR-yrD6zfi-15Gmdih72SHYYBAlOMM9E6NEBmRyEdlf0FWpyvigRSKQvNo2_AYIIaYSyNkiEQsjgVt4d3RXbJrejXQqM_g-t-AJtsi2236VRxrnlP-UCEC4J204Ek3jBtmlJc/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.farespo-fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVhRAvl332ToL0pFbYOc6BmkoT9jUjwJUzRGOlCplioqgpP5u8htY3r65_uMwXkMV7yCODL4QY2XIxHg5X02QlpB3acwAuJ3WX5UWESYaRmKsusXathkA5lHdNaRUB5lfNXhGlGC_EyoM/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.farespo-fixedmenufb_1{margin:0px 0 0 43px}
.farespo-fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4MIIOp4S-Qgcr0Eb3uS3SPGPM_CwM3n12rz4PCKbR4VcGPW16rQZFDBmOHzrG5dNq_F7Y_0VivyuHWik-AV7FYyvUHT9dOCdq6wjsF5k3KJdMZW08WMMImja9GFlWzyeNPXs_ZU8CvM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.farespo-fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfIY6MaapM6u6Wuh18bfVJ09QMmpr_vGjkOvHtW-JCOCKRl1pKqui4DYgTgvlgkGH1c8BsI_-Y2pkvqxWybZK3Hn4wuHR7aNyzA5yqU4tMiaCxLquh8WZkWRvxQ7i5h4j16FFVtf3Clc/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.farespo-fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='farespo-fixedmenu' onmouseout='this.className=&apos;farespo-fixedmenu&apos;' onmouseover='this.className=&apos;farespo-fixedmenu1&apos;'><div class='farespo-fixedmenu_1'>
<a href='https://www.facebook.com/tuliskancom' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvVPpjuqufwbWgFsJ5mDp-RgNpGQW2rpB_Pit8XULwL0jtlYcNaL65ndznaxcIqPph5gGU5TehYxygqwMfygCaddQVtxgPIEHiem__2NrZvSavk_c6Pb6rVkU8eGI0DSi9R1LJi1gCmHI/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='farespo-fixedmenutw' onmouseout='this.className=&apos;farespo-fixedmenutw&apos;' onmouseover='this.className=&apos;farespo-fixedmenutw1&apos;'><div class='farespo-fixedmenutw_1'>
<a href='https://twitter.com/tuliskancom' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDwA-edYB05F3sZDFJiGcTz5vJ_luSQphrsz5e75VdFNWz9Pza9NqjuIc_qF-lvBBvmv3IFy8hyphenhyphenTMIhLOFwP_jjOo60kEs18iSqTRqN6blEZWSoBaNjGWXVVm2VLJRpdf2RKJmNUJeAk/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='farespo-fixedmenufb' onmouseout='this.className=&apos;farespo-fixedmenufb&apos;' onmouseover='this.className=&apos;farespo-fixedmenufb1&apos;'><div class='farespo-fixedmenufb_1'>
<a href='https://plus.google.com/10921029102910212' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKngWZeMship2wcNBHXcmF2twHQs3QVObtqpl8clpkE6zByd93xZ03hOwdkyo_0kcgbHxUdE4Lsi7ZMuhMLVFKgX6gV85y8GN0sXDoOi5Mvtsw12KHICFaRzVwQGP2i6nLdYQ2eaPl3qc/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='farespo-fixedmenurss' onmouseout='this.className=&apos;farespo-fixedmenurss&apos;' onmouseover='this.className=&apos;farespo-fixedmenurss1&apos;'><div class='farespo-fixedmenurss_1'>
<a href='http://feeds.feedburner.com/bloggertrix' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZA0_PNj3IH858r_KAgtgBjO3zUmRJfHf91TYLdeAFLk2GrLDLDiYrWBcvHpo7OwdUn6f22rLHKl-bK9_JQNG6XsZpWhz6N84WPMlHWdnpnSTiIWv99kQLM8031D1uUGVvXfvxCKoXFEg/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>

Keterangan:

• Ganti kode yang berwarna biru tua dengan ID / Nama Fan Page Facebook anda
• Ganti kode yang berwarna biru muda dengan Username Twitter anda
• Ganti kode yang berwarna merah dengan ID Google+ anda
• Ganti kode yang berwarna oranye denan ID Feedburner blog anda

6. Klik "Save/Simpan", dan selesai.

Demikian informasi terbaru tentang Cara Membuat Widget Social Media Melayang di Blog, semoga bermanfaat, dan selamat mencoba.