Sponsors

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:

]]>
Step 3. Just above  ]]> 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_s9U-ukRLKv91yxAAxdi7kaQVETuqSnzdzWtKxM2cGhog2VBuhoVa1BcXmUnY3sCZJH-CeosAG3msTh99s_85IDUaCT1JbV9YSZR9nkC5uQXlyzPPuh3lerGBUDpEQvAIkIMuhZLVuqs/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxcbjAt_N7L8e7f5aEkDhKHBSZj0Qj3SBmac3sgNnVqlLPjng07lMEPVbxSm2fEgTIbjWS1RAVeuVFpQLy1G_T2sEoQUkOt6ciyhubhvA7mNqJoR3gnGD2n6HbOlvqPXfmBgfxzjrkFM/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  tag:


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:


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.

1:39 AM by admin · 0

,

Subscribe to: Posts (Atom)
 
My World Logo Hi!!! You can put anything here, be sure not exceed the limit.