Widget Melayang/Follower,Twitter dan Facebook

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/AVvXsEhE04crZt1P8DT_wW2N06QqM_Ip5e0Z5RLIYhv6t1RSKNo7aIGP-kR8bbwnZzV2-eIaBX5M7I18gqcOr9-sylG7OspK29xNm_BuEHaQ87RRr3t0zydAyucXnrc7CRn6ecCXE5kIOuhDSTwv/');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/AVvXsEiy1-bH_DT7Gmlk5rlbYnQIf3dJnpmQ9eP6rVSU03txp8bQohfOUGl9q_HYMpmi3Fq0WTC-eF0b91US9RS3ys-SX1D_65luBHUXINF8ZSYo3NpKlp3v4inO4pZVM7VZoT-uAukUAgliEJv5/');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/AVvXsEgwkZ3nC6RP-xuM5I6E_xaPILndzQgIKJgo2ouoM7O4Vbe-VKBlOHEh1PgxeESpVZ3oHGYFPHENAToARhzM9hXwnyDbSBXwh78bBv7W-3UCuY8pYCggpoz-8dih4zspdU2QMttCOQkIjT0h/');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/AVvXsEjIcIUCrtD53rms6QwWHlLHqRmuQkH6ipL86De-y3IYiAXEVc6G25QLBeg3IxlPwMf7jM-orfd-2lWGx7C-qcOol_OUpmffdr9VvW8e3cZ-cTPxRCf2ADWCyQvgSKeYWiduXn9EoGcjNKhU/');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/AVvXsEgV2EOQbC9B5yv4MvnoduOuZGX4v26S54DE4RBx-lj_JDNwkPZASiZSGPTDi1ujTbP3McGd0pDXSfwqGNFsSbLVZovCxjrWa8fN2AJT9W2DKOLplAJv27L4-NQ1gSM5al1fQuoHCpgahDsv/');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/AVvXsEgQmigvoOlFAsHDiTgWGj2OC8dDmrpm-vVfFmDrcziB97pSP48jfYnJLSJetuB3TGKKzzYh1OeOyhc9IrfiRY-wyB2Op_D1hbYeI-XZzKtng9wh5XNAWu9BBPF2tY_KIndTTcrr7W8PCX7f/');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 )

 

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.