Cara Menciptakan Loading Download Palsu / Fake / Tiruan
Pernahkah sobat mengalami hal yang sangat menyebalkan dalam dunia 'download file'?
Seperti saat sobat hendak mendownload file,namun saat tiba waktunya biasanya sobat diberi pilihan antara pilihan download premium atau dengan regulaer atau free.Nah,jika sobat memilikih free,biasanya ada hitungan mundur dan file download pun tercipta.
Namun sangat disayangkan,saat link download tercipta justru kita meng'klik' sebuah iklan,bukan link download yang kita inginkan.Bagaimana mereka menciptakan fake loading download tersebut,sedang kita tahu itu bukanlah file flash (*.swf)?
Apakah hal ini bisa diterapkan di blogger?
Nah,inilah tema Pelajaran Blogmalam hari ini gan,bagaimana cara membuat loading download tiruan / palsu alias fake download loading efect
Lihat,screenshot berikut gan:
Lihat gambar lebih besar di SINI dan lihat contoh live-nya di SINI
Seperti gambar diatas efek yang akan kita dapatkan dan ini sangat bekerja baik di browser Mozilla Firefox.
Lalu apa yang akan terjadi setelah Fake Loading tersebut selesai tampil? lebih baik coba dulu trik yang satu ini sob,itung2 buat ngibulin para 'predator internet' :D (ga boleh ya hihi)
Langkah dan Cara Membuat Efek Loading Download Tiruan / Palsu
Pertama,sobat pergi ke dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates,lihat gambar:
(1)
(2)
(3)
Setelah itu cari kode ini (saran:gunakan Ctrl+F):
]]></b:skin>Setelah ketemu,letakkan barisan kode css berikut tepat diATASnya:
#progress {
background:-webkit-linear-gradient(top, #333, #666);
background:-moz-linear-gradient(top, #333, #666);
background:-ms-linear-gradient(top, #333, #666);
background:-o-linear-gradient(top, #333, #666);
background:linear-gradient(top, #333, #666);
width:60%;
height:20px;
-webkit-box-shadow:0px 3px 10px rgba(0,0,0,0.4);
-moz-box-shadow:0px 3px 10px rgba(0,0,0,0.4);
box-shadow:0px 3px 10px rgba(0,0,0,0.4);
margin:50px auto 0px;
position:relative;
overflow:hidden;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#progress:after {
content:"";
width:100%;
height:100%;
background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:-ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
background:linear-gradient(top, rgba(255,255,255,0.7) 0%, transparent 55%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.5) 100%);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
position:absolute;
top:0px;
left:0px;
}
#progress div {
display:block;
width:100%;
height:100%;
background:#8FB44C;
background:-webkit-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:-moz-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:-ms-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:-o-repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
background:repeating-linear-gradient(-45deg, #8FB44C 10px, #8FB44C 20px, #A0DE29 20px, #A0DE29 30px);
-moz-background-size:500%;
background-size:500%;
position:absolute;
top:0px;
left:0px;
-webkit-box-shadow:1px 0px 5px #000;
-moz-box-shadow:1px 0px 5px #000;
box-shadow:1px 0px 5px #000;
-webkit-animation:progressbar 50s linear;
-moz-animation:progressbar 50s linear;
-ms-animation:progressbar 50s linear;
-o-animation:progressbar 50s linear;
animation:progressbar 50s linear;
}
#olay1 {
width:100%;
height:100px;
text-align:center;
background:#000;
padding:50px 0px;
font:bold 20px 'Courier New',Monospace,Arial,Sans-Serif;
color:#fff;
text-shadow:0px 0px 3px #fff;
text-transform:uppercase;
position:fixed;
top:0px;
left:0px;
visibility:hidden;
-webkit-animation:complete 5s linear 51s;
-moz-animation:complete 5s linear 51s;
-ms-animation:complete 5s linear 51s;
-o-animation:complete 5s linear 51s;
animation:complete 5s linear 51s;
}
@-webkit-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}
@-webkit-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}
@-moz-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}
@-moz-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}
@-ms-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}
@-ms-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}
@-o-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}
@-o-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}
@keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}
@keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}Lalu simpan templates,setelah itu,buatlah posting / artikel baru seperti gambar berikut:
Lihat Gambar lebih Besar di SINI
Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'
Lihat Gambar lebih Besar di SINI
Kemudian letakkan script daftar isi berikut:
<center><div><input type="button" value="Lihat Gambar" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan Gambar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Gambar'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<div id='progress'><div></div></div>
<div id='olay1'>Gambare embuh ilang neng endi mas! wis aku goleki gak ono je!.</div>
</div>
</div></center>Lalu publikasikan posting dan lihat hasilnya :D
Lihat Gambar lebih Besar di SINI
sumber:
coding.smashingmagazine.com
