Pada Kesempatan kali ini saya akan mencoba memberikan tutorial cara 'Membuat Animasi Loading Page', hasil kreasi saya sendri (Pamerrrrr!!). pasti kita semua tahu maksud loading page itu sperti apa??, baiklah sya akan mencoba jelaskan sedikit mngenai 'loading page it sperti apa', yaa siapa tau ajj diantra klian msh ada yg blm mngerti mngenai tutorial ini.hehee...
dalam artian animasi akan selesai setelah loading page terbuka semua, jarak waktu loading page bisa kita ukur dengan adanya animasi ini, karena animasi ini menggunakan hitungan persen.
Coba anda refress pada postingan ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini.
*Note : Jika code ini tidak bisa di copy/paste , silahkan anda bisa download code disini
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Lalu Cari Kode ]]></b:skin> , Lalu letakkan Kode Berikut diatasnya.
#Danielsload {4. Selanjutnya Letakkan Kode Berikut diatas kode </head> .
position:fixed;
z-index:50;
top:0;left:0;
width:100%;
height:100%;
line-height:350px;
text-align:center;
font-size:400%;font-family:century gothic;
color:#FFF;text-shadow:0px 0px 2px #FF8519, 0px 0px 5px #FF8519, 0px 0px 8px #FF8519;text-decoration:blink;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCSt1SU1jUkibMbKZ2qFDTLiuTSKnKCH39pJ5FZlOP0Hea-S7dZvssJaNyNfERg6BNPAACGZDth8QOGwEc-qrHJ73WV7renDXd7DeSEpMbaKTmVGn7TUquxuI068TSipRBoiYuTnzxsL0/s200/bleach+2.png) no-repeat top right;background-size:20%;
}
.v1 # Daniels load {
display:none
}
# Daniels progress-bar {
position:absolute;
bottom:2%;left:0;background:#FF8519;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity:80;
width:0;
height:12px
}
#Danielsloader {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvM3VsSaMOhJeX7mlZfF1A8yb-euJ6cM7WwryFYo_0qBa4UJV45AgEUUyMHJfRHC1il7p9Xry0RHm3jGJfHv5a8Th_EQfWXy0PSUqAq1Sp0OtqwG9DgrTAdRs6nhj4yMzl7rxmLBAQZw/s1600/bleach+13.png) no-repeat left bottom;
height:90%;
display:block;
}
5.Lalu cari kode <body> , dan letakkan kode berikut tepat dibawahnya :<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="http://maincheat.googlecode.com/files/daniels_animation_loading.js" type="text/javascript"></script>
<div id='Danielsload'><div id='Danielsprogress-bar'></div>6. Privew dl, jika tdk terjadi kesalahan, baru Simpan template... ;)
<div id='Danielsloader'>Tunggu Bentar Ya ^_^ ...</div></div>
Selamat Mencoba!!
Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Posts by Daniels'
Hi`i'm Daniels ,from Indramayu, i love to blogging, Desing Blogger template, Web Developing and Designing. I like to learn and share technical hacking/security tips with you, I love my friends.
You might also like these article :
Attention Please!
Bantu kami memperbaiki blog ini. Hubungi saya jika Anda menemukan konten yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan pada kotak komentar atau pada guestbook kami. Kami akan berusaha menanggapi dan memperbaiki konten tersebut secepatnya. Terima Kasih.
Contact me if you find content that is damaged or unreadable. Please let us know by writing a message in the comments box or on our guestbook. We will try to respond to and improve the content as soon as possible. Thank You.
Have a question ? Contact on : https://www.facebook.com/Mangga.Racing
Tidak ada komentar:
Leave a response
Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :
» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi
Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".
Sebelumnya daniels minta maaf yg sebesar - besarnya jka komentar anda belum sempat di bales. ^^
Posting Komentar