Kali ini kita akan sedikit mengotak-atik panel slide vertikal tersebut dan akan kita isi dengan Chatbox atau widged yg laen nya, sehingga akan lebih manarik tuk dilihat.
Contoh nya kLik gambar berikut ini:
Oke langsung aja,berikut tutorial nya:
UNTUK MEMBUATNYA IKUTI LANGKAH-LANGKAH DIBAWAH INI...
UNTUK MEMBUATNYA IKUTI LANGKAH-LANGKAH DIBAWAH INI...
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4. Selanjutnya cari kode: ]]></b:skin>
.panel {
font-family:Helvetica;
position: fixed;
top: 110px;
width: 330px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
background:#333333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;
}
a.trigger:hover{
background:#222222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat;
}
a.trigger,a.trigger:hover{
font-family:Helvetica;
position: fixed;
text-decoration: none;
top: 110px; left: 0;
font-size: 12px;
color:#fff;
padding: 5px 40px 5px 5px;
font-weight: 700;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat;
}
Ato masukan lagi kode di bawah ini di atas kode: </head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<div class="panel">Script ChatBox agan/ Bisa Diganti Dengan Tulisan Dan Widget Lain</div>
<a class="trigger" href="">ChatBox</a>
