» » Cara membuat chatbox buka tutup slideshow

Cara membuat chatbox buka tutup slideshow

Cara membuat chatbox buka tutup slideshow


Hai sobat blogger ! sudah lama gak jumpa ya? kaget? ya mungkin dikarenakan beberapa posting tentang game dan film yang ada di rizaldi priantama blog saya hapus, mungkin karena kurangnya dukungan dan dianggapnya duplicat content dan spam dari google, padahal, saya sudah berusaha semaksimal mungkin untuk membuat artikel tersebut. Apalagi ditambah dengan hilangnya sitelink milik rizaldi priantama baru-baru ini, duh, tambah stress kan sobat?namun disamping itu, saya ambil hikmahnya saja, rizaldi priantama akan berusaha tidak membuat duplicat content lagi, walaupun hanya satu.

Okelah , kok jadi curhat ya? kita kembali ke topik kita tentang cara membuat chatbox buka tutup slideshow , untuk demo dan contohnya bisa  dilihat sendiri di samping kanan blog rizaldi priantama ini. oke langsung saja kita bahas bersama tentang cara membuat chatbox buka tutup slideshow di blogger

1.) Baca Basmallah
2.) Sebelumnya, buat akun chatbox dulu, bisa menggunakan beberapa jasa chatbox gratisan seperti cbox, chatbox,atau jasa chatbox yang dikenal sobat
3.) Setelah itu daftar saja di salah satu jasa tersebut
4.) Ikuti saja perintah-perintahnya, setelah itu sobat akan mendapat kode Chatboxnya, contohnya kodenya seperti ini :
Contoh
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="350" height="305" src="http://www3.cbox.ws/box/?boxid=3393149&amp;boxtag=cyefcb&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3393149" style="border:#ababab 1px solid;" id="cboxmain3-3393149"></iframe></div>
<div><iframe frameborder="0" width="350" height="75" src="http://www3.cbox.ws/box/?boxid=3393149&amp;boxtag=cyefcb&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3393149" style="border:#ababab 1px solid;border-top:0px" id="cboxform3-3393149"></iframe></div>
</div>
<!-- END CBOX -->
5.) Setelah itu masuk ke akun Blogger anda
6.) Masuk ke Dashboard > Tata Letak > Tambah Gadget > Html/Javascript
6.) Masukkan kode ini di tempat konten kosong yang tersedia
Kode
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAkImel29m93mIbRw-aQcX4nyI__210GWt2ADN6FGBdZQSwKMmD-5wHXQbjs8HFPfa2TyRh9oOao9JgJe2vvHH0eWASgLSbptra6roAPkLUuKl5Fsvb57S2amXmHzH_9lrtL_qb-9c-Ad/s1600/cbblue-2.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

GANTI KODE INI DENGAN KODE CHATOBOX SOBAT !!!!

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
7.) Ganti tulisan ganti tulisan chatbox disini dengan kode chatbox yang didapatkan sobat tadi
8.) Setelah itu klik Simpan dan ihat hasilnya

Berikut beberapa url gambar varian url warna chatbox :



 





Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Contact Us

Nama

Email *

Pesan *

Back To Top