Cara Membuat Loading Progress Fake/Palsu dengan mudah [Fake Downloading Progress]

Satria Perwira    12/04/2012    Trixs Blogging   

Cara Membuat Loading Progress Fake/Palsu dengan mudah [Fake Downloading Progress]

Rafi Orilya,-Mungkin sobat Rafi Orilya Groups pernah melihat/bahkan mengunjungi blog yang memiliki Loading Porgress untuk agar lebih cepat menambah Friend Facebook, Credit facebook atau yang lain. Yaa memang itu hanya trik-trik admin agar blognya banyak visitornya untuk merauk untuk dari iklan yang dipasang. MUDAH BUKAN MENCARI UANG, hehe...

Yaapp, dengan demikian kali ini kita akan memperlajarinya bagaimana mereka membuat progress yang palsu itu, disini kita akan bersama-sama belajar oke..

DEMO => KLIK DISINI

Yang paling pertama dibutuhkan adalah CSS dan javascript pemanggil, baik sekarang ikuti langkah dibawah yah sobat ROG :

1. Login blogger
2. Masuk ke Template => Edit HTML => Centang Expand Template Widget
3. Kemudian cari code ]]></b:skin> , tekan F5 aja biar cepet nyarinya...
4. Kalau sudah ketemu, copy CSS dibawah ini :

#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;} }

5. Pastekan diatas kode ]]></b:skin>, Save template
6. Sekarang untuk menguji apakah CSS itu bekerja, coba buat ENTRI/POST baru
7. Nah pada post pilih yang Edit HTML bukan yang Compose
8. Oke, selanjutnya copy javascript pemanggil dibawah :

<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'>Haduuuuh... maape bae mas, kulo mboten ngertos menika, hahaha....</div>
</div>
</div></center>

9. Save/Publikasikan
Sekarang lihat... hehehe.... :D
Semoga bermanfaat yaah, tetap semangat.. sob
Jangan lupa tempelin komentarnya yaah, saya tunggu loooh.. oke

Artikel Dilindungi
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin