Membuat Efek Loading Blog Warna Warni

Membuat Efek Loading Blog Warna Warni - Selain menulis konten yang menarik di blog, Tampilan blog juga harus bagus dan menarik agar pengunjung betah saat membaca artikel di blog kita. tapi kita harus tau tamplilan yang banyak pernak pernik biasanya akan menambah beban loading di blog itu sendiri. jadi kita harus menambah pernak pernik yang penting-penting saja agar loading blog kita tidak terlalu berat.

Nah, bagi anda yang memiliki blog yang loading nya agak berat, di sini saya akan posting untuk menambah Efek Loading Blog Warna Warni dan sangat menarik tentunya. untuk demonya anda bisa lihat sendiri saat blog ini loading atau saat anda mau meninggalkan halaman blog ini. dulu saya sudah posting tentang Cara Membuat Efek Loading Ala Blog Kang Ismet
jika anda ingin memasang nya di blog anda, silahkan ikuti caranya di bawah ini.

1. Silahkan anda masuk di akun blogger anda,

2. Langsung menuju Template => Edit HTML

3. Simpan kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>

#redirect{display:none;position:fixed;top:0;left:0;bottom:0;right:0;background:#C8F7C5;z-index:10;animation:scaleout 3.0s ease-in-out infinite}@keyframes scaleout{0%{transform:scale(0.0);opacity:1;background:#D91E18}20%{transform:scale(1.0);opacity:0.8;background:#9B59B6}40%{transform:scale(2.0);opacity:0.6;background:#F7CA18}60%{transform:scale(3.0);opacity:0.4;background:#049372}80%{transform:scale(4.0);opacity:0.2;background:#6BB9F0}100%{transform:scale(5.0);opacity:0;background:#722D6A}}


4. selanjutnya simpan javascript di bawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="redirect"/>');$(window).on("beforeunload",function(){$('#redirect').fadeIn(1000).delay(6000).fadeOut(1000)});
//]]>
</script>


5. Save template anda. dan lihat hasilnya. Nah cukup sampai disini artikel tentang Membuat Efek Loading Blog Warna Warni. Selamat mencoba.

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser