 |
| Memuat Blog dengan Efek Cahaya |
Pada tutorial blogger ini, Aurealisa akan membagikan sedikit tips membuatnya, entah gw ngga tau namanya apa, mungkin efek loading seperti youtube atau apalah itu. kalo anda teliti ketika membuka halaman Youtube, maka anda akan melihat sebuah efek progress loading paling atas situs berwarna merah dari kiri ke kanan.
Untuk Membuat blog seperti efek cahaya atau progress seperti youtube, silahkan simak tutorialnya dibawah ini.
btw gw ngga lagi membuat long judul biar seo ya, emng kek gini gw ngga tau xD
1. Buka blogger terus pergi ke Edit HTML / TEMA
2. kemudian pastekan css dibawah ini.
#ensikologyProgress {position: fixed;z-index: 2147483647;top: 0;left: -6px;width: 0%;height: 2px;background: #b91f1f;-moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 1px;-moz-transition: width 500ms ease-out,opacity 400ms linear;-ms-transition: width 500ms ease-out,opacity 400ms linear;-o-transition: width 500ms ease-out,opacity 400ms linear;-webkit-transition: width 500ms ease-out,opacity 400ms linear;transition: width 500ms ease-out,opacity 400ms linear}
#ensikologyProgress.done {opacity: 0}
#ensikologyProgress dd,#ensikologyProgress dt {position: absolute;top: 0;height: 2px;-moz-box-shadow: #b91f1f 1px 0 6px 1px;-ms-box-shadow: #b91f1f 1px 0 6px 1px;-webkit-box-shadow: #b91f1f 1px 0 6px 1px;box-shadow: #b91f1f 1px 0 6px 1px;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%}
#ensikologyProgress dd {opacity: 1;width: 20px;right: 0;clip: rect(-6px,22px,14px,10px)}
#ensikologyProgress dt {opacity: 1;width: 180px;right: -80px;clip: rect(-6px,90px,14px,-6px)}
@-moz-keyframes ensikologyLD {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-ms-keyframes ensikologyLD {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
@-o-keyframes ensikologyLD {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes ensikologyLD {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
@keyframes ensikologyLD {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#ensikologyProgress.waiting dd,#ensikologyProgress.waiting dt {-moz-animation: ensikologyLD 2s ease-out 0s infinite;-ms-animation: ensikologyLD 2s ease-out 0s infinite;-o-animation: ensikologyLD 2s ease-out 0s infinite;-webkit-animation: ensikologyLD 2s ease-out 0s infinite;animation: ensikologyLD 2s ease-out 0s infinite}3. kemudian letakan kode dibawah diatas </body> atau dibawah <body>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('r a=["\\n\\e\\f\\n\\d\\e\\j\\l","\\e\\f\\x\\h\\c","\\t\\i\\c\\j\\z","\\u","\\v\\b\\b","\\w\\d\\h\\b\\i\\C\\f\\q\\f\\s\\l\\B\\e\\f\\s\\e\\d\\b\\b","\\c\\f\\h\\d","\\g\\c\\c\\A\\q\\g\\b\\b","\\g\\h\\i\\y\\g\\j\\d","\\e\\d\\g\\c\\l"];$(D)[a[9]](k(){$({o:0})[a[8]]({o:p},{K:J,G:k(){r m=H[a[1]](E[a[0]]);$(a[5])[a[4]](a[2],m+a[3]);F(m==p){$(a[5])[a[7]](a[6])}},I:k(){}})})',47,47,'||||||||||_0xc30b|x73|x64|x65|x72|x6F|x61|x6E|x69|x74|function|x79|_0x726bx1|x70|property|105|x6C|var|x67|x77|x25|x63|x23|x75|x6D|x68|x43|x50|x6B|document|this|if|step|Math|complete|4000|duration'.split('|'),0,{}))4. Langkah terakhir masukan dibawah <body>
<div id="ensikologyProgress" class="waiting">
<dt></dt>
<dd></dd>
</div>5. Simpan dan lihat hasilnya, untuk demo bisa dilihat di blog Aurealisa ini ya :p
Demikian artikel yang bisa saya buat untuk cara membuat Efek Cahaya Loading Blog, mudah kan caranya. Jangan lupa tinggalkan komentar jika anda berhasil.
Add your comment Hide comment