Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box - Inilah persembahan
3 in 1 floating widget yang menurut saya merupakan salah satu
widget blogger terbaik di penghujung
tahun 2011 ini. 3 buah widget melayang
yang digabung dalam 1 gadget ini
merupakan sequel jilid 2 dari posting saya sebelumnya
Cara Membuat Floating Facebook Like Box dimana dalam gadget ini
memuat
widget follower blogger (Google
Friend Connect), widget update status Twitter dan widget Facebook Like Box
sekaligus !! 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 ini akan kita
bedah bersama (hiks..!) dalam
tips blogging kali 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/AVvXsEiRn9hyZi1SRX4mJwP_fNI9Y_xm2xvLva-tHEdppjw9VRcMJ0OYEDxd47r5RhtRC6RYGFG4Aj6YAkDN86dHBNK2uKaTGJ0IYdT5ItbHudJImOzssdiyM392YK3ggiLrb8M66-QawvgjP6Ud/');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/AVvXsEj1YGDCRok9Z94LBaKG1feQ1oYUmpLsXrJTTEewHm5HB-B3AorZ7lPbjwcdZDzD5f1d2dq2PLfml8rYB0ssaTxiCuf_UaEexey9ZJpoQ6lq3WmwpsfwXkIzkzL9BbxjXvEy6dfzr-QsXySH/');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/AVvXsEiZMpbZxgDLQcqrMSDPGIqNuGQqK2NIN0vbY0K_NFq4m8qBLbkeActtPfV857SLRgr54TYm28G7wXfMXHWwX4VtnHiCEMqTDCQcQ8m6yyDVUV0bdG0L2f-BYwd4OimTxX92jJE8cPGlO4qY/');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/AVvXsEiHI9RKfAuMMhxS1s7DAH27f31CHVPigHSC7c7NX0drsG_phc0pF6ka3ie6B_CdFWD6stbAo8wQ_R62y9jpsTLovUc5Q3T2nPzuvYNCrAIpe_QAh_n5lLgjWUFoio1s3TGGXQPpZ4marohI/');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/AVvXsEjvViC6_RJ2TUsXEfDX3ox9UTEvw3QfWoxKNeCCWUd_L0rQwHl6RZvMX33ny6HX-u5NRJS3GAHXDamWRz6j__FjW-rJpM_AJNTRsbXiTI7hGb_LQqRmsYuMYrfBwGb5bDRTH1vBNFrAQVZK/');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/AVvXsEhLOVLLBC5qplpviZQR3GW-uqcg8OsphQ2IATyqAChXo5G2IjrbxxtBg1BFbxFxuAZJLR11A-H8eXDiR5ivPSrEevhVzyW5ElZGvuV1Dw7va8P8yGZxs7GDOsGCKKLP80RnxbOH4FNaQofR/');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/AVvXsEiRn9hyZi1SRX4mJwP_fNI9Y_xm2xvLva-tHEdppjw9VRcMJ0OYEDxd47r5RhtRC6RYGFG4Aj6YAkDN86dHBNK2uKaTGJ0IYdT5ItbHudJImOzssdiyM392YK3ggiLrb8M66-QawvgjP6Ud/');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/AVvXsEj1YGDCRok9Z94LBaKG1feQ1oYUmpLsXrJTTEewHm5HB-B3AorZ7lPbjwcdZDzD5f1d2dq2PLfml8rYB0ssaTxiCuf_UaEexey9ZJpoQ6lq3WmwpsfwXkIzkzL9BbxjXvEy6dfzr-QsXySH/');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/AVvXsEiZMpbZxgDLQcqrMSDPGIqNuGQqK2NIN0vbY0K_NFq4m8qBLbkeActtPfV857SLRgr54TYm28G7wXfMXHWwX4VtnHiCEMqTDCQcQ8m6yyDVUV0bdG0L2f-BYwd4OimTxX92jJE8cPGlO4qY/');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/AVvXsEiHI9RKfAuMMhxS1s7DAH27f31CHVPigHSC7c7NX0drsG_phc0pF6ka3ie6B_CdFWD6stbAo8wQ_R62y9jpsTLovUc5Q3T2nPzuvYNCrAIpe_QAh_n5lLgjWUFoio1s3TGGXQPpZ4marohI/');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/AVvXsEjvViC6_RJ2TUsXEfDX3ox9UTEvw3QfWoxKNeCCWUd_L0rQwHl6RZvMX33ny6HX-u5NRJS3GAHXDamWRz6j__FjW-rJpM_AJNTRsbXiTI7hGb_LQqRmsYuMYrfBwGb5bDRTH1vBNFrAQVZK/');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/AVvXsEhLOVLLBC5qplpviZQR3GW-uqcg8OsphQ2IATyqAChXo5G2IjrbxxtBg1BFbxFxuAZJLR11A-H8eXDiR5ivPSrEevhVzyW5ElZGvuV1Dw7va8P8yGZxs7GDOsGCKKLP80RnxbOH4FNaQofR/');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">
<!-- Include the Google Friend Connect javascript library.
-->
<script type="text/javascript"
src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted.
-->
<div id="div-5280101236238054965"
style="width:225px;border:1px solid
#cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] =
'#ff9900';
skin['ENDCAP_TEXT_COLOR'] =
'#333333';
skin['ENDCAP_LINK_COLOR'] =
'#0000cc';
skin['ALTERNATE_BG_COLOR'] =
'#ffffff';
skin['CONTENT_BG_COLOR'] =
'#ffffff';
skin['CONTENT_LINK_COLOR'] =
'#0000cc';
skin['CONTENT_TEXT_COLOR'] =
'#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] =
'#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] =
'#666666';
skin['CONTENT_HEADLINE_COLOR'] =
'#333333';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /*
location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-5280101236238054965',
site: '13497557564014853740'
},
skin);
</script>
</div>
</div>
<div class="barrighttwitter"
onmouseover="this.className='barrighttwitterc'"
onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script
src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type:
'profile',
rpp: 2,
interval: 30000,
width: 220,
height: 220,
theme: {
shell: {
background:
'#333333',
color:
'#ffffff'
},
tweets: {
background:
'#333333',
color: '#f3f5f0',
links:
'#eb9f07'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior:
'all'
}
}).render().setUser('@rayhanzhampiet').start();
</script>
</div>
</div>
<div class="barrightfacebook"
onmouseover="this.className='barrightfacebookc'"
onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<iframe allowtransparency="true"
frameborder="0" scrolling="no"
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Share-With-Irfan-Blogs/322414587773378&width=24
0&colorscheme=light&connections=15&stream=false&header=false&height=320"
style="border: none; height: 320px;
overflow: hidden; width: 240px;background:
#fff;"></iframe>
</div>
</div>
5. Kalau mau gampang sobat tinggal mengganti ID
akun Google Friend Connect, Twitter dan Facebook Like milik saya yang sudah
saya tandai dengan tulisan warna merah dengan ID
atau kode akun milik anda.
6. Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat
hasilnya.
Buat yang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikut
ini tutorialnya :
2.
Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.
3. Anda akan dibawa ke halaman kustomisasi gadget
seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower
yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman
ini.
4.
Jika
kustomisasi sudah selesai, klik tulisan Generate
code pada langkah ke-3 Create the
HTML code, maka kode HTML gadget follower / Google Friend Connect milik
anda sudah selesai dan siap dicopy atau disimpan di notepad.
Untuk
pengaturan widget
update status Twitter silahkan meluncur ke halaman
http://twitter.com/about/resources/widgets,
sedangkan untuk
Facebook Like Box
dapat sobat membuatnya dihalaman ini
http://www.facebook.com/pages/create.php. Mohon
maaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya
berhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri
membuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyata
sobat gagal memasang dan melakukan pengaturan pada widget
ini. Blogger sejati
tidak mengenal kata
MENYERAH kecuali anda ingin menyandang gelar
NEWBIE
FOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!
