Hallo sobat blogger,kali ini saya ingin sharing bagai mana cara membuat chatbox atau Shoutmix hide show seperti yang saya punya diblog ini..
Contohnya bisa sobat blogger lihat disebelah kanan pada blog ini.
Floating Widget ini sudah sedikit dimodifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga misalkan : Iklan adsense, Gambar, ataupun
chat box.
Untuk cara pembuatannya sebagai berikut :
Copy/Paste Kode berikut Kedalam
HTML/JavaScript.
<
style type="text/
css">
.gb_fixed{
position:fixed;
top:60px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:0px solid gray;
background:transparent;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://www.bookonthenet.net/east/RKEres/Images/CloseButtonHot.bmp" /></a>
<span style="font-size: 80%;">
Get this Widget
<a href="http://www.arpegio-rizal.co.cc/2011/06/membuat-widget-hide-or-show.html" target="_blank">
</a></span></div>
MASUKKAN KODE SHOUTMIX ATAU KODE LAIN YANG INGIN DITAMPILKAN DISINI
</td></tr>
</tbody></table>
</div>
<script src="http://marewainfo.googlecode.com/files/ordinaryhack-floating.js">
</script>
<div class="gb_fixed" style="z-index: +5;">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrq8U5MqeIyIc3oeJGyJFHYHKwWwv-gVWm6T2DgUJH8hUoUt55m1gfpCzVhN-6h3MCUjyiuuAdFRghc9dTvT0N5kKjI7rgJCneqKs0X17pjMASghozdKakuM5uaKztM76XCVjqEcDP-KAP/s1600/cbred.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>
Perlu diperhatikan :
- Ganti tulisan yang berwarna orange dengan pilihan gambar sepeti berikut :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYtU4zdeP4fMxrtHS41tRSUCNeRIs7qrghQNz006Lf76Gk8Jjeikt6i5hXEfuTq0H0F7xuRhSDQcYxAT7EhA2h2hfWPpC3QxA4KcTnzm9AaSZx6helKv_JqA4LUXj4I6KZT2ATRZAN6CIj/s1600/cbblue-2.pnghttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvr0lzp2zW8qPhKjRm76GxntUSwWTTLJNbzvG8Os3UgxKDsugCgCQsxl8OmnzaTs2h524M9L2P7d8okNZcYYeetlTfh50RaK5vicsK5wU55UatAc3cqTBvKozrTOgmAZxUWrTLy4MkSxXD/s1600/cbblue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZIYRPLoTKjQQghdA5QTW55dyVeCunsRXGZD4FuTSdAFdRiI23XzAys_urdsXGTd1Yg1QIuP9RtWpviLwnQl6t1Yo65O7q9llBM_3LfSNPd1Xf1u7CNCD8KKuWZ3tjGQOpQccfnNMnJbs/s1600/cbgreen.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfjcRz4I5DQSZyI5ZnouEK3MyWI5DfvnfvpEE8KoOWPSe44iTLJAaRq-joEpkpzugdKC1-L3RTHlQRr0kAQuz74xbqq2JCimls7Y8aCcGDN9jxSSqLNynv-ceCl34XUEMTWdalDN5n7A2/s1600/cbyellow.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrq8U5MqeIyIc3oeJGyJFHYHKwWwv-gVWm6T2DgUJH8hUoUt55m1gfpCzVhN-6h3MCUjyiuuAdFRghc9dTvT0N5kKjI7rgJCneqKs0X17pjMASghozdKakuM5uaKztM76XCVjqEcDP-KAP/s1600/cbred.png
- top:60px; menunjukkan posisi widget dari atas halaman kita 60px. Dapat sobat ubah sesuai dengan keinginan sobat blogger.
Bagaimana sobat blogger?Semoga sobat blogger berhasil yaa membuatnya..
Jangan lupa llooh untuk koment dan follownya..
Oke..
0 komentar:
Posting Komentar