The Blog Plan: Featured Sites for Blogger Gadget Hack

The Blog Plan – Latest Update

Featured Sites for Blogger Gadget Hack

I've always been jealous of WordPress users and it's really cool plugins. Just like this Featured Posts plugin.

Damn you WordPress!! *shakes fist*

The Blog Plan is hosted by Google's Blogger platform. It's a blogspot site, so it doesn't have these nifty plugins that Wordpress does. Or does it?

A hack is a cool word for changing your blogspot with code that ordinarily blogger wouldn't offer. I've always wanted to have a featured post widget/gadget displayed on the homepage of my blog. So I hacked my blog, and so can you! Here's how to do it.

Adding Featured Posts on Blogger

After weeks of tormenting myself on test sites and forums, trying to figure out how this code works, I finally have it up and running. Here is a still image of what it looks like:

So it will be links to four of your favorite posts that you want people to see. Let's just jump straight into how to get it working for all you blogspot bloggers out there. Here is how I did it.

1. Go to Design ... Edit HTML.

2. Click Download Full Template incase you make any mistakes so you can revert back to your original settings (I can't highlight this step enough).

3. Check the Expand Widget Templates check box.

4. Find the code </head> and directly above it, insert the following:

<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(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

5. Next, find the code ]]></b:skin> and directly above it, insert the following:

#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/AVvXsEgDigJdf2EBwn3pjZT7tV1oSup4hoFFbjZmTRzvIKajzE_1CuXNnu9k4SRifrMIcdmMyPPT0bBpPb5KgtJUoSCZKtJjWcfezD-4r1otu2IRfur3JvdTdftYZWDmjT0Y_Nj718ycl26cMR8/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/AVvXsEiogMvt4t6vNMG8NQOfGl_RKj6yos7QPSpz7q8LXlf7vh1jSrE0l4nqgW1YimBjaDTebLrVLJVwn1rrdhcNgv3i9-E4Vy8GbLqjbsgea9awOvf9uIhR_CVrf_yU-X4dpE2bkCBvEiaHbtM/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;
}

6. Click Save.

7. Return to your blog's Design and create a new gadget.

8. Click Add a Gadget ... HTML/JavaScript.

9. Copy and paste the following code into the Gadget:

<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://www.muyinternet.com/wp-content/uploads/2010/11/amazon-logo.jpg" />
<span>15 Best Sellers for Blogging on Amazon</span></a></li>

<li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDQNP9JEXSogkKJ0DQG90ZX-JocvCDYI5dHsQGIRQUHD0yZnRWbbcbKElHA73g3DtwP8lJ-dycMXUIvCkfbKh-4e33hEizMtYvx72uA95kfqnrkWCV82OKYEE5-iYPkYvWLg5BgijUsc/s320/optin.jpg" />
<span>Email Subscribe Positioning</span></a></li>

<li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="http://i968.photobucket.com/albums/ae167/Glowless/WMGButton20.jpg" /><span>Interview: Glowless</span></a></li>

<li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcc-5eWMYNHJWGKhBrKmFObOTiTQzd0_sbRKYPW4e5i_IUUq9WLXsSZcL9Vniqezbs-ECsepmZUGRfAS2QWwEIojUodlseFEAsQ5vFSeA-w8GbPzoPKAp5-VTbQj0eMpZhxMSYZIsSkwo/s320/keyboard.jpg" />
<span>Secret to Blog URL</span></a></li>
</ul>


<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="http://www.muyinternet.com/wp-content/uploads/2010/11/amazon-logo.jpg" />

<div class="info">
<h2><a href="http://theblogplan.blogspot.com/2011/10/15-best-sellers-for-blogging-on-amazon.html">15 Best Sellers for Blogging on Amazon</a></h2>
<p>List of Top 15 Amazon Best Sellers for 2011... <a href="http://theblogplan.blogspot.com/2011/10/15-best-sellers-for-blogging-on-amazon.html">Read more</a></p>
</div>
</div>


