Stunning JQuery Blogger Featured Post Widget With Thumbnail

Socialize It →

Tweet

9

Advertisements

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 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).