Stunning JQuery Blogger Featured Post Widget With Thumbnail

Every publisher dream of having a Featured Post category in his blog,but in blogger most of featured post widgets are not attractive,lacks posts thumbnails,lacks a little description about the post and lacks all the stunning effects like CSS and Jquery.All it has is just text with a link attached to your post which looks so un attractive.

You have probably seen those Featured Posts Widgets in WordPress blog which do attract your eyes,Which has a Big post thumbnail,a small post description,good style with CSS and jQuery.

A Featured post widget has some significance,you are telling your readers to must check these post as they are the top most post of the blog.So this is the reason why these posts are highly viewed and a boost in website impression is also observed.So Today we will going to add a JQuery Featuered Post Widget with Big Thumbnails in Blogger

But first let us see what we will going to achive at the end of this tutorial (Here is the live demo of the widget)

LIVE DEMO

So I am sure after viewing the demo you would love to add it to your blog so let us start rolling are fingers on this tutorial.

Adding Style Css Sheet To Blogger Template:

First we will insert Style Css Sheet in Your Blogger Template to do so we will

Go to Blogger >> Our Blog >> Template >> Edit HTML >> Proceed
And now in the template search for the following code by (CTRL+F)

]]></b:skin>

When you find ]]></b:skin> just above it paste the following code

/* MBL-Featured-Post-Widget */
.holderMBLBOXES {
overflow:hidden;
width:320px;
height:333px;
float:left;
position:relative;
background-color:#000;
margin-right:1px;
}
.holderMBLBOXES .image {
   position:absolute;
   left:-100px;
}
.holderMBLBOXES span {
   background-color:#333;
   font-size:27px;
   font-family:Arial, Helvetica, sans-serif;
   color:#dedede;
   font-weight:700;
   padding:4px;
   position:absolute;
   top:120px;
   left:4px;
}
.holderMBLBOXES .text {
   padding:20px;
   display:none;
   font-family:Arial, Helvetica, sans-serif;
   line-height:26px;
   position:absolute;
   top:180px;
   font-size:16px;
   color:#fff;
   width:340px;
}
.clear {
clear:both;
}
.mainMBLBOXES {
width:1000px;
height:333px;
margin:0 auto;
overflow:hidden;
}
.credit {
font-size:12px;
margin-top:25px;
}

Now hit the Save Template button and your template will be saved

Adding the Basic Html And JQuery To the Blog

So Now To Add Html Coding we will

Go To Blogger.com >> Layout >> Add a Gadget >> Add Html/JavaScript >> and Paste the following code there

<div id="container"><div class="mainMBLBOXES">
<div class="holderMBLBOXES notactive"> <a href="Your-First-Post-Url"><img class="image" src="Your-First-Post-Image" width="500" height="334" /> <span>Your-First-Post-Title</span></a>
<div class="text">Your-First-Post-Description</div>
</div>

<div class="holderMBLBOXES notactive"> <a href="Your-Second-Post-Url"><img class="image" src="Your-Second-Post-Image" width="500" height="334" /> <span>Your-Second-Post-Title</span></a>
<div class="text">Your-Second-Post-Description</div>
</div>

<div class="holderMBLBOXES notactive"> <a href="Your-Third-Post-Url"><img class="image" src="Your-Third-Post-Image" width="500" height="334" /> <span>Your-Third-Post-Title</span></a>
<div class="text">Your-Third-Post-Description</div>
</div>
<div class="clear"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('.holderMBLBOXES').hover(
function () {
$(this).removeClass('.notactive');
$('.notactive').stop().animate({'width':'290px'},400);
$(this).find('img').stop().animate({'top':'-165px'},400);
$(this).stop().animate({'width':'380px'},400);
$(this).find('span').css({'background-color':'#000'});
$(this).find('.text').fadeIn(300);
},
   function () {
   $('.notactive').stop().animate({'width':'320px'},400);
   $(this).addClass('.notactive');
$(this).find('.text').hide();
   $(this).find('img').stop().animate({'top':'0px'},500);
   $(this).stop().animate({'width':'320px'},400);
$(this).find('span').css({'background-color':'#333', 'color':'#dedede'});

});

});

</script>

Customizing Your Featured Post Widget

This widget could contain 3 featured posts,so you need to configure it for the Title of the post , The Featured image for your post , The small description of your post,and the Post URL.

To Customize your First Featured Post

Replace Your-First-Post-Url with the URL of your Post

Replace Your-First-Post-Image with the URL of your image

Replace Your-First-Post-Title with the Title Of your Post

Replace Your-First-Post-Description with the small description of post

To Customize your Second Featured Post:

Replace Your-Second-Post-Url with the URL of your Post

Replace Your-Second-Post-Image with the URL of your image

Replace Your-Second-Post-Title with the Title Of your Post

Replace Your-Second-Post-Description with the small description of post

To Customize your First Featured Post:

Replace Your-Third-Post-Url with the URL of your Post

Replace Your-Third-Post-Image with the URL of your image

Replace Your-Third-Post-Title with the Title Of your Post

Replace Your-Third-Post-Description with the small description of post

Now After Customizing all three Featured Posts,Press the Save Button and View the Blog it would be picture perfect!!!!!

Note:Your image that you will going to link in the featured post should have Width500px and the height 334px to gave most desirable results

So that's how you can featured your certain posts which will not only increase the specific post view but all together it will increase your page impression,if you feel any difficulties,then feel free to ask till then peace blessing and happy featuring

Pin it

Stunning JQuery Blogger Featured Post Widget With Thumbnail

4/ 5

By Editorial Board

Posted By Editorial Team On April 07, 2012 Comment

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!