Auto Scrolling Recent Posts Widget With JQuery Spy Effect to Blogger

After sharing a cluster of Social Bookmarking gadgets like Social widget with cool hover effect for blogger with our readers. Today I don't have any social bookmarking gadget to share with you because Today I have a splendid widget for you. As we all know recent posts or popular posts or recommended posts widgets are very popular because they are also one of the main reason of low bounce rate and loyal reader plus also help to increase number of page views. They plays a vital role in linking one post to another post. I have already posted a cool Recommended Post Widget with you but today I have a special treat for our readers. Because today I have come with Auto Scrolling Recent Posts Widget With Jquery Spy Effect for Blogger.

Features of  Auto Scrolling Recent Posts Widget With Jquery Spy Effect for Blogger 

Some of the cool features of Auto scrolling Recent post widget are given below :

• This widget Uses J query Spy Effect Which is the best feature of this widget.
• This widget Auto scroll and you can also adjust the number of posts to display at a time and speed of scrolling.
• Each snippet contains Title, Thumbnail, Publish date and also the number of comments on the post.
• The widget is customizable so you can easily customize this widget.

 Check out the DEMO of this Widget 

Demo

How To Add  Add Auto Scrolling Recent Posts Widget With J query Spy Effect to Blogger

This widget uses JQuery So Ignore this step if you have already added jQuery plugin to your blog.

1.  Go to Blogger dashboard >> Template >> Edit HTML.

2. Search </head> in your template and place the following code just above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

After adding the JQuery plugin follow the following steps.

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By bloggiks.com ======== */

#bloggiks-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#bloggiks-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#bloggiks-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BkLNVBwNI2kOM-62nb4j99ti3dYGkOMbA9eU9jjpyOidoazPD3KsU3ruoGVOkvIgBakJvlM7tJDEffAMLA1dXdC0OJMkTFmwzo9UYLmZEPXPxROKcUiKrxQAcw9kPfqnodvHNTlrNgU/s1600/bloggiks.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#bloggiks-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#bloggiks-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#bloggiks-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#bloggiks-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By bloggiks.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqH2EjCfQuBsYpnLZhytvh-2xDR4LpubxtdPgH6OqAzZjaTgaeiVkSd3X6C5UGkzEnsEbtvVzsntqlTce2qGamuhnAgaytLOpg7TG9AMevjH9vDu6OFexI8z4hB6_Mxk2fQ4zbfJx-kY0/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqH2EjCfQuBsYpnLZhytvh-2xDR4LpubxtdPgH6OqAzZjaTgaeiVkSd3X6C5UGkzEnsEbtvVzsntqlTce2qGamuhnAgaytLOpg7TG9AMevjH9vDu6OFexI8z4hB6_Mxk2fQ4zbfJx-kY0/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqH2EjCfQuBsYpnLZhytvh-2xDR4LpubxtdPgH6OqAzZjaTgaeiVkSd3X6C5UGkzEnsEbtvVzsntqlTce2qGamuhnAgaytLOpg7TG9AMevjH9vDu6OFexI8z4hB6_Mxk2fQ4zbfJx-kY0/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqH2EjCfQuBsYpnLZhytvh-2xDR4LpubxtdPgH6OqAzZjaTgaeiVkSd3X6C5UGkzEnsEbtvVzsntqlTce2qGamuhnAgaytLOpg7TG9AMevjH9vDu6OFexI8z4hB6_Mxk2fQ4zbfJx-kY0/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqH2EjCfQuBsYpnLZhytvh-2xDR4LpubxtdPgH6OqAzZjaTgaeiVkSd3X6C5UGkzEnsEbtvVzsntqlTce2qGamuhnAgaytLOpg7TG9AMevjH9vDu6OFexI8z4hB6_Mxk2fQ4zbfJx-kY0/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.chsaqlain.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="bloggiks-widget">
<script src='http://widgetbloggiks.googlecode.com/svn/trunk/recent.js' type='text/javascript'></script>
</div>

3. Now change the highlighted text in the above code as given below.

http://chsaqlain.com : With your Blog's URL.

Limitspy=4 : Here 4 is the number of posts to be displayed at a time you can change it as you want to.

intervalspy=4000  : If you want to increase the speed of scrolling then just decrease this value.

4. After making changes according to your needs click on save and that's it. 

Get paid to share your links!