Membuat Chatbox Slide Vertikal di Blog

Pada postingan kali ini saya akan membuat sesuatu  istimewa  yaitu membuat Chatbox Slide vertikal dengan jQuery. Chatbox sendiri bagi kebanyakan blogger newbie seperti saya atau sobat adalah hal yang penting, karena biasanya pengunjung sering meninggalkan jejaknya pada kotak chatbox yang kita sediakan, sehingga sobat bisa tahu siapa aja yang telah berkunjung ke blog sobat dan biasanya juga sih pengunjung itu malas memberikan komentar pada artikel kita dan lebih senang meninggalkan komentar di kotak chatbox atau yang sering kita kenal dengan buku tamu.

New Picture

Chatbox atau buku tamu ini berbeda dengan chatbox pada umumnya, kenapa saya katakan berbeda karena chatbox yang akan kita bahas ini dapat tersembunyi atau istilah kerennya sih  bisa show/hide gitu, hehehe. Pasti sobat dah penasarankan dengan chatbox yang satu ini? Kalo gitu kita langsung aja menuju ke TKP

1. Login ke blogger atau klik disini
2. Pilih Template >> edit Html >> Lanjutkan >> Centang Expand widget template.
3. Copy script di bawah ini dan letakkan di atas code ]]></b:skin> untuk memudahkan sobat mencari code tersebut tekan Ctrl+F atau tekan langsung F3.

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

4. Copy code jQuery di bawah ini dan letakkan di atas code </head>

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

5. Copy script di bawah ini dan letakkan di bawah code jQuery di atas.

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

6. Copy script di bawah ini dan letakkan di atas code <body>

<div class="panel">

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

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

7. And finally Simpan atau save template.

Mudahkan sobat…??? Selamat mencoba…. Good luck Thumbs up

2 komentar:

  1. ternyata chatboxnya maen ditemplate toh.. saya kira maennya di widget.. hehehe.. :P

    sekalian deh pengen tanya sob, :D ko chatbox diblog saya tidak bisa ya ? mungkin sobat punya solusinya ? ^^

    terima kasih ilmunya.. ^^

    BalasHapus
  2. wah lumayan ribet juga ya mas pasang chatboxnya.. hehehee

    tapi terima kasih atas ilmunya.. ^^

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top