Memasang Yahoo! Messenger Pingbox Melayang di Blogger Memasang Yahoo! Messenger Pingbox Melayang di Blogger

Untuk posting kali ini .. gw mau ngasi sedikit tips buat temen - temen Blogger yang pengen mempercantik Blog'nya ..
Dan di posting - posting sebelumnya .. sebener'nya gw juga nggak pernah ngasi tips tentang Blogging ..
Tapi daripada nggak ada yang mau di posting .. ya gw iseng aja posting kayak gini .. hhehe ..
Siapa tau aja bisa berguna buat temen - temen Blogger yang masih Newbie dan pengen Blog'nya tambah keren ..
Biarpun tambah keren'nya cuma dikit .. dengan tips yang nggak berkelas kayak satu ini .. hhegege ..

Buat temen - temen yang masih bertanya - tanya .. "Yahoo! Messenger Pingbox itu apa'an sih ?" ..
Yahoo! Messenger Pingbox adalah salah satu fitur dari Yahoo! yang memungkinkan seseorang buat Chating dengan kita ..
Biarpun seseorang tersebut nggak punya Yahoo! ID .. dan seseorang tersebut nggak perlu LogIn ke jasa Chating apapun ..

Dan Pingbox ini sifat'nya Personal .. milik kita sendiri .. dengan kata lain .. seseorang tersebut cuma bisa Chating dengan kita aja ..
Nggak bisa di pake buat Chating dengan orang lain atau pengguna Yahoo! lain'nya ..
Pingbox ini juga nggak cuma bisa di pajang di Blogger aja .. tapi juga bisa di pajang di beberapa situs Pribadi dan Jejaring Sosial .. misal MySpace , Friendster , Live Journal .. dll ..
Buat contohnya .. temen - temen bisa langsung aja liat yang ada di Blog ini .. di pojok kanan bawah monitor temen - temen ..
Kalau temen - temen belum pasang Plugin Flash buat Browser'nya ya nggak keliatan .. hhehe ..

Sebenernya kita bisa pasang Pingbox ini di Blogger di bagian Sidebar .. dengan fitur Add Gadget yang udah di sedia'in Blogger ..
Tapi kali ini kita pasang dengan cara yang agak berbeda .. yaitu kita buat melayang di pojok monitor kita ..
Jadi .. biarpun halaman'nya di Scroll / di gulung .. Pingbox'nya bakal tetep keliatan ..
Langsung aja kita mulai .. biar nggak kelamaan .. cz jari gw juga udah mulai kerasa pegel .. hhehe ..

Dan yang kita butuh'in buat tips kali ini .. yaitu .. :

1. Yahoo! ID
Kalau temen - temen punya Email di Yahoo! .. ya itu Yahoo! ID temen - temen ..
Misal .. nama_kita@yahoo.co.id .. nama_kita = Yahoo! ID .. @yahoo.co.id = Domain Email'nya ..
Kalau belum .. ya silahkan daftar dulu ke Yahoo! ..

2. Hosting yang nyedia'in Direct Link ke file tersebut
Yang Gratis'an .. misal .. Ripway , Fileave , Fileden , Webs , dll ..
Gw sarankan .. temen - temen pake Webs aja .. selain Gratis .. Webs juga punya fitur - fitur yang keliatan'nya nggak ada di File Hosting laen'nya ..
Misal Super Multi Uploader yang memungkinkan kita buat Upload beberapa file sekaligus ..
Point .. yang bisa kita tukar'in dengan fitur tambahan yang si sedia'in oleh Webs .. dan masih banyak lagi ..
Dan bukan bermaksud mau jelek - jelek'in .. buat Ripway .. gw sama sekali nggak nyaran'in ..
Cz gw punya pengalaman nggak enak sama Hosting tersebut .. karena sering banget error ..
Dan akibat'nya .. Blog kita juga akan terganggu .. cz file kita yang buat Blog kesimpen di situ ..

Yang mau pake Webs .. bisa langsung aja daftar di sini .. gratis .. :

Webs

Kalau udah siap semua .. silahkan LogIn ke Yahoo! dengan ID masing - masing .. kemudian pergi ke sini .. :

Yahoo! Messenger Pingbox

