Hello friends, Today I'll share an Tutorial on How to Add Page loading effects in blogger. Page Loading is a very nice widget to entertain visitors/readers.
Occasionally due to weighty blogs page loading may take upper time to display. In this way of time to avoid bounce of visitors/readers on adding page loading effects crafts visitors/reader entertain and retain on blog.
So Lets begin our tutorial,
If you want to add this progress bar in your blogger template,
6. Hit save template and you're done!!!
Refresh your blog and see this awesome loading effect.
If you want add this type of page loading effects in your blogger template,
here are the steps
After successful pasting the above code replace "YOUR IMAGE LINK" with your choice of .gif images as given below.
Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUSD4k42ikS8tyIGTn7zToEh-jnF6DXzYKOaBvycWI8ILVcmnqDH6aGJVkxEKQBa7_V7ETvFUiayiFDJJn6HCU6iY57DR01pQtUVENUTmCYFn8fBe272eNZIlqZg35beFImH0G-2sAxA/s660/blogtariff-arrows64.gif
Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCK5AcjIhVWkBo9hgsP7KeZ1Y-XJJQQ0IT9lBMSBsLW3GhpNm7U1_411iR_DaemyjzfyCk7cRgzCk_91FxILxm9-f_67CQpLy3dwnZaPE-qAYaYvnjJspjJ7KAFe_kGFFflPTp60SvCKk/s660/blogtariff-balls64.gif
Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pVry3uqLmKFevJLS-zGHekr0yLQ5By03UMCGG6DJ1aYEiwS4Yf3bgaCuLrZeS-rhe1zAU3CrFV3Qu8dGJ7h4RZREkcQDuOAxfGdANOPV3521zcOMEEwSAmqE8G9F6QkFhSINvS0Qco4/s660/blogtariff-loader64.gif
Link: http://i1370.photobucket.com/albums/ag249/tvicky002/25_zpsf6b8d219.gif
Link: http://i1370.photobucket.com/albums/ag249/tvicky002/466_zpsbb7d0259.gif
Link: http://i1370.photobucket.com/albums/ag249/tvicky002/220_zps9420c740.gif
You can create loader .gif images upload it on any image hosting sites like Photobucket or Pisaca and paste the link of that image in the code above.
Occasionally due to weighty blogs page loading may take upper time to display. In this way of time to avoid bounce of visitors/readers on adding page loading effects crafts visitors/reader entertain and retain on blog.
So Lets begin our tutorial,
STYLE#1
YOUTUBE STYLE PREMIUM STYLISH PROGRESS LOADING BAR.
follow this simple steps:
1. Go to blogger>>template
2. Click on backup/restore.
3. After creating backup of your template click on edit html
4. In your template search for </body> tag.
5. paste below code just above </body> tag.
<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style><div id='loadMore'/><script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script src='http://goo.gl/10Okof'/>
6. Hit save template and you're done!!!
Refresh your blog and see this awesome loading effect.
STYLE#2
here are the steps
- Go to blogger>>template
- Click on backup and restore because if anything goes wrong you can reuse it again.
- Now search for the code <body> (Use Ctrl+F to search)
- After finding the code copy the below code and replace it with <body>.
<body onLoad='init()'> <span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'> <img border='0' src='YOUR IMAGE URL HERE'/></span> <script> var ld=(document.all); var ns4=document.layers; var ns6=document.getElementById&&!document.all; var ie4=document.all; if (ns4) ld=document.loading; else if (ns6) ld=document.getElementById("loading").style; else if (ie4) ld=document.all.loading.style; function init() { if(ns4){ld.visibility="hidden";} else if (ns6||ie4) ld.display="none"; } </script>
After successful pasting the above code replace "YOUR IMAGE LINK" with your choice of .gif images as given below.
You can create loader .gif images upload it on any image hosting sites like Photobucket or Pisaca and paste the link of that image in the code above.
Post A Comment:
0 comments:
Post a Comment