Searching...
Searching...
Wednesday 27 February 2013

Add Animated Recent Posts Widget


A
nimated or Moving from New post to Older posts or scrolling recent posts gadget was developed by ksb codings author sandeep .This 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 because of the moving nature of the widget. Its a new scrolling recent posts widget, which works a with a jQuery 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 and editable, so that you can easily customize this widget as you wish.


Below widget generator is one method that you can add this widget directly to your blog.


  • First click "Generate" Button
  • After that the code will generated then click "Preview+code Button" to preview code .
  • Then atlast you can the code directly to your blog by Pressing the "Add to Blogger" Button.

Below widget generator is Second method that you can add this widget directly to your blog.


Step 1:-

Friends Ignore This Step If you have already Ajax 1.4.2 jQuery plugin in your template


  • Go To Blogger>>Layout>>Edit html
  • Press on Keyboard cltrl+f and find </Head>
  •  Replace the above code with below code given.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>

Now you have activated jQuery library into your blog. Now lets go to Second Step how to add scrolling recent posts widget to blogger.

  Step 2:-


  •   Go to Blogger Dashboard > Layout
  •   Add a Gadget
  •   Select HTML/JavaScript
  • Paste below code inside it,

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

/* ========== Scrolling Recent Posts Widget By knocksuperbuzz.blogspot.com author sandeep ======== */

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

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

#knocksuperbuzz 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/AVvXsEjmNiunw_p78NzcWZSsMejlMCtxbEHxdS_cd9cQPROychJ-G2G8CQ14tUQclQLt4c4MMcEuGPOKe_9wem4AvvAMvbG52DY6AT-nvXnJLq_fzUvousuksS1eRSKz4bZdAhi-SLQDpCK-8uWd/s320/knocksuperbuuzz.jpg) repeat-x;
    border: 1px solid #ddd;
}

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

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

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

#knocksuperbuzz 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 knocksuperbuzz.blogspot.com author sandeep ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EKjC6VzPs-vWsqIBa4zdio-zZLOSAszaA7ujyh5SfdbOIqz5lEa-nZEvUwccj5LM-84456tePk2-wphyphenhyphen95wUI4EoQJN29n6Xt_IAWZ2I9m15xek-Py1Q1WdYM-1enxbMwQ0MEeGohnzR/s1600/knocksuperbuzz.blogspot.com.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EKjC6VzPs-vWsqIBa4zdio-zZLOSAszaA7ujyh5SfdbOIqz5lEa-nZEvUwccj5LM-84456tePk2-wphyphenhyphen95wUI4EoQJN29n6Xt_IAWZ2I9m15xek-Py1Q1WdYM-1enxbMwQ0MEeGohnzR/s1600/knocksuperbuzz.blogspot.com.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EKjC6VzPs-vWsqIBa4zdio-zZLOSAszaA7ujyh5SfdbOIqz5lEa-nZEvUwccj5LM-84456tePk2-wphyphenhyphen95wUI4EoQJN29n6Xt_IAWZ2I9m15xek-Py1Q1WdYM-1enxbMwQ0MEeGohnzR/s1600/knocksuperbuzz.blogspot.com.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EKjC6VzPs-vWsqIBa4zdio-zZLOSAszaA7ujyh5SfdbOIqz5lEa-nZEvUwccj5LM-84456tePk2-wphyphenhyphen95wUI4EoQJN29n6Xt_IAWZ2I9m15xek-Py1Q1WdYM-1enxbMwQ0MEeGohnzR/s1600/knocksuperbuzz.blogspot.com.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EKjC6VzPs-vWsqIBa4zdio-zZLOSAszaA7ujyh5SfdbOIqz5lEa-nZEvUwccj5LM-84456tePk2-wphyphenhyphen95wUI4EoQJN29n6Xt_IAWZ2I9m15xek-Py1Q1WdYM-1enxbMwQ0MEeGohnzR/s1600/knocksuperbuzz.blogspot.com.jpg";
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.knocksuperbuzz.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="knocksuperbuzz">
<script src='http://knocksuperbuzz.coffeecup.com/knocksuperbuzz.blogspot.com.js' type='text/javascript'></script>
</div>
<div arial="arial" helvetica="helvetica" id="mashable" sans-serif="sans-serif" style="background: #EBEBEB; border-image: initial; border-top: 1px solid white; border: 1px solid #EBEBEB; font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;">
                <a href="http://www.knocksuperbuzz.blogspot.com/2013/02/add-animated-recent-posts-widget.html" target="_blank"> Get This ?</a>
            </span>
        </div><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Important Note:- Replace knocksuperbuzz.blogspot.com url with your url.

Edit this as per your requirement :

numposts = 10; Total number of posts which you wants to scroll by this widget

limitspy=4; Number of the posts to appear on the widget

intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.





Thanks for using knocksuperbuzz.blogspot.com if you like this post please comment and subscribe.




Thanks for using knocksuperbuzz.blogspot.com if you like this post please comment and subscribe.


Stay Connected With Free Updates From KSB codings

Subscribe via Email


3 comments:

 
vistors visitors