.

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!

COMMENTS

BLOGGER: 96
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Stylish JQuery Featured Post Widget for Blogger
Stylish JQuery Featured Post Widget for Blogger
http://4.bp.blogspot.com/_b0xJ7qk6DTc/TIsvBzqXTwI/AAAAAAAABD0/bcqSPd91HsU/s1600/feaured-post-blogger.jpg
http://4.bp.blogspot.com/_b0xJ7qk6DTc/TIsvBzqXTwI/AAAAAAAABD0/bcqSPd91HsU/s72-c/feaured-post-blogger.jpg
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
http://www.hacktutors.info/2010/09/stylish-jquery-featured-post-widget-for.html
http://www.hacktutors.info/
http://www.hacktutors.info/
http://www.hacktutors.info/2010/09/stylish-jquery-featured-post-widget-for.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy