A section with tabs to list different posts (popular, recent, comments, etc) is a very common feature in blogs and sites.
I’ll show you how to implement the popular / recent tabs in a blogger template. This is what we want to achieve:
If you don’t know how add the recent posts listing to your blog read first my article on how to add a recent posts gadget to Blogger.
You’ll also need to add references to jQuery and jQueryUI to your Blogger template.
You need to already have the Popular Posts gadget included in your template. If you don’t have it, include it in the section you want.
Next, in your Blogger administrator page go to Template (on the right side). Click the “Edit HTML” button. Copy all the code into an xml file in your computer.
Let’s edit this file.
Search for the PopularPosts widget in the file. Replace it with the following (when replacing the widget make sure to use the same widget ID you had before):
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div class="block">
<div id="tabs">
<ul>
<li><a href="#popular-posts">Popular</a></li>
<li><a href="#recent-posts">Recent</a></li>
</ul>
<div id="popular-posts">
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
<div id="recent-posts">
<div class='widget-content popular-posts'>
<div id="recentposts"> </div>
<script type="text/javascript">
displayRecentArticles({'containerSelector': '#recentposts'});
</script>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</div>
</b:includable>
</b:widget>What I changed:
- Wrapped some divs around the Popular Posts code
- Added a div for the recent posts, just after the popular posts
- Added the ul for the tabs’ header (as per jQueryUI requirements)
- Added the script to make the #tabs div a jQueryUI tabbed interface.
Don’t forget:
- Include the jQuery and jQueryUI files in the <head> section
- The recent posts list will only work if you follow these instructions.