Chatbox Bergaya Panel Slide Vertikal dengan jQuery

Text Resizer: Click for Resizer

Menyambung tutorialku sebelumnya tentang membuat Info Panel Slide Vertikal dengan jQuery. Kali ini kita akan sedikit mengotak-atik panel slide vertikal tersebut dan akan kita isi dengan Chatbox sehingga akan lebih manarik tuk dilihat. Untuk lebih lengkapnya langsung menuju Tkp aja ya.

Untuk membuatnya ikuti langkah-langkah dibawah ini.

1.Login ke Blogger
2.Masuk ke "Rancangan - Edit HTML"
3.Seperti biasa klik Download Template Lengkap biar aman
4.Jangan lupa centang Expand Template Widget
5.Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

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

6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

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

Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas

7.Masukan kode Javascript berikut dibawah script jQuery tadi:

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

8.Kemudian cari lagi kode berikut ini <body>
Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya

<div class="panel">

Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

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

9.Langkah terakhir Simpan template

Semoga tutorial kali ini bermanfaat....

Artikel Terkait:

jQuery

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Chatbox Bergaya Panel Slide Vertikal dengan jQuery
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

11 komentar:

Eric Juanto mengatakan... Reply Comment 3 Februari 2011 pukul 02.11: Keren..
kapan2 bru di coba gan...
sibuk soal.a....
Arga Anggriawan mengatakan... Reply Comment 3 Februari 2011 pukul 06.46: @Eric Juanto

ok sob silahkan dicoba....:x:
ade londok mengatakan... Reply Comment 3 Februari 2011 pukul 07.37: ok,.... /terima kasih,... sob,...
semoga aku makin bertambah,..
pengetahuannya,.....
Arga Anggriawan mengatakan... Reply Comment 2 Maret 2011 pukul 04.44: @print59

Sama-sama sobat :q:
Bambang S. mengatakan... Reply Comment 12 Maret 2011 pukul 07.12: Gan logo twitter terbang2 gimana bikinnya tuh???
Arga Anggriawan mengatakan... Reply Comment 12 Maret 2011 pukul 23.23: @bambang

silahkan baca : http://nobinoku.blogspot.com/2011/02/memasang-icon-twitter-burung-terbang-di.html

semoga membantu sobat :n:
Anonim mengatakan... Reply Comment 7 April 2011 pukul 20.25: Yuda :
7.Masukan kode Javascript berikut dibawah script jQuery tadi:

isinya ada yang salah gan...bisa di cek gk ?
Irfan mengatakan... Reply Comment 18 Juli 2011 pukul 04.57: THX GAN !
MANTABBB
vindihiga mengatakan... Reply Comment 22 Juli 2011 pukul 07.18: gak bisa nih...tulisannya "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "back" must end with the ';' delimiter." :g: :l:
I Wayan Suarma mengatakan... Reply Comment 27 Juli 2011 pukul 07.21: ko ga mau ya? saya nyoba di blog saya, tulisan ChatBoxnya mau menggantung, tapi ketika di klik ga ada keluar apa2..
Uang internet sebenarnya mengatakan... Reply Comment 6 April 2012 pukul 17.36: Kerja Sambilan dengan Clixsense
Banyak sahabat-sahabat bertanya kepada saya, macam mana nk cari uang dari internet dengan cara yang paling mudah, kalau bisa nak yang free .. masakan free aje.Secara pribadi, saya menyarankan sahabat-sahabat sekalian mencoba program-program PPC (Pay To Click) sebagai asas.Program ini sangat sesuai untuk mereka yang baru nak berjinak-jinak dalam mencari penghasilan sampingan melalui internet, lebih sesuai lagi untuk mereka yang hobinya berinternet setiap hari.Sambil mengakses internet dan menghasilkan pendapatan adalah lebih baik dari hanya mengakses internet tanpa mendapat apa-apa. Orang putih kata "something is better than nothing".

Bayangkan jika setiap hari Anda mengakses internet tetapi Anda tidak menggunakan kesempatan yang ada untuk menghasilkan pendapatan, alangkah ruginya anda.Jika Anda memiliki banyak teman dalam situs sosial seperti facebook, friendster, twitter dan sebagainya, ia memberi keuntungan dari segi pemasaran untuk Anda .
Gunakan kesempatan yang ada semaksimal munkin untuk Anda menghasilkan pendapatan, nampak macam materialistis tetapi kadang-kadang kita perlu bersikap opportunist.Tak salah kita berusaha sebaik munkin untuk mencari pendapatan kan? Uang bukan segala-galanya tetapi segala-galanya membutuhkan wang.Ini adalah realitas pada masa kini. Register gratis disini http://www.clixsense.com/?4107147