Lalu buat Pingbox dengan gaya yang temen - temen inginkan ..
( Klik gambar'nya buat memperbesar )



1. Nama Pilihan Tema
2. Ukuran dan Warna huruf dalam Pingbox
3. Nama yang di tampilkan dalam Pingbox
4. Mengharus seseorang untuk mengisi nama .. sebelum bisa Chating dengan kita jika di centang
Lalu klik Save ..



Kemudian .. jangan lupa atur juga Lebar dan Tinggi Pingbox yang kita inginkan .. kalau gw di sini .. 180 Pixel x 320 Pixel ..
Setelah itu .. Copy Code yang ada di dalam Box .. dan Paste'kan ke Notepad (Start →» All Programs →» Accessories →» Notepad) ..
Biar nanti Code'nya nggak ilang ..

Lalu .. Copy Script di bawah ini .. :

//** Flying Pingbox
//** Edited by co2thunderboy™ zone
//** http://co2thunderboy.blogspot.com
//** Original Script http://www.dynamicdrive.com/

var ddsitelogo={
setting: {orientation:4, visibleduration:0, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec or 0, fadedurations=millisecs
offsets: {x:10, y:10},//offset of logo relative to window corner
logoHTML: 'TARUH_CODE_PINGBOX_DI_SINI', //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"

coord: {},

keepfixed:function(){
if (!this.cssfixedsupport){
var $window=jQuery(window)
var is1or3=/^[13]$/.test(this.setting.orientation)
var is1or2=/^[12]$/.test(this.setting.orientation)
var x=$window.scrollLeft() + (is1or3? this.offsets.x : $window.width()-this.$control.width()-this.offsets.x)
var y=$window.scrollTop() + (is1or2? this.offsets.y : $window.height()-this.$control.height()-this.offsets.y)
this.$control.css({left:x+'px', top:y+'px'})
}
},

showlogo:function(){
var mainobj=ddsitelogo
this.$control.animate({opacity:1}, this.setting.fadeduration[0])
if (this.setting.visibleduration>0){
setTimeout(function(){
mainobj.$control.stop().animate({opacity:0}, mainobj.setting.fadeduration[1], function(){
jQuery(window).unbind('scroll.fixed resize.fixed')
})
}, this.setting.visibleduration+this.setting.fadeduration[0])
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=ddsitelogo
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
if (mainobj.cssfixedsupport){
mainobj.coord[(/^[13]$/.test(mainobj.setting.orientation))? 'left' : 'right']=mainobj.offsets.x
mainobj.coord[(/^[12]$/.test(mainobj.setting.orientation))? 'top' : 'bottom']=mainobj.offsets.y
}
mainobj.$control=$('

'+mainobj.logoHTML+'

')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', opacity:0})
.css(mainobj.coord)
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.keepfixed()
mainobj.showlogo()
$(window).bind('scroll.fixed resize.fixed', function(){mainobj.keepfixed()})
})
}
}

ddsitelogo.init()

Kemudian ganti TARUH_CODE_PINGBOX_DI_SINI yang berwarna Biru .. dengan Code Pingbox milik temen - temen tadi ..
Dan akan keliatan kayak gini .. :

//** Edited by co2thunderboy™ zone
//** http://co2thunderboy.blogspot.com
//** Original Script http://www.dynamicdrive.com/

var ddsitelogo={
setting: {orientation:4, visibleduration:0, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec or 0, fadedurations=millisecs
offsets: {x:10, y:10},//offset of logo relative to window corner
logoHTML: '<object id="pingboxff7g1wpbyqw0" type="application/x-shockwave-flash" data="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" width="180" height="320"><param name="movie" value="http://wgweb.msg.yahoo.com/badge/Pingbox.swf" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="wid=xXxXxXxXxXxXxXxXxXxXxXxXxX" /></object>', //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"

coord: {},

keepfixed:function(){
if (!this.cssfixedsupport){
var $window=jQuery(window)
var is1or3=/^[13]$/.test(this.setting.orientation)
var is1or2=/^[12]$/.test(this.setting.orientation)
var x=$window.scrollLeft() + (is1or3? this.offsets.x : $window.width()-this.$control.width()-this.offsets.x)
var y=$window.scrollTop() + (is1or2? this.offsets.y : $window.height()-this.$control.height()-this.offsets.y)
this.$control.css({left:x+'px', top:y+'px'})
}
},

showlogo:function(){
var mainobj=ddsitelogo
this.$control.animate({opacity:1}, this.setting.fadeduration[0])
if (this.setting.visibleduration>0){
setTimeout(function(){
mainobj.$control.stop().animate({opacity:0}, mainobj.setting.fadeduration[1], function(){
jQuery(window).unbind('scroll.fixed resize.fixed')
})
}, this.setting.visibleduration+this.setting.fadeduration[0])
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=ddsitelogo
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
if (mainobj.cssfixedsupport){
mainobj.coord[(/^[13]$/.test(mainobj.setting.orientation))? 'left' : 'right']=mainobj.offsets.x
mainobj.coord[(/^[12]$/.test(mainobj.setting.orientation))? 'top' : 'bottom']=mainobj.offsets.y
}
mainobj.$control=$('

'+mainobj.logoHTML+'

')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', opacity:0})
.css(mainobj.coord)
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.keepfixed()
mainobj.showlogo()
$(window).bind('scroll.fixed resize.fixed', function(){mainobj.keepfixed()})
})
}
}

