Cara Membuat Chatbox Bergaya Jquery


Cara Membuat Chatbox Bergaya Jquery. Kali ini kita akan sedikit mengotak-atik panel slide vertikal tersebut dan akan kita isi dengan Chatbox sehingga akan lebih manarik tuk dilihat. Untuk lebih lengkapnya langsung menuju Tkp aja ya.

Untuk membuatnya ikuti langkah-langkah dibawah ini.

1.Login ke Blogger
2.Masuk ke "Rancangan - Edit HTML"
3.Seperti biasa klik Download Template Lengkap biar aman
4.Jangan lupa centang Expand Template Widget
5.Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:



.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}

.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas


7.Masukan kode Javascript berikut dibawah script jQuery tadi:

<script type="text/javascript">

$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

8.Kemudian cari lagi kode berikut ini <body>
Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya

<div class="panel">



Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain


</div>
<a class="trigger" href="">ChatBox</a>
9.Langkah terakhir Simpan template
Dapatkan update artikel terbaru kami langsung ke email anda

9 Responses to "Cara Membuat Chatbox Bergaya Jquery"

Disebud said...

ne work atw g' gan ????

Khasan Nova P. said...

tentu saja bekerja, karena sudah pernah saya coba.

usaha sukses said...

Sip mas, mungkin ane perlu pasang chat box nanti di blog... :x:

Khasan Nova P. said...

silahkan...
^_^

F4j@r_0nly said...

thanks gan...
kl pny id kaskus ane lemparin cendol deh :K:

Khasan Nova P. said...

@F4j@r_Only
saya ingin membuat ID kaskus, tapi tidak tahu caranya,
bisa beritahu saya??

ilmudes said...

wow, panjang banget, terima kasih banyak infonya.

Indramayu Cyber Team said...

ternyata panjang banget caranya yaa, biar lebih bagus itu. hehe

good job boss :r:

Anonymous said...

nice post gan.
kunjungi blog gue ya.
banyak software easytodownload

Post a Comment

pasang iklan murah