Tips Trik Blog: Membuat Kotak Chat Slide Vertical dengan jQuery

Saturday, April 2, 2011

Tips Trik Blog: Membuat Kotak Chat Slide Vertical dengan jQuery

Saturday, April 02, 2011 Widget No comments

Welcome Reader.
Next trik saya akan membahas mengenai bagaimana cara Membuat Kotak Chat Slide Vertical dengan jQuery seperti yang saya gunakan di Tips Trik Blog ini.
Kotak Chat Slide Vertical dengan jQuery sangatlah unik, karena jika klik tombol Chat Boxnya ,maka akan muncul kotak chatnya.
Bagaimana cara buatnya, langsung aja ikutin tutorialnya.
pertama, masuk ke akun blogger sobat,
lalu, ke Menu Rancangan - Edit HTML - jangan lupa backup dulu template blog sobat,
clo udah centang Expand Template Widget.
next step, sobat cari tag berikut ]]></b:skin>
clo udah ketemu masukan kode berikut tepat diatas/ sebelum tag tadi.

.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}

clo udah, cari tag </head>, terus sobat masukin kode berikut ini diatasnya.

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>

Jika sobat telah memasang script Jquery ini sebelumnya sobat dapat meninggalkan langkah diatas.

lanjut lagi, masukin kode berikut dibawah script jQuery tadi:

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

kemudian cari tag <body>, terus masukin kode dibawah ini diatasnya.

<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

</div>
<a class="trigger" href="">ChatBox</a>

sobat bisa mengganti dengan kode apapun.
yang terakhir, simpan template blog sobat.