Widget Melayang/Floating Follower Google Friend Connect Twitter dan Facebook Like Box ( 3in1 Widget)

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 penghujungtahun 2011 ini. 3 buah widget melayang

http://rayhanzhampiet.blogspot.com/2011/12/widget-google-friend-connect-twitter.html

yang digabung dalam 1 gadget inimerupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget inimemuat widget follower blogger (GoogleFriend Connect), widget update status Twitter dan widget Facebook Like Boxsekaligus !! Demo penerapan widgetmelayang (floating widget) ini bisa sobat lihat disamping sidebar kananblog ini. Seperti apa Cara membuatwidget Follower Blogger, status Twitter dan Facebook Like ini akan kitabedah bersama (hiks..!) dalam tips blogging kali ini.

Cara MembuatWidget 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 pastepada gadget.

<style type="text/css">

.barrightblogger{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH69N1KSxXnquZ_yMKL4xFALvk6GDr-5XeskwnAhvP6Elf736zvhBh3ezo_dTMvFR8shGHioxtpH0v_dtIbRy0K4C_ioPCBzUsXFyZjpdxocmu2eod-_CsrrLDh0Efz7PwU5mbRjtKYID/');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/AVvXsEjhhOQLTYfRQcgh4Y1CJ9rRmzPlv1qVF3PyQr3mBgkMQuCngcPWLMEPSCMjQC0eyw6o3Ww3iGgfRQ44IS6Catxk8IsjHP7bdyCqU2ahxJJKK6d7Bimj3DohZa-8lXFcMwqPLUkT0qVdc661/');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/AVvXsEg6Nr7vIEl06Htamtf7P0jibOLVCEnmyF0eTWl_P_QuhcXudcM3Eq-DUz61QVsonFon0_DeTyFwsVkQ5T1_0hmb2ieasBk_g987CLWNwkYdf2hFVp_QPn5Hey0IB7_7kr-_FussCzUwrXRr/');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/AVvXsEgBIimI8SCuWYzGAvecdDs4srLOpp_e5YZZU7Il3zvtihFp0p9x5iaIP9wOxETSc3ogCHWgre0MNurw2WlhTJBRlBQx6_z52ANjdqL0ZEHiYOME8Bz688JcGWjJeLYoHhuBdAk8GHudP0q9/');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/AVvXsEjCq2k47_Kep4geHZ4Ewh4RASgx3sL6GYbbs5zt6qd7x0bhwWZ8UIfVEB1U6RP4sti_F3RyHnU1adT1H8xl3k4InzXFsE534aL6zQ6mZ6bq4ooZCWZFqsveIpUGFTS12LXysdzw451mlVaW/');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/AVvXsEgcRHI2D231bUYdmWeEPbsi-yaknQsqV-tnHq3cc70Tl_P8SiYgH-_MJo6jnBWrI5-Nvu0mBBl7VJW_Hbz_pJgVRDUVFLqV9ZlX2R4Ga5rNEfOpPMXYHi3JIjJCriKauunIP3iusqCoUnyW/');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">

CONTENTBLOGGER HERE

</div>

</div>

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

<div class="barcontetwitter">

CONTENTTWITTER HERE

</div>

</div>

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

<div class="barcontefacebook">

CONTENTFACEBOOK 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/AVvXsEgdH69N1KSxXnquZ_yMKL4xFALvk6GDr-5XeskwnAhvP6Elf736zvhBh3ezo_dTMvFR8shGHioxtpH0v_dtIbRy0K4C_ioPCBzUsXFyZjpdxocmu2eod-_CsrrLDh0Efz7PwU5mbRjtKYID/');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/AVvXsEjhhOQLTYfRQcgh4Y1CJ9rRmzPlv1qVF3PyQr3mBgkMQuCngcPWLMEPSCMjQC0eyw6o3Ww3iGgfRQ44IS6Catxk8IsjHP7bdyCqU2ahxJJKK6d7Bimj3DohZa-8lXFcMwqPLUkT0qVdc661/');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/AVvXsEg6Nr7vIEl06Htamtf7P0jibOLVCEnmyF0eTWl_P_QuhcXudcM3Eq-DUz61QVsonFon0_DeTyFwsVkQ5T1_0hmb2ieasBk_g987CLWNwkYdf2hFVp_QPn5Hey0IB7_7kr-_FussCzUwrXRr/');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/AVvXsEgBIimI8SCuWYzGAvecdDs4srLOpp_e5YZZU7Il3zvtihFp0p9x5iaIP9wOxETSc3ogCHWgre0MNurw2WlhTJBRlBQx6_z52ANjdqL0ZEHiYOME8Bz688JcGWjJeLYoHhuBdAk8GHudP0q9/');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/AVvXsEjCq2k47_Kep4geHZ4Ewh4RASgx3sL6GYbbs5zt6qd7x0bhwWZ8UIfVEB1U6RP4sti_F3RyHnU1adT1H8xl3k4InzXFsE534aL6zQ6mZ6bq4ooZCWZFqsveIpUGFTS12LXysdzw451mlVaW/');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/AVvXsEgcRHI2D231bUYdmWeEPbsi-yaknQsqV-tnHq3cc70Tl_P8SiYgH-_MJo6jnBWrI5-Nvu0mBBl7VJW_Hbz_pJgVRDUVFLqV9ZlX2R4Ga5rNEfOpPMXYHi3JIjJCriKauunIP3iusqCoUnyW/');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&#039;},

  skin);

</script>

</div>

</div>

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

<div class="barcontetwitter">

<scriptsrc="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&amp;width=24

0&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320"style="border: none; height: 320px;

overflow: hidden; width: 240px;background:#fff;"></iframe>

</div>

</div>

5.     Kalau mau gampang sobat tinggal mengganti IDakun Google Friend Connect, Twitter dan Facebook Like milik saya yang sudahsaya tandai dengan tulisan warna merah dengan IDatau kode akun milik anda.

6.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihathasilnya.

Buat yang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikutini tutorialnya :

1.      Login ke GoogleFriend Connect menggunakan akun blogger/gmail anda.

2.      Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3.     Anda akan dibawa ke halaman kustomisasi gadgetseperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris followeryang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalamanini.

 4.       Jikakustomisasi sudah selesai, klik tulisan Generatecode pada langkah ke-3 Create theHTML code, maka kode HTML gadget follower / Google Friend Connect milikanda sudah selesai dan siap dicopy atau disimpan di notepad.

Untuk pengaturan widgetupdate status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets,sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php. Mohonmaaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganyaberhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendirimembuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyatasobat gagal memasang dan melakukan pengaturan pada widget

http://rayhanzhampiet.blogspot.com/2011/12/widget-google-friend-connect-twitter.html

ini. Blogger sejatitidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIEFOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!