Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.

Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :

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 ]]></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.
   
   view plainprint?

   1. <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  
   Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas
7. Masukan kode Javascript berikut dibawah script jQuery tadi:
   
   view plainprint?

   1. <script  type="text/javascript">  
   2. $(document).ready(function(){  
   3. $(".trigger").click(function(){  
   4. $(".panel").toggle("fast");  
   5. $(this).toggleClass("active");  
   6. return false;  
   7. });  
   8. });  
   9. </script>  
8. Kemudian cari lagi kode berikut ini <body>
9. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
   

   <div class="panel">
   
   

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

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

10. Dan yang terakhir Save Template anda.

Anda bisa ganti tulisan warna kuning berkedip dengan kode shoutmix yang sudah anda buat sebelumnya. Untuk cara membuat shoutmix di blog sudah pernah saya jelaskan sebelumnya. Nah, sampai disini dulu tutorialnya ya, selamat berkreasi dan semoga bermanfaat.

Artikel Terkait: