Friday 22 March 2013

Pin It

How to Add Scrolling Recent Posts Widget For Blogger

Displaying a list of the recent posts in your sidebar is a great way to keep your visitors busy. There are lots of recent posts gadgets you can use but the one we will be covering in this post will definitely grab the attention of people on your blog.



Scrolling recent posts gadget is a best widget to show off recent posts from your blog with a jQuery scroll effect,which grabs attention of of visitors very quickly.Previously I shared a scrolling/ticker recent posts widget but some of you faced some problems while installing it,that's why here I am sharing a new scrolling recent posts widget,which works a with a j Query spy effect,this is the best feature of this widget.Each snippets of this widget contains title of post,thumbnail of post,date when that post was published and number of comments on that post.Also all of the above options are fully customizable,so that you can easily customize this widget as you wish.Above are the some features of this widget now lets see how to add it into your blogger blog.

Step 1 -:

This widget works with jQuery spy effect so that we have to add jQuery library to our blog first (Note - Ignore this step if you have already added jQuery library to your blog.)

1.Go to Blogger Dashboard > Template
2.Click on Edit HTML.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Now you have implemented jQuery library into your blog.Now lets see how to add scrolling recent posts widget to blogger.

Step 2 -:

1.Go to Blogger Dashboard > Layout
2.Click on Add a Gadget
3.Select HTML/JavaScript

Now Paste below code inside it,
<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By pinkusays.blogspot.com ======== */

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

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

#pinkusays-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/AVvXsEiOByapE_BLPAo7ITY3kxo4KkFFulQdy146_Clj1q4nz5SJCsDz9I1Gdf5eNavGqgUAlcwRemMkX7nPI0b7sJMbwU-T6BJ-Q60RybCVMepFik2hovcVLLEKAr456ZJhXnFoujjXP84V_EY/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

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

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

#pinkusays-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);
}

#pinkusays-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 pinkusays.blogspot.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXiKOFR6S59cMR-iyshoUthCDEhDCfHGiICiefZ7C-0kKCvPm6Xnx53EJlez1rBGxNh_4bldICQuwAvYfWSyHudGRmLdl3PfKThLQtJynLHR_Kxr2KGxSOYnqafcWpJMI66B82CFhrjI/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXiKOFR6S59cMR-iyshoUthCDEhDCfHGiICiefZ7C-0kKCvPm6Xnx53EJlez1rBGxNh_4bldICQuwAvYfWSyHudGRmLdl3PfKThLQtJynLHR_Kxr2KGxSOYnqafcWpJMI66B82CFhrjI/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXiKOFR6S59cMR-iyshoUthCDEhDCfHGiICiefZ7C-0kKCvPm6Xnx53EJlez1rBGxNh_4bldICQuwAvYfWSyHudGRmLdl3PfKThLQtJynLHR_Kxr2KGxSOYnqafcWpJMI66B82CFhrjI/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXiKOFR6S59cMR-iyshoUthCDEhDCfHGiICiefZ7C-0kKCvPm6Xnx53EJlez1rBGxNh_4bldICQuwAvYfWSyHudGRmLdl3PfKThLQtJynLHR_Kxr2KGxSOYnqafcWpJMI66B82CFhrjI/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXiKOFR6S59cMR-iyshoUthCDEhDCfHGiICiefZ7C-0kKCvPm6Xnx53EJlez1rBGxNh_4bldICQuwAvYfWSyHudGRmLdl3PfKThLQtJynLHR_Kxr2KGxSOYnqafcWpJMI66B82CFhrjI/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.pinkusays.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="pinkusays-widget">
<script src='http://code.pinkusays.blogspot.com/recent-posts-spy.js' type='text/javascript'></script>
</div>
Save your widget. And that's it!

Don't Miss These Killer Articles on Facebook:

17 comment:

Thanks for your ideas. It is new for me and i will replicate it now.

,thumbnail of post,date when that post was distributed and number of remarks on that post.Also the majority of the above alternatives are completely customizable,Online Essay Help UK so that you can without much of a stretch redo this gadget as you wish.Above are the a few highlights of this gadget now lets perceive how to include it into your blogger blog.


شركة نقل عفش بالدمام
شركة نقل عفش من جدة الى الدمام شركة نقل عفش من جدة الى الدمام
شركة نقل عفش من الرياض الى المدينة المنورة شركة نقل عفش من الرياض الى المدينة المنورة
شركة نقل عفش من الدمام الى مكة شركة نقل عفش من الدمام الى مكة

It's an amazing blog post found interesting facts about How to Add Scrolling Recent Posts Widget, thanks for sharing important knowledge with us.
https://thewebgross.com/social-media-marketing-services-delhi-india/

Post a Comment