Monday, July 16, 2012

Membuat Fake Loading Download Blogger / Script Efek Loading

By Sriudin sahrudin   Posted at  7:14 AM   Download No comments

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:

cara membuat tombol efek loading download button.
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:

membuat efek tiruan loading.
(1)


fake loading script.
(2)


memasang download efek menunggu tiruan.
(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:
cara membuat efek tombol download loading
Lihat Gambar lebih Besar di SINI


Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'

load button fake script effect.
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
script loading download
Lihat Gambar lebih Besar di SINI

sumber:coding.smashingmagazine.com

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 komentar:

Back to top ↑
Connect with Us

What they says

© 2013 BLOG SI PALUI. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.