How to create a blogspot page loading effect.
Generally bloggers call this widget the "Blog Loader" or the loading display when your blog is accessed or opened. This loading effect is actually very good for beautifying the appearance of the blog.
Apart from that, the loading image will close all blog page windows, with the aim being that the page will open when the page is ready to be read and then displayed. If you are curious, how does this "Blog loader" look, please click on one of the labels or blog menus, then you will see the blog loading before the page opens. Please follow the blogger method below.
OK, here are the steps.
- Added JavaScript to the template.
Search for the </head> code using ( Ctrl+F ) to find the code faster. - If you find it, delete the code, then replace it with the code below.
<style type='text/css'>
.bbt-loading{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff}
#loading{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}
#loading:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
#loading:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() { $(".bbt-loading").fadeOut("slow"); })
//]]>
</script>
</head>
<div class='bbt-loading'>
<div id='loading'/><a href='https://buktiinaja.blogspot.com/' rel='nofollow' style='font-size: 10px; color: #eaeaea; margin-top: 10px;margin-left: 10px;'> Loading...</a><div class='loading-section section-left'/><div class='loading-section section-right'/>
</div>
<!-- blog loader Andi AM V.1 -->
Next
Silahkan save template agan dan coba lihat hasilnya.
Addition
Jika loader blog tidak muncul, atau loading terusmenerus, atau loading gagal, maka kemungkinan letak permasalahannya pada script jquery yang bentrok.Solution:
- Please delete the jquery-2.1.3.js code above in red in your template.
- If it still doesn't work, try looking for another jquery in your template then delete that jequery, it's possible that a jequery dispute has occurred so the widget doesn't work.
- If you still have problems, please share on Google, how to resolve jQuery conflicts on Blogspot.
