Membuat Widget Slide Panel Jquery Serbaguna Unknown24.7.11 0 komentar

Oke Tips Kali Ini Adalah Membuat Slide Panel Serbaguna yang bisa anda gunakan untuk Tempat Widget anda :D

Contohnya Bisa Diliat Pada Blog Ini, Itu ada Di Atas Kanan (Facebook FansPage) dan Atas Kiri ( Traffic Source)

Oke Langsung Aja , Monggo Sambil Di Coba :D

1. Pertama - tama Paste Kode Ini Sebelum </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

2. Tambahkan Juga Kode Dibawah Ini Sebelum </head>

<script src="http://goo.gl/ViBME" type="text/javascript"></script>

3. Nah Taruh Deh Kode Di Bawah Ini Sebelum </Body>
> Ganti Yang Berwarna Merah Sesuai Keinginan.
untuk disebelah kanan gunakan kode berikut :

<style type="text/css">
a.w2btrig1{position: absolute;background:#88BBD4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2VikN-k9lz3K8BoLSrLobRAh7o15EpEA0yAELSly0PcyBbUC1d2qkQ37d9JYuEpxm6Go-Dg2gP2w6ZqgxmTj0LCnwvb9zW5i2rJzqVk-R7A1V97LuXlWqVmsc6B6W1z9DRqveNbhWQGk4/s143/w2b_plus.png) 6% 50% no-repeat;text-decoration: none;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#FFFFFF;padding:4px 12px 6px 24px;font-weight: bold;z-index:99999;}
a.w2btrig1.right {right: 0;border-bottom-left-radius: 5px;border-top-left-radius: 5px;-moz-border-radius-bottomleft: 5px;-moz-border-radius-topleft: 5px;-webkit-border-bottom-left-radius: 5px;-webkit-border-top-left-radius: 5px;}
a.w2btrig1:hover {background-color:#5599BB;}
a.active.w2btrig1 {background:#666666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLREVdgPCsVA3Kr8x3v0EXO248K9naGBXBejwZbf6l8LYm5ab4dlcXEqkpQp8bSCZYV9ppeRX5QIG-wlmRL0gFf6y8Tq1_-B6HQdrdBpIbWlyb36Zz3YelfMoNuDggsck4OLod6nxxRmX/s143/w2b_minus.png) 6% 50% no-repeat;}
.w2bpane1 {color:#CCCCCC;position: absolute;display: none;background: #000000;width: 300px;height: auto;z-index:99997;}
.w2bpane1.right {right: 0;padding: 20px 100px 20px 30px;border-bottom-left-radius: 15px;border-top-left-radius: 15px;-moz-border-radius-bottomleft: 15px;-moz-border-radius-topleft: 15px;-webkit-border-bottom-left-radius: 15px;-webkit-border-top-left-radius: 15px;}
</style><script type="text/javascript">
$(document).ready(function(){$('#myw2bpane1').slidePanel({triggerName: '#myw2btrig1', triggerTopPos: '20px', panelTopPos: '10px',});});
</script>
<a href="#" id="myw2btrig1" class="w2btrig1 right">Nama Widget Anda</a>
<div id="myw2bpane1" class="w2bpane1 right">Masukkan Code Script/Text/HTML disini
</div>

Untuk Di Sebelah kiri gunakan kode berikut :

<style type="text/css">
a.w2btrig2{position: absolute;background:#88BBD4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2VikN-k9lz3K8BoLSrLobRAh7o15EpEA0yAELSly0PcyBbUC1d2qkQ37d9JYuEpxm6Go-Dg2gP2w6ZqgxmTj0LCnwvb9zW5i2rJzqVk-R7A1V97LuXlWqVmsc6B6W1z9DRqveNbhWQGk4/s143/w2b_plus.png) 6% 50% no-repeat;text-decoration: none;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#FFFFFF;padding:4px 12px 6px 24px;font-weight: bold;z-index:99999;}
a.w2btrig2.left {left: 0;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;}
a.w2btrig2:hover {background-color:#5599BB;}
a.active.w2btrig2 {background:#666666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLREVdgPCsVA3Kr8x3v0EXO248K9naGBXBejwZbf6l8LYm5ab4dlcXEqkpQp8bSCZYV9ppeRX5QIG-wlmRL0gFf6y8Tq1_-B6HQdrdBpIbWlyb36Zz3YelfMoNuDggsck4OLod6nxxRmX/s143/w2b_minus.png) 6% 50% no-repeat;}
.w2bpane2 {color:#CCCCCC;position: absolute;display: none;background: #000000;width: 300px;height: auto;z-index:99997;}
.w2bpane2.left {left: 0;padding: 20px 30px 20px 100px;border-top-right-radius: 15px;-moz-border-radius-topright: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-bottomright: 15px;-webkit-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;}
</style><script type="text/javascript">
$(document).ready(function(){$('#myw2bpane2').slidePanel({triggerName: '#myw2btrig2', triggerTopPos: '20px', panelTopPos: '10px',});});
</script>
<a href="#" id="myw2btrig2" class="w2btrig2 left">Nama Widget Anda</a>
<div id="myw2bpane2" class="w2bpane2 left">Masukkan Code Script/Text/HTML disini
</div>

Oke Deh :D
Selesai ...
Silahkan Di Coba :D