Membuat "Download Size Button" (Tombol Download Disertai Ukuran dan Jenis File) Menggunakan jQuery Sliding show

Tutorial yang akan saya berikan kali ini, bisa dibilang terinspirasi dari banyak bermunculannya blog-blog baru yang mengusung tema "Download File Apapun secara Gratis". Dan klo anda nanya ke saya, tentang kenapa tema "Download File Apapun secara Gratis" lebih diminati oleh banyak orang ketimbang tema lainnya? Sejujurnya, saya sendiri juga kurang tau haha...

Tapi gini, klo disuruh ngasih asumsi ngawur sih, menurut saya, kemunculan blog-blog tersebut sesuai dengan "Hukum Ekonomi" yang kita pelajari semasa sekolah dulu, yaitu kebutuhan berbanding lurus dengan watak masyarakat Indonesia yang lebih menyukai segala hal yang berbau Gratisan Hahhaa... Bener kan? udah gak usah munafik, saya juga sering Download lagu Gratisan kok hahaha...

Nah, dan untuk men-support blog-blog bertema "Download File Apapun secara Gratis" itu, akhirnya isenk-isenk saya nyoba bikin Tombol Download yang sedikit agak bagusan ketimbang klo kita cuma make "Hyperlink" untuk ngasih Link Download ke file yang ingin kita berikan. Dan contoh penampakannya bisa anda lihat pada gambar paling atas, atau silahkan klik link demo dibawah ini untuk melihat demonya secara langsung :)

DEMO

Terus cara bikinnya? gampang kok, tenang aja hahahaha....

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html *khusus untuk pengguna Dashboard lama
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

/* BUTTON SLIDER */
.buttonWrap{width:170px; height:80px; display:block;}

.toggleButton{
display:block;
width:170px;
height:30px;
padding:10px 0 0 0;
text-size:24px;
font-family:arial, sans-serif;
font-weight:bold;
text-align:center;
color:#FFF;
text-decoration:none;
border-radius:7px; -moz-border-radius:7px;
cursor:pointer;
border:1px solid #05ABE0;
text-shadow:-1px -1px 0px #05ABE0;
background: #87E0FD;
background: -moz-linear-gradient(top, #87E0FD 0%, #53CBF1 40%, #05ABE0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87E0FD), color-stop(40%,#53CBF1), color-stop(100%,#05ABE0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87E0FD', endColorstr='#05ABE0',GradientType=0 );

}
.toggleButton:active{
background: #87e0fd;
background: -moz-linear-gradient(top, #05ABE0 0%, #53CBF1 40%, #87E0FD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05ABE0), color-stop(40%,#53CBF1), color-stop(100%,#87E0FD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ABE0', endColorstr='#87E0FD',GradientType=0 );
}

a.toggleSection{
display:none;
color:#333;
background:#EEE url(http://i785.photobucket.com/albums/yy131/djnand/icon-dl.png) no-repeat 5px center;
border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD;
border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px;
width:60px;
float:right;
padding:5px 5px 5px 40px;
margin:0 10px 0 0;
font-family:arial, verdana, sans-serif;
font-size:12px;
text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}

Kemudian silahkan cari kode berikut ini: </head> dan klo udah ketemu silahkan masukkan Javascript dibawah ini tepat diatasnya atau sebelum kode </head> tersebut:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('.buttonWrap').click(function() {
if ($('.toggleSection').is(":hidden")) {
$('.toggleSection').slideDown("slow");
} else {
$('.toggleSection').slideUp("slow");
}
return false;
});
});
</script>

Klo udah, silahkan Save template anda, tapi gak usah buru-buru ngeliat gimana hasilnya, karena yang kita masukkin tadi baru CSS dan Javascriptnya, dan berikut HTML yang bisa anda gunakan untuk pemanggilan fungsi CSS dan JS-nya :)

<div class="buttonWrap">
<div class="toggleButton">Download Now!</div>
<a href="#" class="toggleSection">
<span>Pdf</span>
38,88 MB
</a>
</div>

Terus ditaronya? klo untuk peletakkannya sih terserah anda masing-masing, mau ditaro dalem postingan boleh, mau taro di HTML template anda juga boleh :)

Keterangan: Silahkan ganti kata-kata yang saya berikan warna merah sesuka hati anda

Ganbatte :)