Modification Gadget From Google Friend Connect

Lagi asyik mengangkat tema menghias blog agar bisa tampil beda nih Beben Koben si bloglang anu ganteng kalem tea :D Postingan sebelumnya sudah dikasih yang berbasis embed flash kepada agan agin sekalian. Bagian komentar pernah juga facebook comments, menyapa pengunjung dengan hello bar widget serta seabrek hiasan lainnya, monggo diacak-acak saja kotak search blog ini :P
Kesempatan sekarang Beben akan berbagi memodifikasi salah satu fasilitas paman google! Widget yg akan dikuak yaitu dari Gadget Friend Connect. Kurang lebih terdapat 15 biji gadget yg dapat sobat sikat :-" dengan fasilitas google friend connect.

Namun cuman satu gaya yg akan dibahas disini ;)) soalnya ada itu ajah bos :"> Merombak Gadget Recent Visitors google friend connect :-bd

Standar instalasi:

Ikuti langkah-langkah berikut untuk menginstal gadget ini di blogsite sobat:

1. Seting blog jika sudah memiliki account google, kalau belon silahkan sign-up di Google Friend Connect.
2. Cari gadget (Recent Visitor) di galeri gadget dan kemudian klik "Buat kode HTML"
3. Copy kode dan paste ke blogsite di mana sobat ingin gadget ini muncul
4. Enjoy!

Singkat begini, masuk pada langkah pertama diatas ► pilih blog yg mau ditanam gadget recent visitor ► klik ramban galeri gadget ► klik tab menu semua gadget ► scroll paling bawah ► there is :P
Dapat tuh gadgetnya, sekarang baru masuk ke inti perombakan total, let's get de done \m/

Tiga gaya sobat bisa pilih Screensaver, Scroller, and Cloud b-) Gampang kok mengaturnya, nanti broder² tinggal ganti script yg dibedakan warnanya saja ;)

Screensaver

<!-- 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-XXXXXXXXXXXXXXXXXX" style="width:300px;"></div>
<script type="text/javascript">
var skin = {};
skin['ALTERNATE_BG_COLOR'] = '#000000';
skin['BG_COLOR'] = '#ffffff';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-XXXXXXXXXXXXXXXXXX',
url:'http://www.eaglewebapp.com/ewa/gfc/screensaver/screensaver.xml',
site: 'YOUR GOOGLE FRIEND CONNECT SITE ID',
'prefs':{'screenWidth':'300','rows':'5','waitTime':'5','useEffects':'1'}
}, skin);
</script>

Configuration and customization

Ketika beres instal, broodeh dapat mengatur parameter berikut:

• screenWidth: width of the screen (pixel);
  constraint: screenWidth >= 200px
• rows: rows of faces that will be showed in the gadget;
  constraint: 2 <= rows <= 15
• waitTime: waiting time between two effects (seconds);
  constraint: 1 <= waitTime <= 10
• useEffects: Yes/No, it says if the animation for images has to be used or not;
  constraint: useEffects = 1 (Yes) | 0 (No)

Example (kalau jalan)

Cloud

Scriptnya sama dengan screensacer, sobat hanya perlu mengganti URL http://www.eaglewebapp.com/ewa/gfc/screensaver/screensaver.xml denganhttp://www.eaglewebapp.com/ewa/gfc/cloud/cloud.xml

Configuration and customization

• cloudWidth: width of the cloud (pixel); ^Required
  constraint: cloudWidth >= 100px
• cloudHeight: height of the cloud; ^Required
  constraint: cloudHeight >= 60px
• maxDisplay: number of recents friends that will be showed in the gadget;
  constraint: 1 <= maxDisplay <= 20
• xAxis: x-scaling;
  constraint: 1 <= xAxis <= 3
• yAxis: y-scaling;
  constraint: 1 <= yAxis <= 3

Example:

Scroller

URL untuk mode inihttp://www.eaglewebapp.com/ewa/gfc/scroller/scroller.xml

Configuration and customization

• imgHeight: height of each scrolling image (pixel); ^Required
  constraint: imgHeight >= 20px
• scrollerWidth: width of whole Scroller gadget (pixel); ^Required
  constraint: scrollerWidth >= 100 px
• maxDisplay: number of recents friends that will be showed in the gadget;
  constraint: 1 <= maxDisplay <= 200
• speed: scrolling speed;
  constraint: 1 <= speed <= 3
• showEndcaps: to show/hide encaps;
  constraint: showEndcaps = 1 (Yes) | 0 (No)
• showInnerLines: to show/hide inner horizontal lines;
  constraint: showInnerLines = 1 (Yes) | 0 (No)
• endcapsBg: endcaps colors;
  constraint: 1 <= endcapsBg <= 3 (1: default=#E0ECFF, 2: Black, 3: White)

Example:

Demikian bos, for details and resource this article from Eagle Web App.
Happy google friend connect gadget \m/