Saturday, 19 October 2013

Automatic Stylish Recent Post Slider For Blogger

Automatic Stylish Recent Post Slider For Blogger
Hello Everyone, Many Of The Bloggers Would Have More Than One, Even I Did Have Two Blogs, And Everyone Wants That His Blog Look Attractive And Get Good Traffic Too. Today I Am Going To Present A Awesome Recent Post Slider Which Is Really Attractive And SEO Friendly Too. But How It Is SEO Friendly? Easily, It Would Help Your Blog Less Bounce Rate And More Page Views. Many Of You Have Read That To Increase Traffic You Must Keep Your Bloggers Engaged, So That More Page Views You Will Get And This Will Led To Increase Your Page Rank Too.
This Widget “Automatic Recent  Post Slider” Is A Attractive Widget Which Shows The Recently Posted Posts Of Your Desired Blog With A Stylish Look And Interface. As Written This Is A Automatic Widget And Automatically Updates Every Times When You Update The Blog. You Do Not Need To Do The Settings Manually. No Need To Add Images, Description etc. It Is Fully Automatic. The Thing You Have To Do Is To Just Add The Widget And Change With Your Blog URL.

Live Demo





If You Like The Widget Then Add It In Your Blog :)

Adding Widget To Your Blog


  • To Add This Widget Go To Blog Tittle → Layout → Add Widget → HTML/Javascript And Paste The Following Code In The Blog:
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://YOURURL.blogspot.com" // Add your blog URL
});
</script>

  • After Pasting The Code In HTML/Javascript Box Change The Yellow Coloured URL With Your Desired Blog.
  • Now Save The Template And You Are Done.
Finnaly, You And Your Visitors Can See A Stylish Automated Recent Post Slider On Your Blog

Wednesday, 16 October 2013

Animated Page Loading Effect For Blogger

Add Stylish Page Loading Effect In Blogger
Hello Everyone, That's Mine First Post In This Blog And I Am Going To Post One Of The Most Attractive Widget. Not Only This Time But I Will Continue To Post About Tech And Blogging. Every Blogger Wants His Blog Looks Best Than Others Blog. But How? My Friends, I Have A Awesome Widget For Blogger Which Will Let Your Blog Look More Attractive. It Is Just A Different Widget, Lie The Exit Effect In Microsoft Power Point Custom Animation. After Adding This Widget In Your Blog, When Any Of The Visitor Click Any Link Of Your Blog, In Spite Of Old Boring Loading Effect, They Will Experience A Animated Page Loading!

To See The Demo, Go To My Other Site : http://www.thesoftplanet.com And Click Any Of The Link.
                                
Demo Of Page Loading
Demo Of Page Loading Effect

Adding Widget To Blogger

To Add This Widget Do The Following :
  • Go To Template > Edit HTML > Now Find </body>. And Paste The Following Code Just Above </body>.
<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWLrKFlT247kSiMYA9h0J8pSS7idzo2DGBJJSfB0tR5iYCDOSghCVxFAbrxhxcfedHcX-U-seAXoUcGBx1KQsIiFnurLc9ZHUefK4_6flUYQHWye8ntYzFLwWIwC0jYG7q2QPIrTwpPDA/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
  • After Adding The Code, Save Your Template.
Note : If You Want To Change The Loading Image, Change The Image URL With The URL In Red.

Now You Are Done, Now You And Your Visitors Can See Awesome Stylish Animated Page Loading Effect In Your Blog.