How to show posts from particular label in Blogger
How to Show Specific Label Posts in Blogger: A Step-by-Step Guide
Introduction:
Blogger is a versatile platform that empowers bloggers to share their ideas, experiences, and expertise with the world. One useful feature of Blogger is the ability to display specific label posts on your blog, allowing you to curate content based on categories or topics. By implementing this feature, you can provide your readers with a more focused and personalized browsing experience. In this article, we will guide you through the process of showing specific label posts in Blogger, enabling you to organize your content effectively and engage your audience with targeted articles.
Benefits of Showing Specific Label Posts in Blogger:
1. Improved User Experience: By displaying specific label posts, you offer readers easy access to content that aligns with their interests. This enhances their browsing experience, encourages exploration of related articles, and increases overall engagement on your blog.
2. Targeted Content Delivery: Showing specific label posts enables you to deliver highly relevant content to your readers. By categorizing posts into labels, you can cater to specific niches or topics, attracting and retaining a more dedicated audience.
3. Enhanced Navigation: Displaying specific label posts on your blog helps visitors navigate through your content effortlessly. It provides them with a clear path to explore related articles, boosting their overall satisfaction and encouraging prolonged engagement.
Step-by-Step Guide to Display Specific Label Posts in Blogger:
- Go to your blogger theme click on drop down button and edit HTML
- Add this script on above close </head> tag
<!-- above close head-->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
- Add this is script above your close body tag
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);
</script>
<script type='text/javascript'>
var images = document.querySelectorAll('#label_with_thumbs img');
images.forEach(function(image) {
var src = image.getAttribute('src');
var src2 = src.replace("s72", "s780");
image.setAttribute('src', src2);
});
</script>
- Add this css on b.skin by using customize> advanced>add css -paste👍
img.label_thumb {
Background-size: cover;
Background-size: 100%; display: block;
margin-left: -10px;
width: 100%;
height:170px;
color: var(--jt-heading-link);
Border: 1px solid #ccc;
Border-radius: 5px;
Color: #000;}
.clearfix{Color: #000;
Font-size:19px;
List-style: none;
}
@media screen and (min-width: 485px) {
img.label_thumb{
Width: 100%;
Height:330px;
}
.clearfix{Color: #000;
Font-size:29px;
Margin-top:-10px;
} }
- Save your theme
- Now go to your layout option and add this html to so label wise post
<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>
- Here you can see true and false that helps to so and hide the media or text from post
- If you don't want post description you can remove true and write 'false' for hidding post discription or meta text
- You can also hide your post thumbnail post title by using true and false command
- But in this code I will optimised the for better experience
- You can just copy and paste in your blogger HTML JavaScript gadget
- Don't forget to change level name with your level like when you will writing post on fashion topic right fashion in name_of_your_label
- In this widget you can't show hd images of your blogpost thumbnail
- Finally save your gadget and see the changes in your blog
- Now you have successfully inplanted label wise post in your blogger website
Conclusion:
Displaying specific label posts in Blogger is a valuable feature that helps you organize and present your content effectively. By implementing the step-by-step guide outlined in this article, you can enhance the user experience on your blog, provide targeted content, and improve overall engagement. Remember to optimize your article for SEO using relevant keywords, high-quality content, and effective meta tags. By following these guidelines, your article on how to show specific label posts in Blogger will have a better chance of ranking well on Google, increasing its visibility and reach.
Last word
In this post we will provided information about How to show posts from particular label in Blogger, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
Wonderful. Ιt works perfectly