Upcoming
Berbagi Itu Indah .

Tips Trik Blog: Membuat Kotak Chat Slide Vertical dengan jQuer

Label:



 cara Membuat Kotak Chat Slide Vertical dengan jQuery 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.
|

Tidak ada komentar:

Posting Komentar

Sponsors : Best Themes | New WP Themes | Best Blogger Themes
Copyright © 2013. Android Jelly Bean - All Rights Reserved
Template Design by Shihara | Published by New Blog Themes
Powered by Blogger
Blogger Widgets