Assalamualaikum wr wb,
Selamat malam dan salam blogger yang kami ucapkan, sepertinya untuk update kedepannya saya akan memfokuskan untuk membahas Tips Trick Blogger, dan ini salah satunya.
Dalam kesempatan kali ini saya akan membahas Membuat Floating Widget ChatBox sepertinya yang punya saya, bisa anda lihat di sidebar atau bisa lihat screenshot dibawah!
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 preview coba sobat klik widget bertuliskan sponsor sebelah kanan.
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%;">
Get this
<a href="http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html" target="_blank">
Widget
</a>
and
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
Desaign!
</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/AVvXsEj-qqbPJceNc6D6rL1bl9RB9bG7-m3yT2VTWjFmPsHREitY6n979kQwLSp8ghXt6e4ZRWepEXq11IbfKSSrnQFOxdKslaPUMbKNKWlLPNboD4v1GG8FjVPa25St3ogT-dLYKFu3yR1ohs8H/s1600/cbred.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>
.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
<a href="http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html" target="_blank">
Widget
</a>
and
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
Desaign!
</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/AVvXsEj-qqbPJceNc6D6rL1bl9RB9bG7-m3yT2VTWjFmPsHREitY6n979kQwLSp8ghXt6e4ZRWepEXq11IbfKSSrnQFOxdKslaPUMbKNKWlLPNboD4v1GG8FjVPa25St3ogT-dLYKFu3yR1ohs8H/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/AVvXsEiXuDUbEl4c30_1GJoVbMcX__k7bzryWJd2u00LPhsDn-PckcFOnZgc8FbtMp-Leibjo2Il7T1cK1UuGuxQ0-ooFaDXmlLVn6P9tDePRBTZiSGb9DWGAPrMr21_yUmhxr1BWYar0BpAz_jQ/s1600/cbblue-2.png
Warna border #0079a0
URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN5OKFbRbJfgGoJRsniRtfZtPxQ-yBCxjIj2EKgUYwNlqmVmG_NKrulxA6gsptCjiFQxHxzd6qIXljvDpMI-Ks26GWAavgojmVHuu6XK4JVCuAd6Oc_cfx5n1-oHN6RM9gRoSkvVA3NwGq/s1600/cbblue.png
Warna border #003e82
URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8sViuxm7mgpOTYjgBlr9rM2jJjYD5gtZd_3rfAdWKK9DD0vVFvMeIFXe5bg36szTXDanlsu2918y5r2cZI0ANRxQACTjntcIp1KoyIRKEqMCcG-rYu3_Rp82qBRL8e_zAL2UK-QUaTBl/s1600/cbgreen.png
Warna border #008232
URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWQRAeh_TCCP6Up7s4ShaLf5wxyI6wnj8P4m0RAeZROAj8KThK6HU_-R2oMdj_LliLEz8Hac5Dy4ulR7z24Bii_KGkdy46lnnc7jk9fE8fsmujLwUHaOq1WSwr2z5TdbPp_-cNxjHj-Bx/s1600/cbyellow.png
Warna border #aca500
URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qqbPJceNc6D6rL1bl9RB9bG7-m3yT2VTWjFmPsHREitY6n979kQwLSp8ghXt6e4ZRWepEXq11IbfKSSrnQFOxdKslaPUMbKNKWlLPNboD4v1GG8FjVPa25St3ogT-dLYKFu3yR1ohs8H/s1600/cbred.png
Warna border #790909
Komentar :
Posting Komentar
Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda, karena setitik kata komentar anda akan sangat berharga untuk kemajuan blog ini, Trims atas kerja samanya...