Absolute Vertical Sliding Panel

Kali ini saya akan mengajak anda untuk membuat Absolute Vertical Sliding Panel. Apa itu Absolute Vertical Sliding panel? lihat gambar diatas dan perhatikan panel kecil bertuliskan Chatbox dikiri atas. Lalu apa maksud dari Absolute disini? saya beri nama Absolute karena Sliding tersebut hanya akan tetap diam dikiri atas dan tidak akan ikut berpindah jika anda melakukan scroll page blog anda.


Lihat DEMONYA

Lantas bagaimana cara membuatnya?  ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti ini </head>
5. Lalu taruh Script Javascript dibawah ini tepat diatas </head>:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

6. Lalu cari kode ]]></b:skin>, dan letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.panel{position:absolute; top:50px; left:0; display:none; background:#000; border:1px solid #111; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; width:330px; height:auto; padding:30px 30px 30px 130px; filter:alpha(opacity=85); opacity:.85}
.panel p{margin:0 0 15px 0; padding:0; color:#ccc}
.panel a, .panel a:visited{margin:0; padding:0; color:#9FC54E; text-decoration:none; border-bottom:1px solid #9FC54E}
.panel a:hover, .panel a:visited:hover{margin:0; padding:0; color:#fff; text-decoration:none; border-bottom:1px solid #fff}
a.trigger{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 15px; font-weight:700; background:#333 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.trigger:hover{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 20px; font-weight:700; background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.active.trigger{background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/minusbutton.png) 85% 55% no-repeat}
.columns{clear:both; width:330px; padding:0 0 20px 0; line-height:22px}
.colleft{float:left; width:130px; line-height:22px}
.colright{float:right; width:130px; line-height:22px}
ul{padding:0; margin:0; list-style-type:none}
ul li{padding:0; margin:0; list-style-type:none}

7. Jika sudah, anda bisa meletakkan HTML dibawah ini pada Add Widget di Elemen Laman atau anda bisa meletakkannya diatas kode </body> di edit HTML:

<div class="panel">

Letakkan Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

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

8. Save Template anda...