Latest: Tutorials


Wednesday 19 February 2014

Add Beautiful Scrolling Recent Posts Widget for Blogger

0 comments

 One thing i know is you can make your blog professional designed if you do everything mentioned in this blog.

Blogger.com is an easy platform for creating free blogs and making them stunning. Actually, now you can stylize your blog with tons of free widgets by different \designers.If you have been following me lately then you would have find the best design for your blog.

Today's post is How to add beautiful scrolling recent posts widget for your blog.

Now let's start adding this beautiful widget to your blogger blogs..

  • Go to Blogger Dashboard 
  • Now Template >> HTML >> Proceed 
  • And find <head> tag inside your template by using CTRL+F
  • Right after <head> tag insert following jQuery link
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Save your template And you're done...

Adding the widget to blogger

Now after adding the JavaScript library into your blog's HTML section, do the following to add this cute widget into your blog:

  • Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget
  • Copy the following code and paste inside an HTML/JavaScript widget
<style type="text/css" media="screen">
<!--
/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */
#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}
#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
#helperblogger-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/AVvXsEikFupZgFjhsb_Gz64lGJtsEqqLhoxp-lAB7Pz6RFryCqyocaV6xJvfs-QRxxeCyRy7bgvldDA7YdJYmp1CyZBziKHFrNNFGZDXfhwt-AtpWF4Z9uYzJLZ8bhMkr1FjLBQGOphyioOOWuE/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}
#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}
#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}
#helperblogger-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);
}
#helperblogger-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 helperblogger.com ======== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU62N5-u9YtXS1-5ZFCSui7XQ7kxnC3oZx2zXbvv5oajW5IqA4hwrEnIg3fwAyeBBbnJhKnr1kFzIu3zQQAbd4kumkcObiG0fHzeEABIVSUIvfvJ_F21JFRaCOmRfq-kI0SlWaTTlXfi4/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU62N5-u9YtXS1-5ZFCSui7XQ7kxnC3oZx2zXbvv5oajW5IqA4hwrEnIg3fwAyeBBbnJhKnr1kFzIu3zQQAbd4kumkcObiG0fHzeEABIVSUIvfvJ_F21JFRaCOmRfq-kI0SlWaTTlXfi4/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU62N5-u9YtXS1-5ZFCSui7XQ7kxnC3oZx2zXbvv5oajW5IqA4hwrEnIg3fwAyeBBbnJhKnr1kFzIu3zQQAbd4kumkcObiG0fHzeEABIVSUIvfvJ_F21JFRaCOmRfq-kI0SlWaTTlXfi4/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU62N5-u9YtXS1-5ZFCSui7XQ7kxnC3oZx2zXbvv5oajW5IqA4hwrEnIg3fwAyeBBbnJhKnr1kFzIu3zQQAbd4kumkcObiG0fHzeEABIVSUIvfvJ_F21JFRaCOmRfq-kI0SlWaTTlXfi4/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU62N5-u9YtXS1-5ZFCSui7XQ7kxnC3oZx2zXbvv5oajW5IqA4hwrEnIg3fwAyeBBbnJhKnr1kFzIu3zQQAbd4kumkcObiG0fHzeEABIVSUIvfvJ_F21JFRaCOmRfq-kI0SlWaTTlXfi4/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.noblenaijablog.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>
 Just replace the URL "http://www.noblenaijablog.blogspot.com" with your own blog address and save the widget. That's all done. And now view your blog with a new stylish addition.  Enjoy!

0 comments: Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

Post a Comment

Blogger Widgets
 

Contact Form

Name

Email *

Message *

Jquery Dropdown Menu

Author's Bio

Founder & Author: Oyejobi Adeola is a blog designer, web developer and a loving person currently working on several web projects, he is managing several blogs from his living.He loves to help and teaches different people on how they can make it big online without age barrier.Do you really love his blog? If yes, then
Read More About Him

Recipes

Related Posts Plugin for WordPress, Blogger...
Copyright © 2013 Noblenaijablog All Right Reserved
Designed by oyejobiA | Powered by Blogger