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">
</div><a class="trigger" href="">ChatBox</a>
9.Langkah terakhir Simpan template
9 Responses to "Cara Membuat Chatbox Bergaya Jquery"
ne work atw g' gan ????
tentu saja bekerja, karena sudah pernah saya coba.
Sip mas, mungkin ane perlu pasang chat box nanti di blog... :x:
silahkan...
^_^
thanks gan...
kl pny id kaskus ane lemparin cendol deh :K:
@F4j@r_Only
saya ingin membuat ID kaskus, tapi tidak tahu caranya,
bisa beritahu saya??
wow, panjang banget, terima kasih banyak infonya.
ternyata panjang banget caranya yaa, biar lebih bagus itu. hehe
good job boss :r:
nice post gan.
kunjungi blog gue ya.
banyak software easytodownload
Post a Comment