Cara Syarif - Hallo sahabat blogger, pada kesempatan kali ini saya akan membagikan tutorial tentang cara membuat efek animasi loading page di Blogger, apakah Anda tau apa sebenarnya loading page itu ? loading page bisa diartikan sebagai waktu menunggu saat halaman sedang dimuat, dengan menambahkan efek animasi loading page juga dapat membuat blog terlihat seperti hidup, dengan begini pengunjung akan merasa senang untuk mengeksplore semua isi halaman yang ada di blog Anda.
2. Kemudian masuk ke menu Template > Edit HTML
3. Lalu tambahkan kode dibawah ini sebelum
Cara Membuat Efek Animasi Loading Page Keren di Blogger
1. Pastikan Anda sudah login ke Blogger2. Kemudian masuk ke menu Template > Edit HTML
3. Lalu tambahkan kode dibawah ini sebelum
]]></b:skin> atau </style>#cssload {background:url
(http://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;}
4. Selanjutnya tambahkan kode dibawah ini tepat dibawah
<body> jika tidak ada kode tersebut anda cari dengan menekan Ctrl+f tuliskan di kolom pencarian <body<div id='cssload'/>
5. Tambahkan kode dibawah ini sebelum
</body><script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>
6. Simpan template, dan hasil dari kode diatas akan menjadi seperti ini
Penting : Jika Anda tidak menyukai efek animasinya seperti yang di atas, Anda bisa menggantinya dengan cara merubah link gambar yang diberi tanda putih dengan link gambar yang sudah saya sediakan.
#cssload {background:url(http://2.bp.blogspot.com/gwEckHVvyvM/VnbiQdPPZSI/AAAAAAAADcE/wwKnP62ARpc/s1600/loading.gif)no-repeatcenter;background color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQ1p_VBu-06lrWgjj_yGEBdM3y0oDnXtd_ml3q6Q36Spg32P57l23qn3LNxxoB0ulo4_LmAw8MoF9xgOTw69PX8LArY_7boXUHkpd8tNzJOYxhPAl4_M8qkwSRlMWOec39NACOWmjzcY/s1600/loading10.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxMptAUlVX2rF3p6yuXrLaB0FiWm1mLgcw0uOntLdvB2uCic4GAXPWTbDIkSqMC5DSPQWZHnTpiRlphiSsVD7414LHalkgpuksRDKsPFlnVqnFn3LmUTT7wGiCZIq5XbBbBUjBtE03BE/s1600/Loading6.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKY0GPwypG7JeN1YrWF4n7oGfzJyyAVx1i94OUMHnFxpdsvgLqs5ehbn1BB6Wq5rCJ4bC7N6q89NiSaS_Dz6mhsDedOPMFYPA51gkuo1NSPlgzEQxV1f8KymY94HXUZDulpH5kHuMIRmc/s1600/loading7+%25281%2529.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitueqfA9uMnz3IS_NagVkOMMI0NNMxJolyyO2LS1dfmQh_2cLh8cuBt_EXdsa6wGnMsdwoKPCJFcdp1tEe83yX82JqMlLSjOA-tMOk2Ap0cdCouVMZfnts3jwnj8aX9BpD_5rvuEhukso/s1600/loading9+%25281%2529.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLrU9W52qrQuPkkdXHzrHhJTNgDnOAdpOSdnIL2BBoiM1_rzF6GdGz1rEdsaB4PYJoxpRMBX51kD8pZH9fPHjIhFyLT-8IZ_usFSh1iNRPJJKtHCrVpPcnn_zkMOhkUv2VpYLgZONrIA/s1600/Loading9.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUq5_ZgCw8nU1HH6hhxqyGWxkx7B7PF9QKZGUX-1EBcn2L1uBnLVkSXmL1F1Nn-GiRMDSDSKkHy13m2ier6_0UeU-y16NBT3KwmchnYpDQPWtqqMlIFayLq7-xamJZnABFMPeIAY8vjNE/s1600/Loading2.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYQZqTbtUDzLPiF1-7VMoBcSuWPdGuMstJxara3YcCDNpwLH6rcCYqirnnWSK_JfumV4UQLcFVFclsWj0I24uNby7Q9qi2cs1Fq0Wy2AM2oKK_7R39IiZYsn_MnM5eVyeNZ29Dx8vWcA/s1600/loading3+%25281%2529.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRR6AoA_Hkvt7U3zdute2HIb8lMJ-cShwMWEdoSwHa-o0pCjwYjqlBMU2f_dMLI3If8d0c0kxKdAhpPrQaEtYxhE12aYlSojf5ZbUmOucSM37XP-tWA4j5TMKnuN8uoClzkz5hDFInElI/s1600/Loading3.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNercSbMPoKohMmwSP6LcYVqnPq6E3QnRn1PjXaIuXEtPfglPNxCQeKn1jSZ3lI9qife5IVYxBfcW2C3u9c3wwDTQNg6mkp4yjG3pdz9WvFsLiobmLiVV523_shQBF8exPZsATVJx-gRQ/s1600/Loading4.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirNlbBsLWFfMW0OJuU-jTax8qj9Jbi0uRYxYPdGFuwVu52p522FwVdK_l5eOJc9H7I662OHNP_k4NcFpAhNy74hCYAoMObI_fGlv-fYrOly7UYoW_5cNhy1BiSz9hOPABno8byrsqR4QA/s1600/Loading5.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMOskf9Hd8_Ymfc3HediEaxfB0-uw7Scgd6GDXB93eJhXYS5GdMl5cdQFfV_FriEoWQxx0HkuHcCOsAwnWLomnK7FWzTQtVB9HkqGO-k5DY-oMH4l7SMk0a7abY0AujEFDf-XqYgDkMg/s1600/loading1+%25281%2529.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4bYyiEpa-NZehFzkQmZb4keMXRx9ayXiyq56-8IG0YvlMofcrwy2J3RRvwX9We74YkDLyWPdKor98DMeUHWFfmHH02yY_9i59z2z03YOb3miklKsHtE4XNRDE4jsV8pYZsBvgtHwxZs/s1600/Loading1.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-Sx6y8zAQcBSsGFKMQg8DaidSLUPFRePjSr1gwU0lo64GHik-3dMivQKehycr1VCBeIEPoAnHkduV6dbaihTFCUyJqFrRrW6emPx571u7UndL52d56If586vKxrICYsTEO8YpztHDSk/s1600/loading2+%25281%2529.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiGP_ROwg6WzYWT7meRYhQ07SlFpnCz29PKX7-F-iEs693ZB2vIK6sIWT_-_zoOKOlTi_FazkAfDlCY2-0zyq4B8n2SJXciZPsJ_kpwEd-vQUCt8-0LgUgvHvXiEXFsg-_0_LVTw5I2M/s1600/Loading8.GIF
0 Response to "Cara Membuat Efek Animasi Loading Page di Blogger"
Post a Comment
- Dilarang spamming
- Dilarang berkomentar yang dapat menyinggung SARA
- Komentar akan dibalas jika sempat