--> Add Rotating Slides Of Popular Posts Widget To Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Add Rotating Slides Of Popular Posts Widget To Blogger

My brother Abu-farhan has created an amazing script that transforms the popular posts widget provided by blogger into a a vertical content ...

popular posts sliderMy brother Abu-farhan has created an amazing script that transforms the popular posts widget provided by blogger into a a vertical content slider  that updates automatically. His script really impressed me and I thought of sharing this great slideshow widget with all of you. It is extremely easy to install this widget on blogger. You only need to paste the code inside a HTML/Javascript widget. This new script works on all major browsers and can easily be customized. I have further edited the code to give it a little better color theme. No thumbnail images will appear if you have not added any image in your posts. Posts which are viewed most will be picked by blogger stats widget and displayed through this new gadget.

 

Live Demo

Adding Popular Posts Rotating Slides Widget

  1. Go To Blogger > Design
  2. Click add a gadget
  3. Choose Popular Posts Widget provided by blogger
  4. Keep post number greater than 4
  5. Save your widget
  6. Now select an HTML/Javascript widget
  7. Paste the following slide code inside it,

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

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;


}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
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/AVvXsEhwqcbfT_qWG_8b4WWE6QhQXg2Iji8fHi5NuqD9rnOvLpiioq37dEBXPnqw0-KONGgzO6m3GL942KPp0kl6829WHinDdpyYkBCsfSnWhJ-K8nsuq-4CHTfnysy380R7hrAYhOOdkgdIk6s/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;

height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

 

Keep the two widgets together. One on top of another as shown below,

popular-posts widget

 

Make Changes To Colors and Fonts

Not all of you uses a white background for your blogs and some of you may wish to have complete control over the appearance of the widget. I am listing below important areas which you can edit to let the widget perfectly blend your template.

  • To Change Widget container height edit height:310px;
  • To change the small rectangles width edit width:310px
  • To change width of the text snippet then edit width:290px;. Keep this width 20px smaller than the rectangles width. For example in this widget I have kept rectangles width=310px; and snippet width=290px;
  • To change link title color and font size edit color:#7CA2C4;
    font:bold 12px verdana;
  • To change thumbnail image's border colour and size edit border:2px solid #7CA2C4
  • To change the snippet text's font size, family and colour then edit the yellow highlighted code

What if your template background colour is black or dark?

In such a case replace the following code,

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwqcbfT_qWG_8b4WWE6QhQXg2Iji8fHi5NuqD9rnOvLpiioq37dEBXPnqw0-KONGgzO6m3GL942KPp0kl6829WHinDdpyYkBCsfSnWhJ-K8nsuq-4CHTfnysy380R7hrAYhOOdkgdIk6s/s400/popular+posts.jpg) repeat-x;

with this,

background:#ffffff;

Replace #ffffff with your background color. Use our color generator tool.

I hope you like this widget and find it useful. Please let me know if you needed any help. Peace brothers. :>

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Add Rotating Slides Of Popular Posts Widget To Blogger
Add Rotating Slides Of Popular Posts Widget To Blogger
http://lh6.ggpht.com/-VBLKjRI8oaU/TmFS7tAypfI/AAAAAAAAE6M/FTxHw_87hWM/image%25255B33%25255D.png?imgmax=800
http://lh6.ggpht.com/-VBLKjRI8oaU/TmFS7tAypfI/AAAAAAAAE6M/FTxHw_87hWM/s72-c/image%25255B33%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/09/add-rotating-slides-of-popular-posts.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/09/add-rotating-slides-of-popular-posts.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy