Magnetic Featured posts with Thumbnails Widget for Blogger Blogs ~ Bloggers Festival Guru

Trending: Blogger Template

Friday, February 17, 2012

Magnetic Featured posts with Thumbnails Widget for Blogger Blogs

Featured Posts are basically some posts within your blog that you want to highlight to your readers, separately. It's kinda great way to direct your readers to a certain post that you wan't them to check out. The reason I designated the word "Magnetic" to this Gadget is that it has the capability to attract your readers' attention and deliberation and it would make your blog look more astonishing. So lets get to work and show you how to add the "Featured Posts widget" to your blogs.

(You can See the Demo below on this blog)

How to add Featured posts Widget to Blogger Blogs?

Follow these steps exactly as mentioned:

Go to Blogger.
Design > Edit HTML.
Expand Widget Templates.
Find ]]></b:skin> and place the following CSS code just above it.

/*----------- My Blogger Tips Featured Posts -----------------*/
#mbtipsboxes{height:320px;overflow:hidden;margin:0px;position:relative;width:938px;background:#F2F1F1;border:8px solid #333; border-radius: 1px; -moz-border-radius: 1px; padding:5px 5px;}
#mbtipsboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#mbtipsboxes ul li{ overflow: hidden; float: left; width: 228px; height: 295px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px;}
#mbtipsboxes ul li:hover{ border-bottom:1px solid #636363; }
#mbtipsboxes img{width:210px;height:210px; padding:2px; border: 0px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#mbtipsboxes img:hover{border: 0px solid #8B8B8B; }
.mbtipsbody img{float:center}
.mbtipsbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:center;color:#c4c4c4}
.mbtipsbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0; text-align:center}
.mbtipsbody h3 a:link,.mbtipsbody h3 a:visited{color:#2F97FF;}
.mbtipsbody h3 a:hover{color:#c5c5c5}
.mbtipsbody p{margin:0; padding:0 0;color:#636363;font:10px normal verdana, sans-serif, Arial; text-align:center}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

5. Save it and proceed to the next step.

6. Go to Design > add a Gadget > HTML/JavaScript and add the following code to it

<div id="mbtipsboxes">
<div style="left: 0px; overflow: hidden; position: relative; visibility: visible; width: 100%; z-index: 2;">
<ul>
<li>  <div class="mbtipsbody">
<a class="Fadein3" href="Post 1 URL">  <img height="195" src="Post 1 IMG" width="195" />  </a>
<div class="clear">
</div>
<h3>
<a href="Post 1 URL">Post 1 Title</a></h3>
<p>Post 1 Description</p></div>
</li>
<li>  <div class="mbtipsbody">
<a class="Fadein3" href="Post 2 URL">  <img height="195" src="Post 2 IMAGE URL" width="170" />    </a>
<div class="clear">
</div>
<h3>
<a href="Post 2 URL">Post 2 TITLE</a></h3>
<p>Post 2 Description</p></div>
</li>
<li>  <div class="mbtipsbody">
<a class="Fadein3" href="Post 3 URL">  <img height="175" src="Post 3 IMAGE URL" width="195" />  </a>
<div class="clear">
</div>
<h3>
<a href="Post 3 URL">Post 3 TITLE</a></h3>
<p>Post 3 Description</p>
</div>
</li>
<li>  <div class="mbtipsbody">
<a class="Fadein3" href="Post 4 URL" rel="nofollow">  <img height="100" src="Post 4 IMAGE URL" width="170" />  </a>
<div class="clear">
</div>
<h3>
<a href="Post 4 URL" rel="nofollow">Post 4 TITLE</a></h3>
<p>Post 4 Description</p></div>
</li>
</ul>
</div>
</div>

7. Click save , and you are done.

Customize the CSS

You can do pretty much customization but the basic would be:

To change the background simply replace background:#F2F1F1; with your own value.
To customize the width of the entire widget just change width:938px; with your own value.