Slide, Hide or Toggle Fitur with jQuery

Ingat tidak dengan blog sobat satu ini Way to Blogging. Selain theme template sudah berubah menjadi dominasi warna hijau, ternyata sobat Harish rajin membuat add a gadget yang bisa mengarah langsung ke blog kita ;)) Tinggal encet edit sana-sini celetuk Add To Blogger nyampe :D Contohnya kayak ngono agan Add Static Facebook Box with Smooth Jquery Hover Effect.
Mungkin ada beberapa lagi fitur tinggal pencet² disana jika sobat mau ngacak² kontennya :-" Trik Add statik facebook box sama Beben Koben si bloglang anu ganteng kalem tea dibuat jadi begini!

demo slide box
Kepengen! pasti yah sobat-sobat slide keren & gaya punya ituh :"> Berikut bumbu²nya

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

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
    $(".SlideBox").hover(function () {
        $(this).stop().animate({
            right: "0"
        });
    }, function () {
        $(this).stop().animate({
            right: "-250"
        });
    }, 500);
});
//]]>
</script>

<style type="text/css">
.SlideBox {
top: 20%;
right: -250px;
float: right;
cursor: pointer;
position: fixed;
display: block;
height: 270px;
width: 245px;
z-index: 99999;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhjCW4pZpbzj1iUMGUgSDpUj8g4-x48ucH2qzN6ZafrwNy7ssB7fZh6FauP9fUhansARYOCbSLVB8baaT0Exhf_aTSdm2OWQCvpqHvlLAyMnOysQEAak_8ijjyEPxSCYFYUw_IR_44UNl/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;
padding: 0 5px 0 45px;
}
.SlideBox div {
background-color: #555;
padding: 5px;
border: none;
position: relative;
display: block;
}
</style>

<div class="SlideBox"><div>

Your content add here!!!
Mau facebook like box, kepengen komentar ada disitu, pokokke perhatikan tinggi & lebar harus disesuaikan yah.

</div>
</div>

Keterangan kode dalam warna:

1. Kode warna merah
jQuery inti, jika sudah ada tidak usah dipasang lagi.
2. Kode warna biru
jQuery plugin letakan dibawah jQUery inti atau diatas tag </body>
3. Kode warna ijo pias
Code CSS letakin diatas tag </b:skin>
4. Kode warna kuning pias
Kode HTML yg bisa dimasukan dengan metode Add a Gadget ► HTML/Javascript :D
5. Save.

Height ama width tinggal diatur-atur sesuai kebutuhan sobat ;) Lanjut goyangna mang, yuk prung ah :x

Menanggapi masih fitur sobat harish, kali ini mengenai Add Animated Jquery Sliding Panel. Disana sobat kita menggunakan script jQuery lumayan gede
<script src="http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js" type="text/javascript"></script>
Mungkin karena feature tinggal pencet langsung nyampe kale biar praktis ;)) Dengan menggunakan jquery.slidePanel agan dapat membuat lebih dari satu slide panel ;) Disini Beben akan buat lebih simpel dengan hasil sama. Metode masukin ke template dan pengaturan ini-itunya sama dengan yg diatas tadi yah :)

demo jQuery slide panel

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $(".trigger").click(function () {
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});
//]]>
</script>

<style>
.panel {
left:0;
top:20px;
height:auto;
width:auto;
display:none;
position:fixed;
background:#000;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
padding:15px 15px 15px 95px;
}

a.trigger {
left:0;
top:50px;
color:#fff;
font-size:16px;
font-weight:700;
position:fixed;
display:block;
text-decoration:none;
padding:10px 35px 10px 10px;
font-family:verdana, helvetica, arial, sans-serif;
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;
}

a.active.trigger {
background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat;
}
</style>

<div class='panel'>

Your content add here!!!
Mau facebook like box, kepengen komentar ada disitu, pokokke perhatikan tinggi & lebar harus disesuaikan yah.

</div>
<a class='trigger' href=''>Chat</a>

Makanya baca ini biar jadi pintel kayak Koben :"> Kumpulan Trik jQuery Plugin. Pintel niru maksudnya mah sob =))
Happy blogging \m/