Tampilan Loading Untuk Blog

info-gamepc.blogspot.com - Tutorial ini menunjukkan, bagaimana kamu dapat menambahkan tampilan loading ke blog kamu, banyak dari kamu mungkin telah melihatnya dan bagi mereka yang belum mungkin menjadi artikel yang sangat menarik.

Tampilan ini adalah loading yang muncul sebelum seluruh blog kamu terbuka semuanya di browser, Setelah blog kamu dimuat, perlahan-lahan loading ini akan menghilang, saya sarankan kamu menambahkan efek ini karena bisa membuat blog menjadi keren hehehe, Kamu bisa melihat DEMO nya dibawah ini.

Jika Anda menyukai trik ini dan ingin menambahkannya ke blog, kamu cukup menyalin kode di bawah ini dan paste tepat di bawah tag <body>. Pastikan Plugin jquery sudah terpasang ditemplate kamu, kalo belum ada, ya masukkan Plugin jquerynya.

Ayo kita praktekkan..!!!.

1. Buka blogger kamu.
2. Masuk Template -> Edit HTML.
3. Gunakan C+F temukan kode <body>, kalo sudah ketemu, pastekan kode dibawah ini tepat dibawah kode <body>

<div id='loader'> <div class="wrap"> <div class="bg"> <div class="loading"> <span class="title">loading...</span> <span class="text"><data:blog.title/></span> </div> </div></div></div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".wrap").fadeOut("slow"); setTimeout(function () { $("#loader").fadeOut("slow") }, 1000) }, 1000) }); </script> <style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

4. Simpan template kamu, coba dibuka Blog kamu.. Jreng..!!!!!!!!!!!!

Ganti game lamamu dengan game-game terbaru, hanya di "Revolusi Gamer". Tersedia game-game murah dan berkualitas. Kunjungi info-gamepc.blogspot.com

Berita Pilihanindex »»

Bagaimana Desain Blog ini menurut anda?

Berikan Komentar

Obrolan Ringan