Adsense Basics every publisher should know
July 12, 2009 – 4:47 pm | 4 Comments

Many people have online presence with ideas and plans of earning money through blogs or website. And topics such as earning money Online are really popular in that context. Internet is the only home …

Read the full story »
BLOGGER HELP

Get help for Blogger Issues related to templates, widgets, and other problems that arise in your blogosphere world.

BLOGGER RESOURCES

Resources for Blogger that help you to improve your blogging and assists as a reference guide in your blogging.

Blogger Templates

We mainly focus on the blogger templates. We feature latest and popular templates in this blog.

BLOGGER TUTORIALS

Learn how to use Blogger efficiently with our step by step tutorials on several blogger related topics.

BLOGGER WIDGETS

Get the Blogger widgets that enhance the functionality of your blog and adds impression to your template.

Home » BLOGGER HELP, BLOGGER TUTORIALS, BLOGGER WIDGETS

Related Posts by Categories; Blogger Widget

Submitted by bloggeruser on April 23, 2009 – 1:00 pm6 Comments
Related Posts by Categories; Blogger WidgetBlogger/ Blogspot widget “Related posts by categories” shows related posts according to user defined categories at the end of each post. Another widget “Related posts widget for blogger” displays only a list of related posts but this widget shows posts under different labels, categories or tags. You can display desired posts under desired categories and also can specify the number of posts to display in your blogger blog. Needless to say, this widget will help your blog users to explore more related posts under the categories they are interested in.
Follow the specific instructions below to add this hack widget to your blog.


Follow the below steps properly and in order to have the similar widget you see in the pic above.

Widget Adding Instructions / Steps:

1. Go to Blogger Dashboard – click Edit Layout – then click Edit HTML

Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.

2. Check the ‘expand Widgets Template Box” as shown in the figure below.

Check widgets Template Box

3.Then Search (Ctrl+F) the code given below in your template:

<data:post.body/>

4. Copy and Add the code given below just after the above code:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’similiar’>

<div class=’widget-content’>
<h3>Related Posts by Categories</h3>
<div id=’data2007′/><br/><br/>
<script type=’text/javascript’>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values=’data:posts’ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5. Save your Template. That’s it.

Widget Customization

Customize Blogger WidgetYou can change the number of maximum related posts being displayed, search for the code below (within the code given in step 4) and change the number “3″ to any desired number. Its good to have related posts in accordance with the space available to display. Generally, two or three categories is enough. However, you may display the number of categories and posts as you wish.

maxNumberOfLabels = 3;
Widget Use and Summary

In conclusion, this widget is not only an important widget for making your blog look professional but also an important widget to help users to quickly navigate or move on to other important and related posts.

Help and Comment

Help and comment BloggeruserIf you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !
Meanwhile, you can also visit “Related Posts Widget for Blogger / Blogspot” for a similar widget. You can also visit CELEBSIMAGE, one of the celebrity blogs which has this widget in action.
Also I want to know your view about this widget. So Comment !

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

Popularity: 48% [?]

  • Share/Bookmark

Did you miss these related posts ?

  1. Related Posts Widget for Blogger / Blogspot Blogger widget “related posts” in blogger or blogspot blog is...
  2. Recent posts Widget with images for Blogger Are you tired of using the recent posts widget for...
  3. Recent posts Widget for Blogger / Blogspot Recent posts widget in your blogger blog is a useful...
  4. Adding Adsense Ads in Blogger Posts Adsense Ads in Blogger posts has relatively higher CTR (Click...
  5. Share Posts from your Blogger NavBar I guess most of you have removed the NavBar from...
Tagged with:

6 Comments »

  • elims Chuang 光宏 says:

    Thanks for your guide, i love this widget so much!

    I am glad if you could help me to clear my doubt.

    Is it this widget cant support Chinese Word? Or something wrong i have done?

    Example (one of my blog’s post) : http://khchuang888.blogspot.com/2009/05/leg-pitting-edema-cause-by-pregnancy.html

    Really appreciate for your guidance and assistance.

    You could email me: khchuang888@yahoo.com

  • Pradeep Singh says:

    hi elims Chuang, i am glad that this widget helped you.
    I have checked out your blog post and i see the widget is in action. Its working properly.
    Let me know if you have any problems.

  • elims Chuang 光宏 says:

    Dear Pradeep, Pls check on this: http://khchuang888.blogspot.com/2009/05/vote-english-name-for-my-future-baby.html

    Under the ‘Related Posts by Categories’… You can see the name with something like…

    ‘Pregnancy %E6%80%80%E5%AD%95%E6%9C%9F%E9%97%B4′ (should be : Pregnancy 怀孕期间)

    ‘Survey %E8%B5%84%E6%96%99%E6%94%B6%E9%9B%86′ (should be : Survey 资料收集)

    My question is, do your widget not support Chinese words?

    Thanks for clearing my doubt ya~

    Appreciated!

    Have a nice day!

    Regards,
    elims Chuang
    http://khchuang888.blogspot.com/

  • Pradeep Singh says:

    @ elims Chuang 光宏
    Oh ok i too had seen that error when i visited your blog last time.
    I think the problem is wat you say.. it many not be supporting chinese characters. (well, i guess you have not misplaced any code)
    Thanks and keep blogging.

  • æy® says:

    hye, how to show a related post for only 1 label @ category. Let say we have a label named "English Contents", how to show only the recent posts that fall under this category.

    Please help me.tq.

  • Pradeep Singh says:

    @ æy®
    Hi, see you can show related posts for only one category by labeling that post with that specific lable. Take your own example, if you want to display recent posts under "English Content", just label that post with English Content only.
    I hope thats the best way.

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.