Widget Blog | Membuat Widget Twitter, Facebook Like Box Floating/Melayang di Blog

Assalamualaikum, pada kesempatan kali ini, JOVANZ akan berbagi ilmu tentang tutorial blogger, yaitu cara membuat  Widget Twitter, Facebook Like Box Floating/Melayang. Langsung saja kita praktekkan.

Cara Membuat Widget Melayang Twitter dan Facebook Like Box :

1. Login ke dashboard blogger anda,
pilih Rancangan > Elemen Laman > Add gadget(HTML/Javascript).

2.   Copy script widget dibawah ini dan paste pada gadget HTML/JAVASCRIPT

<style type="text/css">

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZkZevEANGhCbucwbzB9nrx0Q-2BxA6kFYkEyYKwmtsM0TZLEuxBNrsjdTUgQHsRlsAbB1zBBcqOE4Yf_gn1GVdvY6mqlWwbnBplUUYtnYFqgIdWr-qSaVWskzE4NINriaM3_zVLSts0k/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIY1yzdTs_J53Rn-nzlsja6lhrwvUbwhPgtKXhm_UwOiNiOjsgQ1tkKJlfRCF3I81vNocYAW75Wi1HNrLPeeT2ViPgJ5_NB12yj6wrvVcw5EInJp9cz-kYcCvqFrJ69zqtMT8B5on2jiym/');background-repeat:no-repeat;width:288px;height:300px;position:fixed;right:0px;top:120px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGrRLxq-YLy1OR2sBerNw8f9G9lZN18eCuOsf7ci4j-oQjnp86VL7Sw_s7K_piemqvJErngukL16YmQCjzNzDVEecBXuQ7Opi_AqFFKG4IUIvnHfWu8OM_PggP_2i-UPDQ7DD5eW3blsJm/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-hcJCmve_Tpicu2plW3XBoUIqzaVjsOz2RGHrVlXPkEBM649FKX36muD54lla7kuRGDMk9XYGG_d8vqLW5zTTYhZsJXOIWRximFVBtYlLOJTWVIIjHylcXcz_Gc5eYSLx2SZGgziRrNRD/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">

<div class="barcontetwitter">

KODE HTML TWITTER

</div>

</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

KODE HTML FACEBOOK LIKE BOX

</div>

</div>

3. Pengaturan widget :

• Ganti tulisan KODE HTML TWITTER dengan kode HTML widget Twitter anda.

• Ganti tulisan KODE HTML FACEBOOK LIKE BOX dengan kode HTML Facebook Like Box anda.

4.      Jika sudah, Save / Simpan gadget dan lihat hasilnya.

KETERANGAN :

Untuk pengaturan widget Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Box http://developers.facebook.com/docs/reference/plugins/like-box/ ,

 jika sobat belum mempunyai Halaman Facebook, sobat dapat membuatnya dihalaman ini http://www.facebook.com/pages/create.php?ref_type=sitefooter