So, In the BHF we had an user who came up with this idea of having related posts link under all posts: [MaapsWorld] How to use Lambda expression. Therefore I planned to add some salt and pepper to it and write an article on it.
When it comes to related posts, first thing is that there is no way of automating this one easily. So we'll have half automation and half manual works on maintaining this gadget.
The steps in implementing this gadget is split into three,
Creating posts with proper Labels
So blogger/blogger bot or the codes we write cannot easily identify the related posts and we have to leave a clue to find it. That is where Labels help us. Create posts with labels so as to categorize.
For example,
Altering XML
1. Go to blogger.com Dashboard > Themes > Edit HTML [Classic Blogger]
1. Go to blogger.com Dashboard > Themes > Options(three dots on the right) > Edit HTML [Modern Blogger]
2. In the appearing page, click randomly somewhere on the box which contains codes.
3. Press Ctrl + F and find, <data:post.body/>
4. Right after the found code, place the following code,
5. In the above code, change the ones highlighted in green to the label you require and it's link respectively.
Updating
Well. Adding a number of label links under read more is up to your requirement. For example, if I have to add another label under recent posts, I would just add the following code,
and add Facebook Label to the list of all labels and the final code will look like below,
and now, right under my post, you could see this widget working.
I have added a number of labels in the code so that,
In this code, if you're not adding the new tag and it is the only tag available to that post and this code in common, you'll not see "See related posts" text showing up. To correct it, we should add the tag like below,
Update 2
Instead of writing multiple conditional tags, this can be written with only one loop tag. Read more here: Related posts. Looping with Multiple Labels
I hope this covers. Happy tweaking.
See related posts:
When it comes to related posts, first thing is that there is no way of automating this one easily. So we'll have half automation and half manual works on maintaining this gadget.
The steps in implementing this gadget is split into three,
- Creating posts with proper Labels.
- Altering XML
- Updating(if in case).
Creating posts with proper Labels
So blogger/blogger bot or the codes we write cannot easily identify the related posts and we have to leave a clue to find it. That is where Labels help us. Create posts with labels so as to categorize.
For example,
- I write all the posts that are gadget customization, css addition etc., with label named "Blogger Customizations"
- Similarly issues under the label "Blogger Issues"
- Some simple tricks under "Blogger Tricks"
Altering XML
1. Go to blogger.com Dashboard > Themes > Edit HTML [Classic Blogger]
1. Go to blogger.com Dashboard > Themes > Options(three dots on the right) > Edit HTML [Modern Blogger]
2. In the appearing page, click randomly somewhere on the box which contains codes.
3. Press Ctrl + F and find, <data:post.body/>
4. Right after the found code, place the following code,
<!--See related posts appear only if required-->
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues"])'>
<b>See related posts:</b>
</b:if>
<!-- Start of link list-->
<ul style='text-align: left;'>
<!--If post has label Blogger Issues, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Blogger Issues")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Blogger%20Issues"'>Blogger Issues</a></li>
</b:if>
</ul>
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues"])'>
<b>See related posts:</b>
</b:if>
<!-- Start of link list-->
<ul style='text-align: left;'>
<!--If post has label Blogger Issues, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Blogger Issues")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Blogger%20Issues"'>Blogger Issues</a></li>
</b:if>
</ul>
5. In the above code, change the ones highlighted in green to the label you require and it's link respectively.
Updating
Well. Adding a number of label links under read more is up to your requirement. For example, if I have to add another label under recent posts, I would just add the following code,
<!--If post has label Facebook, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Facebook")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Facebook"'>Blogger Issues</a></li>
</b:if>
<b:if cond='data:post.labels any (label => label.name == "Facebook")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Facebook"'>Blogger Issues</a></li>
</b:if>
and add Facebook Label to the list of all labels and the final code will look like below,
<!--See related posts appear only if required-->
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook"])'>
<b>See related posts:</b>
</b:if>
<!-- Start of link list-->
<ul style='text-align: left;'>
<!--If post has label Blogger Issues, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Blogger Issues")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Blogger%20Issues"'>Blogger Issues</a></li>
</b:if>
<!--If post has label Facebook, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Facebook")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Facebook"'>Blogger Issues</a></li>
</b:if>
</ul>
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook"])'>
<b>See related posts:</b>
</b:if>
<!-- Start of link list-->
<ul style='text-align: left;'>
<!--If post has label Blogger Issues, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Blogger Issues")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Blogger%20Issues"'>Blogger Issues</a></li>
</b:if>
<!--If post has label Facebook, this is displayed-->
<b:if cond='data:post.labels any (label => label.name == "Facebook")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Facebook"'>Blogger Issues</a></li>
</b:if>
</ul>
and now, right under my post, you could see this widget working.
I have added a number of labels in the code so that,
- The post you're reading right now has Blogger Customizations & Blogger Tricks under See related posts.
- At the same time, this post -> Facebook OG Object Debugger has Blogger Issues & Facebook under See related Posts
- Whereas this post -> Backing up Template does not have the widget at all because it has no related label that I have in my code.
Oh my god, I do not see "See related posts" in some blog posts. What would I do?
Some would see the gadget appearing but not the title, See related posts. This means that you have not added the label in the list of all labels. For example, if I add a label XML to the code and forget to add it in the list(see below code), then for the blog posts with tag XML, you'll be able to see the list of related posts but not it's title.
<!--See related posts appear only if required-->
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook"])'>
<b>See related posts:</b>
</b:if>
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook"])'>
<b>See related posts:</b>
</b:if>
In this code, if you're not adding the new tag and it is the only tag available to that post and this code in common, you'll not see "See related posts" text showing up. To correct it, we should add the tag like below,
<!--See related posts appear only if required-->
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook", "XML"])'>
<b>See related posts:</b>
</b:if>
<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook", "XML"])'>
<b>See related posts:</b>
</b:if>
Update 2
Instead of writing multiple conditional tags, this can be written with only one loop tag. Read more here: Related posts. Looping with Multiple Labels
I hope this covers. Happy tweaking.
Thanks for these free coding...!!!
ReplyDeleteCan you tell me how to include more than two labels in single one coding of related post?
Can we use coma (,) to add more than two labels in a code..... like in your case...
Blogger Customizations ,
Blogger Tricks
Yes. It is possible Shekhar. Thanks for reading through. Please try using multiple labels using loop tags in XML. Read more at : Related posts. Looping with Multiple Labels
DeleteHow to do it. I thought item pagetype only fetch 1 post in loop data:posts.
ReplyDelete