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

9 Responses to "Cara Membuat Chatbox Bergaya Jquery"

Disebud said...: ne work atw g' gan ????; October 04, 2011 Reply Comment
Khasan Nova P. said...: tentu saja bekerja, karena sudah pernah saya coba.; October 07, 2011 Reply Comment
usaha sukses said...: Sip mas, mungkin ane perlu pasang chat box nanti di blog... :x:; October 17, 2011 Reply Comment
Khasan Nova P. said...: silahkan...
^_^; October 19, 2011 Reply Comment
F4j@r_0nly said...: thanks gan...
kl pny id kaskus ane lemparin cendol deh :K:; November 11, 2011 Reply Comment
Khasan Nova P. said...: @F4j@r_Only
saya ingin membuat ID kaskus, tapi tidak tahu caranya,
bisa beritahu saya??; November 19, 2011 Reply Comment
ilmudes said...: wow, panjang banget, terima kasih banyak infonya.; March 05, 2012 Reply Comment
Indramayu Cyber Team said...: ternyata panjang banget caranya yaa, biar lebih bagus itu. hehe

good job boss :r:; April 01, 2012 Reply Comment
Anonymous said...: nice post gan.
kunjungi blog gue ya.
banyak software easytodownload; June 07, 2012 Reply Comment

Cara Membuat Chatbox Bergaya Jquery

9 Responses to "Cara Membuat Chatbox Bergaya Jquery"

Post a Comment