Blogger Featured Post Widget With Thumbnails

Hi guys. Did you wanted to have a featured post section in your Blogger blogs? You would have probably noticed that featured sections in the WordPress blogs quite often. People normally use this section to contain their top performing posts, so that they get a further boost up by those extra impressions. As many people tend to read the featured posts, this widget works quite well.
So lets see what we are going to achieve. The widget is placed at the bottom of the test blog.




Live Demo


The widget can also be seen at the bottom of MBT where you would find some really useful resources. So lets get started and add it to our blog.

Step 1: Adding The Main Code

Go to Design >> Add a Gadget >> HTML/JavaScript. Now simply add the following code in that widget:

<div id='mbtboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

<ul>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 1 LINK'>
<img height='100' src='POST 1 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 2 LINK'>
<img height='100' src='POST 2 IMG LINK' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 3 LINK'>
<img height='100' src='POST 3 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>

</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 5 LINK'>

<img height='100' src='POST 5 IMG LINK ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
</div>

Add Your Own Links

The widget contains 5 featured posts. So your have to configure all those posts links, images for each posts, their description and a small paragraph related to that article.

I have separated all those 5 posts areas with different colors. Note that description is the main heading for the post. So don't confuse it with a small paragraph of few lines. Check the demo if you haven't.

Post 1 | Post 2 | Post 3 | Post 4 | Post 5

Step 2: Adding CSS

Now go to Design >> Edit HTML and tick the check box. And don't forget to download your template for backup purposes.

Now search for the following code by (Ctrl + F):

]]></b:skin>


Now just above this code, add the following code:


/*----------- MBT Gallery -----------------*/

#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#mbtboxes img:hover{border: 1px solid #c5c5c5; }
.mbtbody img{float:left}
.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.mbtbody h3 a:hover{color:#c5c5c5}
.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

Now simply save your template and would be all done.

NOTE: The images that you would link to the widget, should be 170px width and 100px in height. You may like to read :

Create Blogger Backup For Images And Get Image URLs

Customization:

Say if you want to match the widget with your colored template. You can easily do that by changing the background color code that i have made bold the coded above.

background: Your Color Code;

Or you could add a border to the widget by using 1 or 2 at most instead of value 0.
border:0px

Thats all. Hope that was useful and exciting. Waiting for your feed back.
Cheers!

Guest Post by Hassam Ahmad Awan. MBT's Gold Star Guest Author.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

36 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hmm... I have been thinking about doing something like this on my blog. Thanks for posting this, it will come in handy one day.

    ReplyDelete
  2. nice article

    thanx friend

    http://internetricks4u.blogspot.com/

    ReplyDelete
  3. even the image size is 170*100 ,image not displayed brother.please solve the problem

    ReplyDelete
  4. Your Post is so vague! Please tell how to add at the bottom of the blog?!!

    ReplyDelete
  5. Not getting the images! Mohammed pls help

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. hey ayush use this
    img height="100" src="POST 1 IMG LINK?imgmax=800" width="170"
    instead of this
    img height='100' src='POST 1 IMG LINK'?imgmax=800 width='170'

    ReplyDelete
  9. This tutorial is shared by our guest poster hassam. There are some technical errors which needs to be corrected. I have edited the Main code above. Please retry.

    If it still did not work then let me know so that I could share an alternative way. The widget on my blog is directly embedded inside the template rather HTML/JavaScript widget. That is one reason why most of you are facing problem. I am a little busy with exams at the moment else I would have share a tutorial on it

    ReplyDelete
  10. it will be a good widget for my blog
    http://picsplazza.blogspot.com

    ReplyDelete
  11. hi dear Mohammad..
    even the image size is 170*100 ,image not displayed brother.please solve the problem .. i know u are the best .. first time your(guest poster hassam) code not working.. please solve the problem. and best of luck for your exams

    ReplyDelete
  12. Brothers instead of pasting the main code in HTML/Javascript paste it in your template by doing this:

    1. Go to Design > Edit HTML
    2. Search for this <div id='credits'>
    3. Just above it paste the Main Code
    4. Save your template

    I hope it will work now else I would need to write a demo tut on it soon.

    @Ayush and @Vishu
    Thanks buddies for the kind wishes :)

    ReplyDelete
  13. hiiii friend..

    I have added drop down menu in my blog

    but how can i do i link or add post in that dropdown menu...

    pls tell me
    my email ID is amol.gade23@gmail.com

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. i want to shOw it only on home page like rha ... its Possible ??

    ReplyDelete
  17. What is background colour code for this popular post?[/COLOR]

    Recently posted
    Asphalt 5 For Android

    ReplyDelete
  18. Millions of thanks MBT.
    i was searching for this thing since a long time.. i think 2 years at least..
    look how i applied it to my site;
    http://www.medicotips.com

    ReplyDelete
  19. Your permalink is not correct, check it :) and this featured post widget is awsm i added on my blog http://technozan.com

    ReplyDelete
  20. Nice widget, but I have a small problem!I followed the steps exactly as you showed above but each of my featured posts is one line below the previous one. If you want to see for yourself check at the bottom of my blog here http://www.blog-and-profit.com/ and please tell me what can I do. Thanks!

    ReplyDelete
  21. Really amazing i will for sure add this to my blog... but why some times it won't shows the images???

    ReplyDelete
  22. Very helpful tricks. Thanks!

    ReplyDelete
  23. Thanks a lot i love this post.. everything went smoothly except one thing .. the widget is off set to the right.. Any suggestion on centering it? Thanks again!

    ReplyDelete
  24. Is there anyway to reduce the width of the box ?
    thanks in advance

    ReplyDelete
  25. Not automatic. How to start automatically based on feed?

    ReplyDelete
  26. Nice widget bro. But check the URL / permalink in this blog posts.. it's 2011/11/hi-guys.html :P

    Thanks for the widget.. Appreciate it.

    ReplyDelete
  27. Is there a way we can turn this widget into a slide show using CSS? I am a totally new to programming so please help me out.

    ReplyDelete
  28. This comment has been removed by a blog administrator.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. Hi dear Mohammad,
    I have installed this widget as u mentioned in ur comment but....I have got a lil bit problem to the left side how to fix it? I mean to say that the weight of widget and the weight of main blog are not synchronizing? Plz help me out.

    Regards,
    Nirazz
    Nepal
    plz check @ http://nirazz.blogspot.com/

    ReplyDelete