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,
sbelumnya jgn lupa LIKE THIS YO ^_^
Tahap - tahap :
- Login ke Blogger dengan akun anda.
- Kemudian pilih Rancangan >> Edit HTML
- Seperti biasa klik Download Template Lengkap biar aman
- Jangan lupa centang Expand Template Widget
- 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.
7. Selanjutnya, Masukan kode Javascript berikut dibawah script jQuery tadi:
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
<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