Dalam kesempatan kali ini kami akan membahas cara Membuat Floating Widget ChatBox. 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.
Caranya:
Copykan Script dibawah ke : Buka Layout - Page Element dan Klik add gadget - Lalu pilih HTML/JavaScript.
<!-- START -->
<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>
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 80%;">
<span style="color: red;"> Get this</span>
<a href="http://dinara-289.blogspot.com/2013/09/cara-memasang-widget-chat-box.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></span>
Masukan Script yang kamu inginkan disini! Misal: kode Shoutmix, Adsense, Sponsor.
</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/AVvXsEimc3qKXLpOy5YdHH-XPE8TO7pGfBR7CMUvuJmWOwIZ531TAZk4JZK7DGxRXQ5bbfo6c-Daksop3I0Avz6SK-PzsG98y6J0BZmMftkMRkn6z_Ulik95EY2upjo_KLMlEwCCOt2-2wg19a80/s1600/cbred.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>
Tambahan tombol saat membuka chatbox:
Berikut ini adalah icon hidden chatbox dan warna border yang serasi dan bisa anda gunakan dalam hidden chatbox anda ,
URL gambar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioTjlN5xfndKvjxkKjeWBN-gPCLbSL8CRglvMku0pvCrz3lHSMVHLkye0TJ2jZoJjv4P54BqpzD6UjKPY92fBhwIMRZaRPYswHKCodSVf9ASc978OielLsK_LBn_WotZhb3-S-x8KzgbEe/s1600/cbblue-2.png. Warna border #0079a0
URL Gambar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KaOoaRXwvLVxqPdSO8R4blzf-ozKkN9vvtWn25NxDDAiQRGutu4esSncJDk4I6f447iiIGKXDT68N2Bvke9QVgnwR-OYMJ5polHaY_X_3SQYP2MRmk_yqqN-TbcnZKqmOKnyfCMAZOAi/s1600/cbblue.png, Warna border #003e82
URL Gambar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpeQQgEnhIrGwMjn98_WORYhyphenhypheniUTEKLFtDkK9dkqRIicju-dz8H-XgqVVY0hDPp21B1PPVeoU5Hb-Q93dWeBGee9PzRlIScBgYxOxEGBDRBa5xqDzwNKtdA1NkfDJO3Tvde_kfGKVl2Pj/s1600/cbgreen.png , Warna border #008232
URL Gambar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhjkWh495TM6ixcFjJCcUez1eg4BKpo-mclxvdX5ek2WrEQhTsAVDlYgBF_wDW0kwaojFBFocQ2MjSKX5C15k_o1-T7LEaC5_8l23ryq8xuVUtEAorZzT8XzVZsHsygByL6jcyteb2lpGk/s1600/cbyellow.png, Warna border #aca500
URL Gambar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimc3qKXLpOy5YdHH-XPE8TO7pGfBR7CMUvuJmWOwIZ531TAZk4JZK7DGxRXQ5bbfo6c-Daksop3I0Avz6SK-PzsG98y6J0BZmMftkMRkn6z_Ulik95EY2upjo_KLMlEwCCOt2-2wg19a80/s1600/cbred.png, Warna border #790909
0 komentar:
Posting Komentar