Get the latest updates from us for free

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



So I am sure 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 

    0 comments:

    Confused? Feel free to ask

     

    Techies

    Sponsors

    Sponsors

    Protection Status

    Follow me on Google+

    MyFreeCopyright.com Registered & Protected

    Advertisements!

    Advertisements!

    Followers

    Copyright © 2012 All Rights Reserved. Any Article on This Blog can not be repost or reproduce in any form without the permission of Author.