Cara Membuat Tombol Slide Dengan Efek JQuery

Tutorial kali ini saya akan memberikan suatu Trik Cara Membuat Tombol Slide Dengan Efek Jquery. trik ini sangat menarik sekali kalau kita terapkan kedalam blog, karena sedikit banyak akan memperindah penampilan blog anda.

mari kita simak trik kali ini, dan langkah pertama yang harus anda lakukan adalah :

Langkah 1
Arahkan tombol ke "Desain / Rancangan"
Langkah 2
lalu tekan "Edit HTML"
Langkah 3
Cari kode ]]></b:skin>
Langkah 4
Copy dan Pastekan kode dibawah ini tepat di atas kode ]]></b:skin>

#panel {
background: #D3D3D3;
height: 190px;
color:#000;
display: none;
margin-top:15px;
}
.slide-panel {
margin: 0;
padding: 0;
border-top: solid 0px #422410;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisZSXY54puYcuOYciAXi5mhNXzPlxnbr5oCR26Xxq881xvtvfYvkdmiosZK_QgprhARiiG_zILARMJvWMSRRvxIGP5ZzIQZR6b_4G9Z4qzRBZsqmZshYeIkvuH4Z35sFBG_rQCrPRo5XFl/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqLi3uk5awwIzJ2_R1bJBIdK5vNXqEydAFaeWIs3vs41L1758aXOm49HpWGoG91ihTFcGezryUqnaitKrf4lxFn8uSFF4pfvefTYbEe43xdNDBegOPNyQDr5HQrPLKeRs92zcNnLGjAYbP/s800/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 8px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}

Langkah 5
Berikutnya anda cari code </head>
Langkah 6
Copy Paste kode dibawah ini tepat di atasnya kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

Langkah 7
Sekarang tugas anda adalah memasukkan kode dibawah ini. Dengan kemauan anda di mana saja dalam template Anda, atau tambah widget dan dalam post editor. Sesuka anda

<div id="panel">

YOUR CONTENT HERE

</div>
<div class="slide-panel">
<a href="#" class="btn-slide">Slide Panel</a>
</div>

Langkah 8
Jangan lupa untuk mengganti tulisan YOUR CONTENT HERE dengan isi conten yang anda mau masukkan kedalam tombol slide dan terakhir Simpan template anda dan lihat hasilnya, SEMPURNA

Catatan: Anda dapat mengganti kode yang berwarna Orange dengan warna sesuka anda untuk mengubah latar belakang panel. Demikian pula, warna teks dengan memvariasikan kode yang berwarna Hijau. Untuk mengubah ketinggian panel, bervariasi kode yang berwarna Biru. Anda juga dapat mengubah warna dari tombol geser dengan memvariasikan URL dengan warna merah. Kami telah menyediakan enam tombol yang berbeda di bawah ini. Pilih satu dari slot yang menarik bagi Anda!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuQNGE-KQBL3WyXuA5d_rRomcwfSu43pIqvvDqGumIySii7BU-Hj1O4ZwNZUopsw_zNOw6U1Q_r0ZkXWhjgtEAa1Yt6LBHnQH_gjo5Mza85MMSyJNGYMD8eL-i70ywzLQUXxgVBsBaZwY/s1600/red-slide.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr0HsybOxCSm9EbZHezhHRzBvzB4Cs2r6-TXu_sI9IItV0inh2_vwpycn8YrT8UWJmoVSSpdIBJ676LLxio4grF8n4sCl5q8eVmzQRTcHyQLwZqKEOd_h-mDOPkhl0KBDUZhyBvjUZJw63/s1600/black-slide.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGBFpfVA0PXwiWBcdsztsWIxfx4KVePPM-hkZHaEPcGIl4UphR19dLGVxyBU68kA7HuIIT-EbFA8cxGnKRM_EJOAHSDANeR1Kthr7uiymBBuR4y9lc7lC7qRppRlKKzOtjDPkt5eGVlM-/s1600/pink-slide.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhggjBRM_g7HFqsFXjuWgkrhW3w0Nq7vuUS2ZyKXix73zJCitP95VrkOPL4Kt1s9YlOY41zChHb9vRaYdngA06NNdxafPo2urpZata6RRr-dJQXdim3atVv5sajemldmcDqLT0UJ0135xh/s1600/green-slide.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSCXSKNYGwe0zzLU9ZTwiu7qIvb_D6roCJzzUWo1_d18WJ2jJQBcdoX8QBI7Hs3cToGVBN6Z18Kyw9nJegNl084d-U9fM69zagtGYsFVsTjUg0yu1BjQ1c0IoFXpnV6uZzIH04aCTXQ9M/s1600/blue-slide.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWCyBbHVmnvUVaN9OcDFPavniQq_U3wQnByJMBci3m61WKgDh6o_UB95dpWMzhtxkzDtDxRAyvvWpeXbjMIFhLUNs5Z_NDOeOecUPNSp-yQCJPF0WIf9fkMI663ustDy3cuhtWG-Y9opR/s1600/orange-slide.png