Blogger Featured Post Widget With Thumbnail Opacity Effect

Did you wanted to add a featured post widget to your blogger blog but couldn't found the one that you were looking for? Well i have a good news for you todaysmile. Some of our readers wanted to know how exactly they could add the featured post widget that we are using here at BloggingeHow. 

The widget comprises of 5 featured thumbnail images that refer to their respective posts. The widget shows up opacity effect and looks pretty darn cool.

Below are the few simple steps by which you could add the widget to your blogger blog.

Step #1 Find The Destination Code 

Go to Blogger Dashboard >> Design >> Edit HTML and backup your template. Now search for the following code (By using CTRL +F).

Note: There is no set code that you need to search for. The only reason why i have included this step is to find a place for this particular tutorial to add the featured post widget. You can experiment with different positions and then use this widget any where you may wish to.

Search for:

<div id='main-wrapper'>
<div id='content-wrapper'>

Now it may vary from template to template. So you might not be able to find the above code. BUT, you could try finding anything similar to this. We would add the Featured Post widget code above it so that the widget would appear on the top of the blog (as shown in the picture above).

Step #2 Add The Featured Post Widget Code

Now just above the code mentioned in step #1, add the following code above it. Again, there can be errors. Trial and error is the key.

<div id='BeHboxes'><div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '><ul><li><div class='BeHbody'><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='BeHbody'><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='BeHbody'><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='Behbody'><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>

Replace the color tags (each post box represents a unique color above) with the information as mentioned.

Step #3 Adding The CSS

Search for ]]></b:skin>

Now just above this code, add the following CSS for the featured post widget.

/*----------- BeH Featured Post Widget -----------------*/
#BeHboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}#BeHboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }#BeHboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }#BeHboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }#BeHboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}#BeHboxes img:hover{border: 1px solid #c5c5c5; }.BeHbody img{float:left}.BeHbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}.BeHbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}.BeHbody h3 a:link,.BeHbody h3 a:visited{color:#2F97FF;}.BeHbody h3 a:hover{color:#c5c5c5}.BeHbody 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;}

 In case of any problems, leave out a comment below and i would love to get back to you as soon as possible.

You may like to read:

Cheers smile



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: Blogger Featured Post Widget With Thumbnail Opacity Effect
Blogger Featured Post Widget With Thumbnail Opacity Effect
BloggingeHow | Making Blogging Simpler
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 CONTENT IS PREMIUM Please share 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

Tools of the Trade