Home » » Cara Membuat Tombol Slide Dengan Efek JQuery

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://lh3.googleusercontent.com/-D9jcONOXd-Y/Ti-2VLRfmII/AAAAAAAABYU/NaQTyuOAnpo/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://lh5.googleusercontent.com/-t8bcqIqAylk/Ti-2VtdLOAI/AAAAAAAABYg/VvElRnH_e4Y/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!


http://3.bp.blogspot.com/-Z3QV5N3ElLY/Tpl6bW93bCI/AAAAAAAAA0o/VsoNC6PAPVo/s1600/red-slide.png
http://3.bp.blogspot.com/-Vdr_FwmCvDE/Tpl6ir-YuYI/AAAAAAAAA0w/FBOVn4J-z4o/s1600/black-slide.png
http://2.bp.blogspot.com/-IiAHI03ulGY/Tpl6ykdCfzI/AAAAAAAAA04/KFz1y-iMfpU/s1600/pink-slide.png
http://4.bp.blogspot.com/-vMcuvQ1bhdE/Tpl7Aiww5LI/AAAAAAAAA1I/e9VR6p8TKWg/s1600/green-slide.png
http://3.bp.blogspot.com/-5vYW-3YhpsQ/Tpl7JUYxzuI/AAAAAAAAA1Q/4BZiNUmDHqo/s1600/blue-slide.png

http://3.bp.blogspot.com/-ealKlD-EY10/Tpl8OJd95KI/AAAAAAAAA1Y/NPEZxJ9om58/s1600/orange-slide.png
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 8 komentar

16 Oktober 2011 13.40

wah boleh juga tuh,ane mau coba dulu nih sob,thanks ya

Terimakasih Marinda Jaya atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery
16 Oktober 2011 14.54

nice posting gan

Terimakasih Manda atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery
16 Oktober 2011 15.32

keren juga tuh sob,, tapi bikin berat loading blog gak ya,, ? hhehhe

Terimakasih Rama88 atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery
16 Oktober 2011 17.21

terimakasih kawan sudah berbagi ilmu :)

Terimakasih Hariyanto atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery
16 Oktober 2011 17.28

oke juga sarannya..kl ga berat loadingnya mau coba ah...slmt sore..

Terimakasih Abdul Rohim S. atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery
16 Oktober 2011 18.22

boleh nih dicoba ...
makasih infonya ... !!

Terimakasih Error Shinobi atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery
16 Oktober 2011 21.39

selamat malam buat sahabat blogger yang sudah sudi berkunjung dan memberikan commentnya di Lora Malunk Blog, Kami bangga anda sudah menjadi bagian dari kami, dan semoga kedepannya nanti comment anda bisa memberi semangat baru untuk blogwalking. dan kami mengucapkan banyak terima kasih atas partisipasi anda semuanya. salam kompak selalu laju terus blogwalking buat Up Trafik.

16 Oktober 2011 23.28

Tamplate yang indah akan membuat kita2 betah untuk berlama singgah.!
Siiipp ..!

Terimakasih Prapatan Kertek atas Komentarnya di Cara Membuat Tombol Slide Dengan Efek JQuery

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger