Stunning JQuery Blogger Featured Post Widget With Thumbnail

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)




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

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

Comment With:
OR
Choose Wisely!

9 comments

April 13, 2012 at 3:46 AM

HI, I did this but the featured posts are vertical not horizontal. What should I do?

I tried this at http://www.nicolesoefenblog.blogspot.com

Editorial Team MOD
April 13, 2012 at 5:47 AM

Thanks for asking but this featured widget is designed to get shape of any area for example if you place it your sidebar it will adjust there this would be the reason why you are getting the vertical featured posts..and i have checked your blog and i am unable to see it as the widget is not present there...It will be great if you place this widget in your footer or below your header to give most desirable results.

June 1, 2012 at 1:54 PM

Incredible! Yoiu make instructions so clear and understandable. I use your animated up arrow on my site:
http://www.lrsberatti.tech-gyrl.com

and now I am going to add this feature, THANKS!

DM
September 20, 2012 at 2:42 PM

hi, i ve put the widget in my blog, but the boxes can't move
nomikhthess.blogspot.gr

could you imagine what's the problem? i 've copied the codes exactly as you give them and in the right place

Editorial Team MOD
September 20, 2012 at 11:58 PM

Sorry, the blog at nomikhthess.blogspot.com has been removed. ?

RON
September 28, 2012 at 5:29 AM
This comment has been removed by the author.
RON
September 28, 2012 at 5:36 AM

This widget could contain 3 featured post, bt if i want to go with four or five then what should i need to change...??
Ive already tried with-
.mainMBLBOXES {
width:1000px;
height:333px;
margin:0 auto;
overflow:hidden;
}
But its not working.. so please give me a solution to add more feature post..

Another request, that at your Demo page there is another widget which is at number 5 & 6...
Cani get this code...?? This is my blog..
http://knowledgeofidiot.blogspot.com/
Could you know the menu bar...??? :P :P

Me
January 2, 2013 at 2:50 PM

There has to mbe a simpler way, all this coding is going to undermine my blog template. I'm sorry I an unliking this site

Editorial Team MOD
January 3, 2013 at 2:14 AM

We will try our best to keep things Simple.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.