Mas Uya

Halo semua,dipost kali ini saya akan share tutorial yang berjudul Cara Membuat Animasi Download.
Animasi download ini sebenarnya sudah saya pakai di blog saya sebelumnya,Dan akan saya bagikan kepada kalian pengunjung setia blog ini.

Nah dari pada banyak omong,Langsung ke tutorialnya saja yuk
Tutorial:
1.Login Ke Blog Kalian
2.Jika sudah,Masuk ke template-Edit HTML
3.Jika sudah,Copy CSS berikut tepat di bawah ]]></b:skin>

<style type='text/css'>
#navigation{margin:0;background:rgb(22, 83, 117);border:1px solid rgb(19, 118, 173);text-align:center;padding:2px;font-family:Broadway;font-size:16px;font-weight:bold;}
#navigation a{cursor:default;text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;background:rgba(80,80,80,0.4);text-decoration:none;color:#BCCFEF;display:inline-block;padding:2px 15px;position:absolute;right:10px;font:normal normal 14px/12px Verdana,Arial,Sans-Serif;border:1px solid gray;  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);box-shadow:inset 1px 1px 0 rgba(255,255,255,.2); -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;  -webkit-transition:all .40s ease-out;-moz-transition:all .40s ease-out;-ms-transition:all .40s ease-out;-o-transition:all .40s ease-out;transition:all .40s ease-out;}
#navigation a:hover{background-color:#DA4D4B; -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);}
.sledsanta{left:0;top:0;opacity:0;width:100%;height:100%;background:rgba(0,0,0,0.6);position:fixed;display:none;z-index:1111;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;transition:all .6s ease-in-out}
.sledsanta:target{opacity:1;display:block;animation: myfirst 3s;-moz-animation: myfirst 3s;-webkit-animation: myfirst 3s;-o-animation: myfirst 3s;}
@keyframes myfirst{ from{opacity:0;}to{opacity:1;}}
@-moz-keyframes myfirst{ from{opacity:0;}to{opacity:1;} }
@-webkit-keyframes myfirst{ from{opacity:0;}to{opacity:1;} }
.santa-mars{position:relative;top:20%;background:#222;padding-bottom:30px;margin:0 auto;width:500px;min-width:500px;border:1px solid #444;}
.START:hover{-moz-box-shadow:0px 2px 8px 0px black;-webkit-box-shadow:0px 2px 8px 0px black;box-shadow:0px 2px 8px 0px black;opacity:0.7;}
#open-menu2.active {background-color:rgb(22, 83, 117);padding:0px 5px;}
</style>

4.Jika sudah,Klik simpan/save
5.Belum selesai,Untuk menggunakannya silahkan gunakan HTML berikut

<center><a href='#santa-download'><img class='menu' src='URL Gambar Download' title='File Download'/></a></center> <div class='sledsanta' id='santa-download'><div class='santa-mars'><ul id='navigation'><a href='#x' id='link-x'>X</a>Nama File</ul><center>  <table cellpadding='10' cellspacing='10'><tbody>    <tr>      <td align='left' valign='top' width='200'>Nama File<br /><a class="tombol-download" href="URL Download Mu" target="_blank">Server 1 [ 20.95 KB ] on MediaFire</a>    </td>    <td>Hhihihi <br />Pumpung gratis coy..<br /><img class="menu" src="http://www.addemoticons.com/emoticon/animated/AddEmoticons04254.gif" title="hahhahaha" /></td>      </tr></tbody></table></center></div></div>

6.Selesai,Selamat Kalian Telah Berhasil Memasang Animasi Download

PERHATIAN:
1.Ganti URL Gambar Download,Dengan Gambar Download Kalian
2.Ganti Nama File,Dengan Nama File Download Kalian
3.Ganti URL Download Mu,Dengan URL Download Kalian
4.Saya Sarankan,Jika Ingin Menggunakan Animasi Download,Letakkan Di Bawah Post Kalian Dalam Mode HTML Bukan Compose

Demo Animasi Download