Mumpung saya sempet posting di net, kali ini saya akan share tips mempercanting blog anda, yaitu memasang Chatbox ala jQuery vaertikal di blog, kira" tampilannya seperti gambar di samping kanan..
Gimana?  agan tertarik, 

Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap dan jelas...  yoi, kalo gitu langsung aja..
sbelumnya jgn lupa LIKE THIS YO ^_^









Tahap - tahap :


  1. Login ke Blogger dengan akun anda.
  2. Kemudian pilih Rancangan >> Edit HTML
  3. Seperti biasa klik Download Template Lengkap biar aman
  4. Jangan lupa centang Expand Template Widget
  5. Selanjutnya cari kode ]]>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]> 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'/>


7. Selanjutnya, 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>


9. Kemudian cari lagi kode berikut ini <body>
10. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
<div class="panel">



Taruh Code Script Cbox Anda Disini


</div><a class="trigger" href="">ChatBox</a>
11. Save Template anda, SELESAI



Sekian dari saya cara pasang Chatbox Slide Vartikal di blogspot, semoga artikel ini bermanfaat bagi sobat blogger semua!

Posting Komentar

Catatan:
1. Komentar Anomin telah kami buka, silahkan berkomentar yang sopan
2. Jika kurang mengerti dengan posting di atas silahkan ajukan pertanyaan
3. Kami usahakan membalas komentar anda secepat kilat!
4. Masalah "Link Rusak" bisa anda laporkan lewat komentar
5. Jika meninggalkan Link Aktif pada komentar terpaksa kami hapus

Salam Admin
Darma Jaya

 
Top