November 1, 2011

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 »

51 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.

  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. awesome :) i saw it on RHA ...now Going to add on mine

    Thank YoGreat Information. thank you

    ReplyDelete
  14. 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
  15. This comment has been removed by the author.

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

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

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

    Recently posted
    Asphalt 5 For Android

    ReplyDelete
  19. 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
  20. Your permalink is not correct, check it :) and this featured post widget is awsm i added on my blog http://technozan.com

    ReplyDelete
  21. 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
  22. Really amazing i will for sure add this to my blog... but why some times it won't shows the images???

    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. very useful and helpful tutorial.thanks for sharing.
    HP0-Y46

    ReplyDelete
  28. This can be a great sound judgment post. Worthwhile one who is merely seeking the means relating to this element. It's going to undoubtedly help teach me personally. Cory

    ReplyDelete
  29. 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
  30. excellent issues altogether, you simply gained a brand new reader. What might you recommend about your post that you made some days in the past? Any certainlegalseal

    ReplyDelete
  31. Its amazing to see someone put so much passion into a subject. I’m glad I came across this. I’m glad I took the time to read on past the first paragraph. You’ve got so much to say, so much to offer. I hope people realize this and look into your page. zanzibar hotels

    ReplyDelete
  32. I notice that all of them state that you need to change the JAM values, but it seems to be quite random as to what values are actually put in there. Is there any formula to use in relation to the types of devices and configuration values.Spread Betting Forum

    ReplyDelete
  33. You got a really useful blog I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me. Yacon Root

    ReplyDelete
  34. That’s been one of my mantras – focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.villa in mykonos

    ReplyDelete
  35. Thanks for taking this opportunity to discuss this, I feel fervently about this and I like learning about this subject. If possible, as you gain information, please update this blog with more information. I have found it really useful. 70’s fashion

    ReplyDelete
  36. I am really impressed, Thank you for sharing this post, I hope that you can share more photos here. how to make money fast

    ReplyDelete
  37. Fantastic web site. Lots of useful info here. I am sending it to a few friends ans also sharing in delicious. And naturally, thanks for your sweat! online tickets maker

    ReplyDelete
  38. 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
  39. It really is a great idea.I will have a trial of this idea as soon as I got the pattern.Thank you for information.plano tx dentist

    ReplyDelete
  40. After adding the first code I wanted to add the second one. But I was unable to do so thus I entered the second code in
    TEMPLATE DESIGNER -> ADVANCE -> ADD CSS and I think this would be easy compared to the bbskin code....

    ReplyDelete
  41. I am in need of some more video clippings here so that some more explanations are available here to share with me. that would be an added advantage for me to get more groomed up always.Watercolor real estate

    ReplyDelete