Multi-Label Posts From One Blogspot RSS Feed Using JavaScript

Its Time To Get Your One Blog Posts Of Different Labels Using One Code Only Then Use Multi-Label Posts From One Blogspot RSS Feed Using JavaScript Code Snippet That Is Fully Optimized.

So if you want tyo pick many more posts of different labels then you have to use one code again and again so to avoid that, here we have Multi-Label Posts widgets that will pick desired label posts and will write on desired places. You can use it in the end of your page so it will not effect of your page load time. So now move ahead and garb the code now.

Features:

1.) Pure JavaScript Added.
2.) No JQuery File Added.
3.) No CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Blogger Domain.
7.) Can Set The Post Count, Post Thumbnails, Post Summary, Character Count.
8.) Plain In Design.
9.) Fully Customizable With Your Design.
10.) Can Control Everything.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.

HTML:

<!-- First Label Post Start -->
<div id='latest'>
<h2><a href='http://www.247news-blogger-template.com/'>Latest</a></h2>
</div>
<!-- First Label Post End -->
<div style='clear:both'/>
<!-- First Label Post Start -->
<div id='first_label'>
<h2><a href='http://www.247news-blogger-template.com/search/label/Business'>Business</a></h2>
</div>
<!-- First Label Post End -->
<div style='clear:both'/>
<!-- Second Label Post Start -->
<div id='second_label'>
<h2><a href='http://www.247news-blogger-template.com/search/label/Entertainment'>Entertainment</a></h2>
</div>
<!-- Second Label Post End -->
<div style='clear:both'/>
<!-- Third Label Post Start -->
<div id='third_label'>
<h2><a href='http://www.247news-blogger-template.com/search/label/Technology'>Technology</a></h2>
</div>
<!-- Third Label Post End -->
<div style='clear:both'/>
<!-- Fourth Label Post Start -->
<div id='fourth_label'>
<h2><a href='http://www.247news-blogger-template.com/search/label/Health'>Health</a></h2>
</div>
<!-- Fourth Label Post End -->
<!-- Fifth Label Post Start -->
<div id='fifth_label'>
<h2><a href='http://www.247news-blogger-template.com/search/label/Game'>Game</a></h2>
</div>
<!-- Fifth Label Post End -->
<div style='clear:both'/>
<!-- Sixth Label Post Start -->
<div id='sixth_label'>
<h2><a href='http://www.247news-blogger-template.com/search/label/Sports'>Sports</a></h2>
</div>
<!-- Sixth Label Post End -->

JavaScript:

<script>
function exeRSSpostReader(json){
//exeRSSpostReaderMain(json, DivisionId, Label, PostsVisible, ImageVisibility, SummaryVisibility, SummaryCharcters);
//DivisionId: Id of the division in which the result should shown.
//Label: Specific Label, Set "" for all posts.
//PostsVisible: No of posts shown in final result.
//ImageVisibility: Set true if you want thumbnails else set false.
//SummaryVisibility: Set true if you want summary else set false.
//SummaryCharcters: No of character shown in summary.
exeRSSpostReaderMain(json, 'latest', '', 2, true, true, 150);
exeRSSpostReaderMain(json, 'first_label', 'Business', 3, true, true, 150);
exeRSSpostReaderMain(json, 'second_label', 'Entertainment', 6, true, true, 150);
exeRSSpostReaderMain(json, 'third_label', 'Technology', 4, true, true, 150);
exeRSSpostReaderMain(json, 'fourth_label', 'Health', 4, true, true, 150);
exeRSSpostReaderMain(json, 'fifth_label', 'Game', 1, true, true, 150);
exeRSSpostReaderMain(json, 'sixth_label', 'Sports', 5, true, true, 150);
}
</script>
<script style="text/javascript">
//<![CDATA[
function exeRSSpostReaderMain(json, postArea, labelTxt, visiblePosts, imageVisible, summaryVisible, summaryChar) {
var noOfTotalPosts = 500;
var outputDiv = postArea;
var postLabel = labelTxt;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
var pstChk = 0;
var resultStr = '';
var resultStr = '<ul>';
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (noOfTotalPosts > numPosts) {
noOfTotalPosts = numPosts;
}
for (i = 0; i < noOfTotalPosts; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var postTitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if ( entry.link[k].rel == 'alternate') {
postURL = entry.link[k].href;
break;
}
}
if ("content" in entry) {
var postContent = entry.content.$t
}
s = postContent;
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 != "")) {
var imageUrl = d
} else var imageUrl = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
var img = '';
if (imageVisible == true) {
var img = '<a href="'+postURL+'"><img src="'+imageUrl+'" /></a>';
}
var labels = '';
for(var lblNo = 0; lblNo < entry.category.length; lblNo++){
labels += entry.category[lblNo].term + ', ';
}
if (labels.search(postLabel) >= 0 && pstChk < visiblePosts){
resultStr += '<li><div id="exe_latest_post_container">' + labels + img + '<a href="'+postURL+'"><h2 style="margin:10px 0px;">' + postTitle + '</h2></a><span class="exe_latest_post_desc">';
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");
if (summaryVisible == true) {
if (postContent.length < summaryChar) {
resultStr += postContent + '</span>';
} else {
postContent = postContent.substring(0, summaryChar);
var quoteEnd_gal = postContent.lastIndexOf(" ");
postContent = postContent.substring(0, quoteEnd_gal);
resultStr += postContent + '...</span>';
}
}
resultStr += '</div></li>';
pstChk++;
}
}
resultStr += '</ul>';
document.getElementById(outputDiv).innerHTML += resultStr;
}
//]]>
</script>
<script src="https://247news-blogger-template.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=exeRSSpostReader&amp;max-results=500"></script>

Customization:

1.) Edit Your JavaScript Options As Per Your Requirements. Rest Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…