Coretan BoWo Coretan BoWo Coretan BoWo: 4 Langkah Membuat Widget Modern

Wednesday, May 30, 2012

4 Langkah Membuat Widget Modern

Cara Membuat Widget Melayang Ini akan membuat sebuah tampilan blogger anda lebih menarik. Karena yang akan ditampilkan pada widget tersebut antara lain: Google Friend Connect, Twitter dan Facebook Like Box. persembahan 3 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik. Ya walaupun temen - temen sudah pernah tahu atau sudah menerapkannya dibloggernya, tapi tidak masalah mungkin ini bisa jadi pengingat ataupun sebagai percobaan bagi blogger pemula. Demo penerapan widget melayang atau (floating widget) ini bisa anda lihat pada gambar dibawah ini. 

Langkah dalam penerapannya adalah.
1. Login ke blogger anda, 
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3. Copy script master widget dibawah ini dan paste pada gadget.
<style type="text/css">
.barrightblogger{ background:url('http://1.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/blogger.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}.barrightbloggerc{ background:url('http://2.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/blogger.png');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('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="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>
4. Simpan

Keterangan:
Ganti CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
Ganti CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.  
Ganti CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.
tanda tangan

Ditulis Oleh : Coretan BoWo ~ Berbagi ilmu

Christian angkouw Terimakasih telah membaca artikel tentang : 4 Langkah Membuat Widget Modern . Semoga dapat memberikan hal yang positif bagi anda.

:: Coretan BoWo ::

Note :
~ Berikanlah komentar dengan kata-kata yang baik dan sopan.
~ Dilarang mencantumkan link yang berbau negatif.