Widget Melayang Twitter dan Facebook Like Box ~ Aji.Info.Us

Inilah persembahan 2 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik di tahun ini. 2 buah widget melayang yang digabung dalam 1 gadget dimana dalam gadget ini memuat 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 status Twitter dan Facebook Like ini akan kita bedah bersama dalam tutorial kali ini.

Cara Membuat Widget Melayang 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">

.barrighttwitter{background:url('http://1.bp.blogspot.com/--gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/twitter.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}

.barrighttwitterc{background:url('http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/twitter.png');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('http://1.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/facebook.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/facebook.png');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="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 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">

.barrighttwitter{background:url('http://1.bp.blogspot.com/--gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/twitter.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:300px;z-index:1000;}

.barrighttwitterc{background:url('http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/twitter.png');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:210px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('http://1.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/facebook.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:460px; z-index:1000;}

.barrightfacebookc{background:url('http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/facebook.png');background-

repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:275px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<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: 240,

height: 250,

theme: {

shell: {

background: '#33ccff',

color: '#ffffff'

},

tweets: {

background: '#ffffff',

color: '#333333',

links: '#33ccff'

}

},

features: {

scrollbar: false,

loop: false,

live: false,

behavior: 'all'

}

}).render().setUser('@aji_tanpa_e').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/AjiInfoUs/133890180006831&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 Twitter dan Facebook Like milik Admin yang sudah Admin tandai dengan tulisan warna merah dengan ID atau kode akun milik sobat.

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

Untuk pengaturan widget update status Twitter silahkan meluncur ke halamanhttp://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 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 Mencoba Sobat..!