Memasang Yahoo Messenger Di Blog

Seperti yang sudah saya ketik pada postingan-postingan artikel saya sebelumnya, Semakin unik semakin terkenang...ya itulah konsep minded pemikiran jaman sekarang di tahun 2012. Widget kali ini pun menggunakan konsep yang unik, yaitu dengan menggabungkan 2 widget yahoo messenger menjadi satu, penasarankan #$@! dan saya yakin widget ini baru pertama kalinya ada di dunia blogging, ya itupun kalo artikel ini belom di copy-paste oleh blogger lain...

Widget ini saya olah dengan menggabungan widget Yahoo messenger online image notifier dengan widget yahoo pingbox... gimana baru liat kan yang giniian hehehe :) so stay tuned terus yach di MonozCore. Sebagai contoh dapat dilihat pada pojok kiri atas layar, disitu terdapat Yahoo messenger online image notifier yang akan memberikan notifikasi di blog apabila admin blog sedang online apa tidak yahoo messenger-nya, nahh.. apabila sedang online pengunjung blog ga perlu repot-repot harus memasang Y!M terlebih dahulu, cukup klik gambar tersebut dan akan muncul pingbox yahoo (yahoo messenger online).... wuih seru-kan infonya itulah kelebihan blog ini unik, menarik dan kreatif.... hehehe :):) promosi dikit...

Oke...sob buat yang tertarik monggo disimak infonya... oh ya... buah mangga buah kedondong jangan lupa kasih cendolnya donk....hehehehe :):)

Cara Pemasangan :

Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Dashboard Blog Versi Lawas :

Dashboard Blog Versi Baru :

Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

<script type="text/javascript">
$(document).ready(function(){
$(".gbbtn").click(function(){
$("#gbcontent").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
.gb {
position:fixed;
top:0px; left:0px;
z-index:+10;
}
#gbcontent {
height: auto;
width: auto;
display: none;
padding: 10px;
border: #000;
box-shadow:inset 0 0 1px #fff;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
border-top-right-radius:8px;
-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
background-color:#619bb9;
background-color:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background-color:-webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
}
.gbslide {
float:left;
margin: 0;
padding: 0;
background-color:#619bb9;
border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
}
.gbbtn {
text-align: center;
width: auto;
height: auto;
padding: 5px;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #CCC;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>

Copy-paste kode pada kotak pertama atau kode di bawah ini dan taruh di bawah <Body> atau <Body ....blablabla....> pada kode HTML template blog sobat.

<div class="gb">
<div id="gbcontent">

...Taruh Kode Pingbox YM disini...

</div>
<span class="gbslide"><a href="#" class="gbbtn"><img src='http://opi.yahoo.com/online?u=userAnda&m=g&t=2&l=us'/></a></span>
</div>