blogging cara membuat blog

Membuat Floating Chatbox Hide and Show !

17:42 Ardiya

Mau tahu cara membuat widget Chatbox seperti punya saya inilah caranya : Caranya:
Copykan Script dibawah ke : Buka Layout - Page Element dan Klik add gadget - Lalu pilih 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%;">
<span class="Apple-style-span" style="color: white;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Widget</span>
</a>
<span class="Apple-style-span" style="color: white;"> and</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;"> Desaign!</span></a></span></div>

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/AVvXsEj8B0wONUTxSv7Ra-K3oFS_Q1t06w9FiaULH6SWUV7VC85Kff3_2lojsBIMT56irU-cRAiYQ2naqdkcQXagOPB3XznrjialoE8gk7MS8zTmxVZiTW4o5Zt2O_ArndKZk5xwoqrFaa9EiQPl/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 Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_G0qHX_wRCZfsP8C04gipH6fHtVKTvL0FJEe61KMhQ-GDM_7oe1I4hsUoONkMqpg33cQoZEvNppe2bDithUBM_fciRs_D678rkYdKpwklh6ouBRVNWfVJCg7wZqv7Ok97d0NiKocLVeg/s1600/cbblue-2.png
Warna border #0079a0


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQ0yWRR2TZ9LkOGCB45-i0-6soDQ3IHrf-l1ust_q44uMOnvgbV-r5pLWR7IDQKGK8h3KKz_2pWFl_x_HFnDYwQ16qazSCO1-bpvQwPIe4F9QLFt5VjAgDUzNxVbJ1HzPForzQyaB8bZt/s1600/cbblue.png
Warna border #003e82


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvP7vg_vR2hpRf7JxSyDD-U7MCHZ4huhBN-2tHeSknAxATxQw8ndHbMr2EBoUOkpcdzhoVd_H2rHM9qNOoj5a54po4C5vSIJsXrZrVJy3HiTABnt0FW0Xoe9-KiH_Jxe-LLEBh8Bd3FCqD/s1600/cbgreen.png
Warna border #008232






URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RExTo8IifVsNeq9EGu00CSHksVzZPs-mfXdOKN1jmCIgZpZGE8YZmrPgtJi9dH3-0R7sdl8b2KOw9g_lpcsEFrd3HtoiU8PBTSOIWNbRPHhnPntewMikYXg2IdNoL8ILm_rgYl4cwPkF/s1600/cbyellow.png
Warna border #aca500


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8B0wONUTxSv7Ra-K3oFS_Q1t06w9FiaULH6SWUV7VC85Kff3_2lojsBIMT56irU-cRAiYQ2naqdkcQXagOPB3XznrjialoE8gk7MS8zTmxVZiTW4o5Zt2O_ArndKZk5xwoqrFaa9EiQPl/s1600/cbred.png
Warna border #790909


Sumber:http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html
Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...

You Might Also Like

0 comments

boleh komen ,asal pakai hati ya...dan blog ini sudah dofollow

note:blog ini tidak membatasi orang yang berkomentar dengan nama Anonymous, seperti blog yang lain,jadi silahkan berkomentar sesuka hati ..!

Popular Posts

Contact Form