Bagaimana? Keren bukan? Tentu saja keren, efek loading page ini akan membuat tampilan blog ketika memuat halaman menjadi lebih keren, menarik, dan profesional. Menggunakan efek loading page ini tidak terlalu mempengaruhi kecepatan loading blog, sehingga anda tidak perlu khawatir jika anda memasang efek loading page ini di blog anda. Mengapa? Karena pembuatan script efek animasi loading page ini dibuat dengans kode CSS, dan kode JavaScript tanpa dikemas menjadi .js yang harus dihosting terlebih dahulu serta sedikit kode HTML.
Apakah anda berminat? Jika iya, berikut langkah-langkah bagaimana membuat dan memasang efek animasi loading page pada blog. Tenang saja langkahnya cukup mudah, disini anda melakukan sedikit edit html dengan mencari 3 kode tertentu, dan meletakkan beberapa kode script yang akan saya share ke atas atau ke bawah kode tertentu tersebut
Membuat dan Memasang Efek Animasi Loading Page pada Blogger
1. Untuk memasang efek animasi loading page ini, anda hanya akan meletakkan beberapa kode script di atas dan di bawah kode tertentu pada kode template blog, jadi silahkan anda masuk ke akun blogger dan langsung menuju ke menu Template.
2. Klik tombol Backup/Pulihkan, lalu download full kode template anda. Hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat melakukan edit html kode template.
3. Apabila sudah selesai mem-backup full kode template, silahkan klik tutup.
4. Kemudian klik tombol Edit HTML untuk membuka editor kode template blog.
5. Jika sudah terbuka, cari kode ]]</b:skin> atau </style>
6. Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian. Caranya klik 1x pada kode template, lalu tekan Ctrl+F pada keyboard sehingga muncul kotak kecil di pojok kanan atas kotak editor kode template.
7. Masukkan kode yang ingin dicari, dalam hal ini kode ]]</b:skin> atau </style>.
8. Setelah ketemu, letakkan kode script CSS di bawah ini tepat di atas kode ]]</b:skin> atau </style>.
CSS
#cssloadingpage {background:url(https://2.bp.blogspot.com/-gwEckHVvyvM/VnbiQdPPZSI/AAAAAAAADcE/wwKnP62ARpc/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}Catatan : Tulisan berwarna merah merupakan url gambar animasi loading page, silahkan anda ganti dengan url gambar animasi loading page favorit anda.
9. Selanjutnya temukan kode <body>.
10. Apabila sudah ketemu, letakkan kode script di bawah ini tepat di bawah kode <body>.
<div id='cssloadingpage '/>11. Selanjutnya temukan kode </body>.
12. Jika sudah ketemu, silahkan letakkan kode script jquery di bawah ini tepat di atas kode </body>.
Jquery
<script type='text/javascript'>13. Apabila semuanya sudah dirasa benar, silahkan klik tombol Simpan Tema atau Save Template.
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>
14. Terakhir, silahkan cek apakah anda sudah berhasil atau belum menerapkan efek animasi loading page ini ke blog anda dengan mengunjungi atau mengakses halaman blog anda.
Dengan membuat dan memasang efek animasi loading page di blog atau website, maka pemiliki blog akan memperlihatkan blog yang mereka miliki menjadi lebih keren, menarik, dan profesional dimata pengunjung.
Demikian tutorial sederhana mengenai bagaimana cara memasang efek animasi loading page di blog atau website. Semoga bermanfaat and " Happy Blogging "
Related Posts :
Silahkan
klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG
9 komentar:
keren deh...dan tambah keren, karena mau berbagi...hehehe.
happy Monday
Keren 👍
Mas Harmansyah selalu rajin bikin ulasan fitur kekinian.
@Tanza Erlambang, terima kasih mas Tanza.
@Himawan sant, fitur lama sebenarnya mas, cuma melengkapi konten blog aja hehe
Meski fitur lama, tetap keren diulas ulang, mas Harman 👍
Salut, mas Harman mengulas fitur-fitur keren.
Mas, iklan yang muncul di artikel ini ... uhuk-uhuk yaa 😁 .., 'membesar dalam titik -titik menit' ..
Xixixi ..
Aku ikut deg-degan ngelihatnya
@Himawan sant, hehe iya mas, saya lagi nerapin saran dari pihak adsense untuk latar belakangnya
nah pertanyaannya, itu bisa membuat loading blog kita tambah berat gak sob?
@Sains Box, mempengaruhi tapi tidak terlalu karena kode HTML CSS javascriptnya sederhana dan resolusi gambar yg digunakan cukup rendah. Dicoba aja dulu mas, nanti kalau ternyata pengaruhnya banyak langsung dilepas aja
Bagus, mas Harman 👍
Sekarang kulihatin iklan yang bikin deg2an itu udah berganti dengan iklan yang lain 🙂
mantap nih artikelnya kak sangat membantu dan bermanfaat sekali hehehe.
btw, jangan lupa kunjungi balik blog aku yah.
di : www.monitasaki.com
belajar ngeblog dari gak bisa sampai bisa :)
Post a Comment
...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......