ddsitelogo.init()

Dan yang perlu di setting dalam JavaScript di atas yaitu .. :
orientation = Posisi Pingbox'nya .. 1 = Pojok Kiri Atas , 2 = Pojok Kanan Atas , 3 = Pojok Kiri Bawah , 4 = Pojok Kanan Bawah ..
visibleduration = Hitungan dalam Milidetik .. sebelum Content menghilang .. isikan aja 0 (Nol) .. biar keliatan terus ..

Setelah itu .. dalam Notepad .. simpen Code tadi sebagai PINGBOX.JS atau terserah temen - temen .. yang penting Extensi'nya *.JS ..
File →» Save As .. di File Name .. jangan lupa ketik'in .JS (titik JS).. setelah ngetik nama file .. dan di Save As Type pilih All Files ..

Kemudian Upload file *.JS tadi ke Webs .. buat yang belum pernah pake Webs .. liat aja posting sebelumnya buat cara Upload'nya .. di sini .. :

Cara Pasang Musik / Lagu / MP3 di Profil Facebook

Setelah di Upload .. Copy URL dari file PINGBOX.JS tadi ..

Lalu .. silahkan temen - LogIn ke Blogger'nya masing - masing .. dan masuk ke Setting Template ..
Dan di sini .. gw udah pindah ke Interface Blogger yang baru ..



Setelah itu .. klik Edit HTML ..



Klik Proceed jika ada Notifikasi ..



Copy Code di bawah ini .. :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='TARUH_URL_JS_DI_SINI' type='text/javascript'/>

Ganti aja TARUH_URL_JS_DI_SINI .. dengan URL file *.JS yang kita Upload tadi .. dan akan kayak gini .. :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://nama.webs.com/pingbox.js' type='text/javascript'/>

Jangan lupa .. centang Expand Widget Templates terlebih dahulu ..
Lalu Paste'kan Code yang udah di Edit tadi ke HTML Template temen - temen .. Paste setelah Code .. <meta content="nofollow" name="robots"/> ..
Dan kemudian klik Save Template ..



Selesei dah .. dan sekarang coba buka halaman Blogger temen - temen .. maka Pingbox'nya akan muncul di salah satu pojok .. sesuai dengan pengaturan yang udah kita buat tadi ..

Segitu aja dulu .. misal ada kesulitan .. langsung bilang aja lewat comment .. dan akan coba gw bantu kalau gw lagi Online ..
Sekedar info aja .. sumber Referensi dari posting kali ini .. gw dapet dari DynamicDrive .. Site Logo Watermark Script ..
Dan dari DynamicDrive sendiri .. sebenernnya bukan Pingbox yang di tampil'in .. tapi gambar Logo Situs yang kita inginkan ..
Tapi gw berfikiran laen .. dan coba - coba aja .. naruh Pingbox sebagai Content'nya .. ya gitu dah jadi'nya .. hhehe ..

Temen - temen juga bisa nyari Tips laen mempercantik Blog'nya masing - masing di DynamicDrive tersebut ..
Dan silahkan di utak atik sndiri aja Script'nya .. kalau temen - temen kurang puas sama Script asli'nya dan pengen berkreasi ..
Tapi nggak semua'nya bisa di pake buat Blogger .. dan tergantung juga sama Browser yang kita pake .. jadi silahkan di coba sendiri ..