<div id="fragment-2" style="" class="ui-tabs-panel">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDQNP9JEXSogkKJ0DQG90ZX-JocvCDYI5dHsQGIRQUHD0yZnRWbbcbKElHA73g3DtwP8lJ-dycMXUIvCkfbKh-4e33hEizMtYvx72uA95kfqnrkWCV82OKYEE5-iYPkYvWLg5BgijUsc/s320/optin.jpg" />

<div class="info">
<h2><a href="http://theblogplan.blogspot.com/2011/09/add-email-subscribe-below-each-post.html">Email Subscribe Positioning</a></h2>
<p>A big player in the blogging world, Daniel from Daily Blog Tips does it. He wrote about... <a href="http://theblogplan.blogspot.com/2011/09/add-email-subscribe-below-each-post.html">Read more</a></p>
</div>
</div>


<div id="fragment-3" style="" class="ui-tabs-panel">
<img alt="" src="http://i968.photobucket.com/albums/ae167/Glowless/WMGButton20.jpg" />

<div class="info">
<h2><a href="http://theblogplan.blogspot.com/2011/08/interview-glowless-on-weekly-link.html">Interview: Glowless</a></h2>
<p>Something has always intrigued me over at Where's My Glow?. Recently I asked the owner Glowless about it... <a href="http://theblogplan.blogspot.com/2011/08/interview-glowless-on-weekly-link.html">Read more</a></p>
</div>
</div>


<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcc-5eWMYNHJWGKhBrKmFObOTiTQzd0_sbRKYPW4e5i_IUUq9WLXsSZcL9Vniqezbs-ECsepmZUGRfAS2QWwEIojUodlseFEAsQ5vFSeA-w8GbPzoPKAp5-VTbQj0eMpZhxMSYZIsSkwo/s320/keyboard.jpg" />

<div class="info">
<h2><a href="http://theblogplan.blogspot.com/2011/08/secret-to-picking-blog-url.html">Secret to Picking a Blog URL</a></h2>
<p>Your blog URL is your brand. It's what sticks you out from the crowd... <a href="http://theblogplan.blogspot.com/2011/08/secret-to-picking-blog-url.html">Read more</a></p>
</div></div></div>

10. Change all the blue links to your own pictures related to your posts. Change all the red links to the URLs of your posts.

11. Hit Save.

Hopefully you can get this up and running so that your blog and its readers can enjoy your favorite posts as well.

Additionally, if you don't want to have this featured displayed at the top of every post, you can do the following just like I did

1. Go to Design ... Edit HTML.

2. Check the Expand Widget Templates check box.

3. Find (Ctrl + F) the widget you created, called something like HTML6 (if you can't find it, temporarily change your widget's name to something, then search for this name and change back once you are finished).

4. Add the following just after the b:includable code

If you want to show the widget only on the blog post pages:

<b:if cond='data:blog.pageType == "item"'>

If you want to show the widget only on the index page or homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

5. Now add </b:if> before the </includable> code.

Thanks to Suhas Tech and especially Hack Tutors for your work in helping me with these codes.

Why is it important

Having a featured posts shows the user arriving to your site of a post that you love, one that's very popular, or perhaps a link bait post. Why that's important is because you are showing users a post they may not have seen previously. You are also giving your site a professional look and feel to it, with sharp coding that hits the person right in the face as soon as they stumble in.

It's also great to improve your bounce rate. Aiming to improve your bounce rate where people don't leave your site after one pageview is definitely what you want. In upcoming posts, I will share with you how (hopefully) my bounce rate has improved after this addition.

Tips to remember

CSS coding has its flaws. Sometimes it wont work on certain browser version types. Something to watch out for.
whenever a site says "back up your HTML", do it. You wont believe me until you stuff something up. I have in the past without being able to fix a thing. I'd hate for you to do the same.
Don't name the HTML gadget otherwise it will affect the look of the hack (unless you like it)
Don't remove the "#fragment" links with your own links, as it will make the gadget bug-out. (this took me ages to figure out myself)
I recommend placing the widget above your posts.
You can change the widths and colors of the tool to your heart's content.

What do you think? Any Questions?

Tork @ The Blog Plan

If you liked this post, please share it!