Stunning Jquery Blogger Featured Postal Service Widget Alongside Thumbnail

Every publisher dream of having a Featured Post category inwards his blog,but inwards blogger most of featured post service widgets are non attractive,lacks posts thumbnails,lacks a lilliputian description nigh the post service too lacks all the stunning effects similar CSS too Jquery.All it has is but text alongside a link attached to your post service which looks thence un attractive.

You convey likely seen those Featured Posts Widgets inwards WordPress spider web log which produce attract your eyes,Which has a Big post service thumbnail,a modest post service description,good mode alongside CSS too jQuery.

A Featured post service widget has to a greater extent than or less significance,you are telling your readers to must cheque these post service every bit they are the travel yesteryear most post service of the blog.So this is the argue why these posts are highly viewed too a boost inwards website impression is too observed.So Today nosotros volition going to add together a JQuery Featuered Post Widget alongside Big Thumbnails inwards Blogger

But showtime permit us run into what nosotros volition going to achive at the halt of this tutorial (Here is the alive demo of the widget)

LIVE DEMO

So I am certainly afterward viewing the demo you lot would honey to add together it to your spider web log thence permit us start rolling are fingers on this tutorial.

Adding Style Css Sheet To Blogger Template:

First nosotros volition insert Style Css Sheet inwards Your Blogger Template to produce thence nosotros will 

• Go to Blogger >> Our Blog >> Template >> Edit HTML >> Proceed 
• And straight off inwards the template search for the next code by (CTRL+F)

]]></b:skin>

• When you lot find  ]]></b:skin> just inwards a higher house it glue the next 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 bridge {

        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 hitting the Save Template push too your template volition live on saved

Adding the Basic Html And JQuery To the Blog

So Now To Add Html Coding nosotros will 

• Go To  Blogger.com >> Layout >> Add a Gadget >> Add Html/JavaScript >> too Paste the next 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 incorporate 3 featured posts,so you lot involve to configure it for the Title of the post service , The Featured icon for your post service , The modest 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 modest 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 modest 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 modest description of post

---

Now After Customizing all 3 Featured Posts,Press the Save Button and View the Blog it would live on pic perfect!!!!!

Note:Your icon that you lot volition going to link inwards the featured post service should convey  Width500px and the meridian  334px to gave most desirable results

So that's how you lot tin featured your certain posts which volition non solely growth the specific post service stance but all together it volition growth your page impression,if you lot experience whatever difficulties,then experience costless to enquire till thence peace approbation too happy featuring