Cara membuat Chatbox di Blog Slide Style
Mungkin dari temen temen pengen tahu cara membuat tampilan slide pada chatbox!! Ok saya akan memberikan tutorial cara membuat slide Chatbox Versi Imcyber
Langkah yang pertama.
Langkah-Langkah:
1.Login Blogger » Layout
2.Klik Tambah Gadget
3.HTML/Javascript
4.Pastekan kode dibawah ini
ICT CHATBOX VERSION
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
#panel {
height: auto;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
background: url(http://i1115.photobucket.com/albums/k551/SuprayNewbie/buku-tamu_imcyber.png) no-repeat center top;
}
.btn-slide {
text-align: center;
width: 240px;
height: 40px;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">
<div style="background-color:#dedede; -moz-border-radius:15px; border:1px solid #dedede;padding:4px ">
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
#panel {
height: auto;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
background: url(http://i1115.photobucket.com/albums/k551/SuprayNewbie/buku-tamu_imcyber.png) no-repeat center top;
}
.btn-slide {
text-align: center;
width: 240px;
height: 40px;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">
<div style="background-color:#dedede; -moz-border-radius:15px; border:1px solid #dedede;padding:4px ">
KODE CHATBOX/SHOUTBOX PUNYA SOBAT
</div><Script Language='Javascript'>
document.write(unescape('%3C%63%65%6E%74%65%72%3E%3C%62%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%2F%32%30%31%31%2F%30%39%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%73%68%6F%77%68%69%64%65%2D%63%68%61%74%62%6F%78%2D%64%65%6E%67%61%6E%2E%68%74%6D%6C%27%20%74%69%74%6C%65%3D%27%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%20%42%79%20%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%27%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%62%3E%3C%2F%63%65%6E%74%65%72%3E'));
</Script>
</div>
<p class="slide"><a href="#" class="btn-slide"></a></p>
</div><Script Language='Javascript'>
document.write(unescape('%3C%63%65%6E%74%65%72%3E%3C%62%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%2F%32%30%31%31%2F%30%39%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%73%68%6F%77%68%69%64%65%2D%63%68%61%74%62%6F%78%2D%64%65%6E%67%61%6E%2E%68%74%6D%6C%27%20%74%69%74%6C%65%3D%27%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%20%42%79%20%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%27%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%62%3E%3C%2F%63%65%6E%74%65%72%3E'));
</Script>
</div>
<p class="slide"><a href="#" class="btn-slide"></a></p>
ORIGINAL CHATBOX VERSION
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style>
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAmh-wkgmDYwimT-AJqsEQFcs03ScBMw7gq9klTJMVe1KbXW47J_cwGvwG5kdA_zehtOd1pcVX4FipuCN4jOU16p6eyh17n44BlXjFGl3WTpRUAiekXogjY4Bu8dbc9v2lt3LR3rElEM/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBuECmU6EYyHAXtcvWuYppgjZQaJqBQj8bxQfVIGkIJRFV9K4VrZ715bm3ALEskYrpGaRrxotU8aXWHbJHx8M1Q9rCjcxm860rjJkaEVAQi1f18gG_R7HZJ4ktHhLcHC2l36gZaGMxAM/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAmh-wkgmDYwimT-AJqsEQFcs03ScBMw7gq9klTJMVe1KbXW47J_cwGvwG5kdA_zehtOd1pcVX4FipuCN4jOU16p6eyh17n44BlXjFGl3WTpRUAiekXogjY4Bu8dbc9v2lt3LR3rElEM/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBuECmU6EYyHAXtcvWuYppgjZQaJqBQj8bxQfVIGkIJRFV9K4VrZ715bm3ALEskYrpGaRrxotU8aXWHbJHx8M1Q9rCjcxm860rjJkaEVAQi1f18gG_R7HZJ4ktHhLcHC2l36gZaGMxAM/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">
KODE CHATBOX/SHOUTBOX PUNYA SOBAT
</div><Script Language='Javascript'>
document.write(unescape('%3C%63%65%6E%74%65%72%3E%3C%62%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%2F%32%30%31%31%2F%30%39%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%73%68%6F%77%68%69%64%65%2D%63%68%61%74%62%6F%78%2D%64%65%6E%67%61%6E%2E%68%74%6D%6C%27%20%74%69%74%6C%65%3D%27%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%20%42%79%20%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%27%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%62%3E%3C%2F%63%65%6E%74%65%72%3E'));
</Script>
<p class="slide"><a href="#" class="btn-slide">Chatbox</a></p>
</div><Script Language='Javascript'>
document.write(unescape('%3C%63%65%6E%74%65%72%3E%3C%62%3E%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%2F%32%30%31%31%2F%30%39%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%73%68%6F%77%68%69%64%65%2D%63%68%61%74%62%6F%78%2D%64%65%6E%67%61%6E%2E%68%74%6D%6C%27%20%74%69%74%6C%65%3D%27%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%20%42%79%20%77%77%77%2E%62%69%74%2D%78%70%2E%63%6F%6D%27%3E%47%65%74%20%54%68%69%73%20%57%69%64%67%65%74%3C%2F%61%3E%3C%2F%62%3E%3C%2F%63%65%6E%74%65%72%3E'));
</Script>
<p class="slide"><a href="#" class="btn-slide">Chatbox</a></p>
5.Klik Simpan dan liatlah hasilnya
tolong dong punyaku ..
BalasHapusemang kenapa punyamu?
BalasHapusgatau caranya
BalasHapusbaca dulu sobat, biar jelas..
BalasHapus