Home » Info Blogger » Membuat Chat Box Absolute Vertical Sliding Panel

Senin, 02 Mei 2011

Membuat Chat Box Absolute Vertical Sliding Panel

Assalamualaikum wr wb,
Hallo sobat blogger, seperti kalian tahu minggu" ini saya akan terus membahas tips trick tentang blogger maka dari itu saya berhenti dulu untuk membicarakan software atau semacamnya hehe. oke, kali ini saya akan membahas Membuat Chat Box Absolute Vertical Sliding Panel dengan sedikit perpaduan CSS dan javascipt. Ssebelum nya saya juga sudah memposting Membuat Floating Widget ChatBox seperti yang saya gunakan pada Chat Box blog ini, langsung saja simak bareng";


Nama Absolute karena Sliding tersebut hanya akan tetap diam dikiri atas dan tidak akan ikut berpindah jika anda melakukan scroll page blog anda.


Cara Membuat Chat Box Absolute Vertical Sliding Panel:
  1. Login ke Akun Blogger anda masing-masing 
  2. Klik Design atau Rancangan, kemudian pilih edit html 
  3. Centang Expand Widget Template (saya anjurkan download dahulu template anda) 
  4. Cari kode seperti ini </head>
  5. Lalu taruh Script Javascript dibawah ini tepat sebelum atau diatas </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>

Atau jika script tersebut tidak berfungsi disana, anda bisa meletakkannya sebelum atau diatas kode </body>


     6. Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut,
.panel {
position: absolute;
top: 50px;
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;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.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{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:transparent url(Bisa sobat isi gambar disini .png/.gif) 85% 55% no-repeat;
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.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:transparent
url(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.png) 85% 55% no-repeat;
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:transparent url(http://i785.photobucket.com/albums/yy131/djnand/minusbutton.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

     7. Jika sudah, anda bisa meletakkan HTML dibawah ini pada Add Widget di Elemen Laman atau anda bisa meletakkannya setelah kode <body> di edit HTML:
<div class="panel">
Letakan kode chat box atau bisa yang lain seperti sponsor ;D

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html target="_blank">
Widget
</a>
and
<a href=http://www.m-azka.com/2011/05/membuat-chat-box-absolute-vertical.html target="_blank">
Desaign!
</a>
</div>
<a class="trigger" href="">ChatBox</a>

     8. Save Template anda dan lihat hasilnya , ENJOY!


Lihat gambar berikut hasilnya akan seperti ini,


Membuat Chat Box Absolute Vertical Sliding Panel Reviewed by ADMIN on Senin, 02 Mei 2011 Rating: 4.5
Posted by Pukul 21.27
Labels:

3 comments:

  1. Anonim3 Mei 2011 pukul 09.19

    thanks gan, di coba dulu ya ;) semoga makin rame aja ni blog. postingannya berkualitas hehe

    BalasHapus
  2. ADMIN6 Mei 2011 pukul 23.24

    Terimakasih kembali bro, Amin ya allah :)

    BalasHapus
  3. Impotensia29 Juni 2011 pukul 21.55

    Thanks yuaaaaaaaa :D

    BalasHapus

Blog ini menganut sistem DOFOLLOW, dan Memakai moderasi komentar untuk mengantisipasi terjadinya "Spammer". Maka dari itu cobalah comment yang baik dan bermanfaat bagi blog ini dan Dapatkan backlink gratis dari blog ini..