Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box

Kali ini saya akan share tentang Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah satu widget blogger terbaik di tahun 2012 ini. 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like, sekarang waktunya kita bedah bersama sama Widget ini.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2. Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAg6vvo0lvPqXkG9xdEASUL1525yqJPuUNv-zGNTZcTRupV0X_3VL_wM9c0J-NV37zvndt4UAGaMm38cc8gCyAB2eTpTpuyd06xlXpbkvZS0Mse2sfUfdahNzRE_ubQ2MP47FTqwPld02C/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Wh4uK6ubdU_dUwSIKKNalUS1r_pFnnWJnALPNzhb1sqAmoJJcozKGvQSu3Bpwf37AXLHNM3KO35GK5gnD3mHqtY-IjKLlFXlXcYS41m00cpmZWapGp6d4S0mlXYHGuXBWwMi-m9C8bPw/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFAY1TGegV7YoqNvc-y4jGOWVj_tH6EqYYeF5nySWg0MCEyOfP3L6Is5x7kDuz0Q8beA5EKgQnvZ27meaj9Fm21pYID9tbRQJoJ4FcwDNqlf0rbEOixysWFQTthOiPU2xeUDQb1Y_HPDaq/');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/AVvXsEibB2ixqN9kf_hnsKlja1fQvwsMTJqfAzUptGpk-Zll-ATpoQ80YYS6TxyhaEsdDG1s647rj-273b8IFYjcqcJF2loe_a3OxBQVDf0WV3BkYA86qw8P_SfM4sDusnzWTJAcuzND8fHyyaYG/');background-repeat:no-repeat;width:288px;height:345px;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/AVvXsEgw1I_G9CUsCECzeGOhwc8XOKd7nFjYiHAZZB23b0Rqc70yZys7ihISjGnbtTi7Jvbf5RRK6-gQwWLT3IvTbJbMTmkq1PEn30J7pta5Rz0rpcSXxJi2i4Gmbr9_k4z9nlseiXiHvk8hAgUS/');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/AVvXsEhJq9RzPyIA0pkmBPUHz-ACOXBYiYYp1kDSqlN_r4dKdpDZCELuzkj2daTUvjoueCQVvYAI7SyYIpB-n6B0rdrFfgL8VXB-2NjTQy0-4021rQFXz1RLM6YhuhazLgYePIgiA5jhO3EpeTis/');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="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

3.  Kustomisasi widget :

• Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
• Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
• Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4.  Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAg6vvo0lvPqXkG9xdEASUL1525yqJPuUNv-zGNTZcTRupV0X_3VL_wM9c0J-NV37zvndt4UAGaMm38cc8gCyAB2eTpTpuyd06xlXpbkvZS0Mse2sfUfdahNzRE_ubQ2MP47FTqwPld02C/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Wh4uK6ubdU_dUwSIKKNalUS1r_pFnnWJnALPNzhb1sqAmoJJcozKGvQSu3Bpwf37AXLHNM3KO35GK5gnD3mHqtY-IjKLlFXlXcYS41m00cpmZWapGp6d4S0mlXYHGuXBWwMi-m9C8bPw/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFAY1TGegV7YoqNvc-y4jGOWVj_tH6EqYYeF5nySWg0MCEyOfP3L6Is5x7kDuz0Q8beA5EKgQnvZ27meaj9Fm21pYID9tbRQJoJ4FcwDNqlf0rbEOixysWFQTthOiPU2xeUDQb1Y_HPDaq/');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/AVvXsEibB2ixqN9kf_hnsKlja1fQvwsMTJqfAzUptGpk-Zll-ATpoQ80YYS6TxyhaEsdDG1s647rj-273b8IFYjcqcJF2loe_a3OxBQVDf0WV3BkYA86qw8P_SfM4sDusnzWTJAcuzND8fHyyaYG/');background-repeat:no-repeat;width:288px;height:345px;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/AVvXsEgw1I_G9CUsCECzeGOhwc8XOKd7nFjYiHAZZB23b0Rqc70yZys7ihISjGnbtTi7Jvbf5RRK6-gQwWLT3IvTbJbMTmkq1PEn30J7pta5Rz0rpcSXxJi2i4Gmbr9_k4z9nlseiXiHvk8hAgUS/');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/AVvXsEhJq9RzPyIA0pkmBPUHz-ACOXBYiYYp1kDSqlN_r4dKdpDZCELuzkj2daTUvjoueCQVvYAI7SyYIpB-n6B0rdrFfgL8VXB-2NjTQy0-4021rQFXz1RLM6YhuhazLgYePIgiA5jhO3EpeTis/');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="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
<a href="http://www.blogger.com/follow-blog.g?blogID=3039683867910263775" target="_new" title="Follow With Google Friend Connect"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4C5R0jQBZYzV_I2kmx_mLS-Yk1LFBwbKmubrJwnxp5OHy5z_rUUu5bopwYYnk3BVpMZr3IQCDIPMW3JlPkB2dOqEbI2Ghg0hRGv1z0OxTbzXArvIcIWu2-yOiY6r_9m9Wk2tPFaTA1tG/h90/Join.PNG" /></a>
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/coxelgokil"  data-widget-id="400960210061115392">Tweet oleh @coxelgokil</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<div class="fb-like-box" data-href="http://www.facebook.com/blogacibudaya" data-width="288" data-height="345" data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
</div>

5.  Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

catatan : Bila anda masih bingung atau kesulitan untuk mengetahui kode ID Google Friend Connect (GFC), Facebook Like Box, dan Twiter Update berikut ini tutorialnya :

• Cara Menambahkan Google Friend Connect Pada Blog
• Cara Menambahkan Facebook Likd Box Connect Pada Blog
• Cara Menambahkan Twitter Update Pada Blog

SEMOGA BERMANFAAT 



Sumber :  http://kertas-kecilkita.blogspot.com/

Author : coxelgokil | ACI BUDAYA

Anda telah membaca artikel tentang : Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih... <a href="http://acibudaya.blogspot.com/2013/11/cara-membuat-widget-melayang-google.html" target="_blank">Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box</a>

Author : Aci Budaya - [Blog Lain]