Cara Membuat Efek Loading Keren Di Blogger

Unknown

Tutorial

Kamis, 20 Februari 2014

Belum ada komentar

Cara Membuat Efek Loading Keren Di Blog - Mungkin sobat sudah pernah melihat sebuah Blog yang menggunakan efek loading mengunakan gambar atau semacamnya. Dengan menggunakan efek loading ini, maka Blog akan terlihat menjadi lebih keren dan menarik pada saat loading.

Jika sobat takut kalau kecepatan Blog sobat akan menjadi lambat, tenang saja karena efek loading ini tidak terlalu berpengaruh pada kecepatan Blog. Bagi sobat yang tertarik untuk menggunakannya, silahkan simak artikel berikut.

Cara Membuat Efek Loading Keren Di Blog

1. Login ke Blogger
2. Piih Template
3. Pilih Edit HTML
4. Kemudian cari kode ]]></b:skin> atau </style> (gunakan CTRL + F untuk mempermudah pencarian)
5. Jika sudah ketemu, letakan kode dibawah ini terpat diatas kode ]]></b:skin> atau </style>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAhcbu5RHPQlcIrPUaLqb7-vToCh5VkeSyytNmNXalVGdzOuPXIrohkSb6fqUkZmbjNHgYYSIQzQrfvoItUSmCcW24vji0IwWqrBjrAtE7MZvLUIvNJfVcfWhM0ryDLqOvCVuN8qxEg/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

6. Selanjutnya cari kode </body> dan letakan kode dibawah tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

7. Dan terakhir Simpan Template

Note: URL gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAhcbu5RHPQlcIrPUaLqb7-vToCh5VkeSyytNmNXalVGdzOuPXIrohkSb6fqUkZmbjNHgYYSIQzQrfvoItUSmCcW24vji0IwWqrBjrAtE7MZvLUIvNJfVcfWhM0ryDLqOvCVuN8qxEg/s1600/loadinfo.net+%284%29.gif bisa diganti sesuai keinginan sobat.

Buka blog sobat dan lihatlah perubahannya. Semoga bermanfaat.