Iklan 300 x 250

Random Post

Recent Post

 

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:

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

11 komentar:

Keren..
kapan2 bru di coba gan...
sibuk soal.a....

@Eric Juanto

ok sob silahkan dicoba....:x:

print59 mengatakan... Reply Comment

ok,.... /terima kasih,... sob,...
semoga aku makin bertambah,..
pengetahuannya,.....

@print59

Sama-sama sobat :q:

Bambang S. mengatakan... Reply Comment

Gan logo twitter terbang2 gimana bikinnya tuh???

@bambang

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

semoga membantu sobat :n:

Anonim mengatakan... Reply Comment

Yuda :
7.Masukan kode Javascript berikut dibawah script jQuery tadi:

isinya ada yang salah gan...bisa di cek gk ?

Irfan mengatakan... Reply Comment

THX GAN !
MANTABBB

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:

Suarma mengatakan... Reply Comment

ko ga mau ya? saya nyoba di blog saya, tulisan ChatBoxnya mau menggantung, tapi ketika di klik ga ada keluar apa2..

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

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Poskan Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky