Stylish JQuery Featured Post Widget for Blogger

Featured Post widget is important to add the most interesting content of your blog. By adding featured post widget, you can emphasize the most popular content and show it to your readers. You may have seen these kinds of widget in similar WordPress blogs.

Today, we'll learn how to add it into Blogpsot Blogs. Earlier, I created Platinum Blogger Template. From the most of the template users, I received the comments that Featured Post widget is not present there. So considering this, I am writing the separate tutorial which we will start now!

First of all view the Demo here.

Note: Platinum Blogger Template users don't have to follow the Step1, Step2, Step3, Step4 and Step5. So you can directly jump to Step 6.

Updated: All code has been updated. Please re follow the instructions those who have installed this widget.

Step 1. As general, Log on to your Blogger account and go to Design > Edit HTML.

Step 2. Find the following code in your Template:

]]></b:skin>

Step 3. Just above  ]]></b:skin> tag, add the following CSS codes:

#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:336px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:336px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_EU5a4UJI/AAAAAAAAA8c/U6OHv72PgrY/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_ECqSLSzI/AAAAAAAAA8U/DQnot3Fpm7I/s1600/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}

Step 4. Now, add the following JavaScript code above the </head> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>

Step 5. Save the Template.

Step 6. Again, Head out to Design > Page Element > Add a Gadget > HTML JavaScript. Add the following code into the box:

<div id="featured">

          <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />
<span>15+ Excellent High Speed</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI
/AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />
<span>20 Beautiful Long Exposure</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" /><span>35 Amazing Logo Designs</span></a></li>

            <li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />
<span>Create a Vintage</span></a></li>
          </ul>

        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

             <div class="info">
                <h2><a href="#fragment-1">15+ Excellent High Speed</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Second Content -->
        <div id="fragment-2" style="" class="ui-tabs-panel">
            <img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI/
AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />

             <div class="info">
                <h2><a href="#fragment-2">20 Beautiful Long Exposure</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel">
            <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

             <div class="info">
                <h2><a href="#fragment-3">35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />

             <div class="info">
                <h2><a href="#fragment-4">Create a Vintage</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">Read more</a></p>
             </div></div></div>

These codes are little bit confusing. So, you have to edit these codes carefully. Here is the customizations:

Replace fragment-1, fragment-2, fragment-3 and fragment-4 with your post URL. There is two link in the code but you have to place same URL. For example: There is two fragment-1. So, replace these two fragment-1 with same post URL.

Red color code is for image URL. Do same as you have done for the Links above. There is two image URL. So replace Image URL with your own. For example, replace both Image URL of Link-1 with your own. Note: the both Image URL must be same.

The text with Pink color is the title of each post. So, replace all of the Pink color text with the title of your post.

The text with Green color is the summary of the post. Replace these text with short summary which must match with the titles.

Step 7. Now, Save the widget and finally you're done!

Make sure you have placed the featured post widget on the top of the "Blog Posts" as shown below:

I hope the customization is not so hard. If there is any confusing then you are free to ask question via Comment. Also, you can share you opinion and suggestion.

UPDATE: Try using this hack so the widget will appear only on homepage and it won't overlap the posts: Hiding Featured Post Widget in Post Pages in Blogger

Do you like this featured post widget? Let us see your work!