Sunday, 15 February 2015

Cara Membuat Widget Social Media Melayang di Blog

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/AVvXsEjpnd7MuYz9wPPzEfi80ZRzkxkcFwJIpwEMzcA8EM83QvVW-wn4u7LNdyW2QcfYZexsrZvPm0TmWSZeBqr8G1JAW7TW1RoF8KgFIjunwgXZaQkHY8NgO2Sy8y7KNnn-kG-D-gBCEl2s8F4/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/AVvXsEia10zfwrgwgw-y-zXF76A9qi8Ge9s1rUk7msPyfW_s_UxGo3cHGfKvB6XLVk4YHMlbXNdqVEJPZqr0pB0SrlSEfr5jMW8A2nUb7TTlUb4eQEQCceQqO7emdW45s61vq9x7Pvp1s_F5z3Y/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/AVvXsEhcojjYCOZmoHfXiT0CWmbfS6q163rbljsW-bYKO0ruWBo__25KtVyZTi2luqsM1RZepEkGStMe3p-e87-dqG4wGM1n7arDcPvTKAJS0Ppti119-mj_gGX6Q3ROgmOu1DUZcS-Y8PMxQ90/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/AVvXsEhal2FEnfNp1J1GpCByKhzCe2lkghM5-IlL6NMhde3fkPSLFkn8vxJtjY6-A8OrawAEmvoNeM1UcPpz-8uI7wD93hr9Dxr5FtWXaSuvImBw_Bv3GciRqqTblnC3C0FwP3catZjNv4EcW9E/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/AVvXsEjVVAu9egHBo8fxeHRaU2QMb236R7Z3T5G73gxaJUMUnykDh-tqkjaqaM7Z64l3dGVRfF9THzrjRDFU1ZyANEJJOSZj3doOQvzcSEtapYpGVac_FvVnqzsLv9v1AId6vNZ_sj2HDNcIE5g/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/AVvXsEi-BPYQhU-oYHDpPHKtQ_Ha5lOEIPs0xVYB5MuMSG69d0wmSPBgAVhPP0nvjifC8sLCkjsfjuiHNH66QV9cHqmhIxf3jpYQRDd84aZwdnb7f4_xaY1JGxvHzRam0Gg59ArnrKwsoIjGL8I/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/AVvXsEjO0uLhQ2XAXhWi769-UexJ6lBfWSIKvTGSkapv70gX3j3x2VlIuuveKPM3Uk4cQnMdsYEWoq1C9UCbCwTT3wH3Vr0JdbttwSQMdlTfbLSbaY39ebUmsnMeRvFyBnHrH3vGv95zA2dGxH0/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/AVvXsEhhehJyMO-bGni6kCJ3BWvUNhSJ_F9-XMuaLRlOUg6v9_D7xoPrTgSpj1RZoJkGmhRHQwe-BS6F0YO5RfBC6jG9ZQAC0i_1bHTIv5QvhM-hCnMBCPW17Jpt6QELIz4h95oO_PG4qkIvYlY/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/AVvXsEj9ET9b_XIHt3YEFsUgVZ3Z1BivRICbh7W7B_RoaF9VWRsLozHJxM7iSzxKnTy7x2xvWjyiuAJLSM68R-ma4U9JKbRJQGckT1bjoeNWE9wqUDis6uJC6qNoVuKkboUIKDtzvppEByH0rMs/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/AVvXsEhuAwyv0QhVzQ-plNh6PvV4lPAQgOqI92iB0x5MOzqTDanqJS08f26GNYsPItofXhZiryxgH1iGNLHHZV1aDEO2QV4UoJhQnRFzq2WrNWs1FuF0OMmvdLG5ZbC1Pq1Uf-QWmcXy6VT0RPc/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/AVvXsEipkmPXk2wGgJVDTUrTGA6-X9iGZUWc1j5vcUujt7BivGxyCqWvR-wAGB5AMUHA5d-7t2mgxb2dR6odvQQqhDBVr3FT_LZWyCrHiTe8KoswKZjuGfDGCI4P-qJDgL8TryZKqquw_RQLfBo/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/AVvXsEh-KVYGdu7bZ8SjzxHu7GACt57iEaeQ1KJiECoO7k4zxFfoGmlaEPkfMeiw2XRoGKs2r-uQsAiLOMD6ZA-y1XzRI6EASng2UBFT0T1ryGW_5X_8x5YlqkV0gnTAKbftIOr1oTxxgK7-NvU/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 MediaMelayang di Blog, simak juga artikel menarik lainya seputar tutorial dan tips trik blogging tentang Cara Memasang Widget Jadwal/Waktu Shalat di Blog, semoga bermanfaat, dan selamat mencoba.
Previous Post
Next Post

0 komentar: