Advanced Random Posts Widget For Blogger Amongst Ikon Thumbnails Together With Snippets
When your spider web log has besides many posts, visitors don't ever accept the fourth dimension or wish to become through all the posts written in that location inwards gild to brand an persuasion of the blog's content. Thus, a random posts widget that volition permit visitors to notice content to a greater extent than easily could live actually useful. This tutorial volition present you lot how to add together a random posts widget to display a listing of posts inwards a random gild amongst thumbnails together with excerpts.
Step 2. Add novel widget past times clicking on the "Add a gadget" link together with pick out "Html/JavaScript" from the popup window.
Step 3. After adding the HTML/JavaScript, re-create together with glue the next script within the empty Content box.
Adding Random Posts amongst Thumbnails together with Posts Summary on Blogger
Step 1. Login to your blogger account, pick out your spider web log together with become to "Layout".Step 2. Add novel widget past times clicking on the "Add a gadget" link together with pick out "Html/JavaScript" from the popup window.
Step 3. After adding the HTML/JavaScript, re-create together with glue the next script within the empty Content box.
<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #F5F5F5;
padding: 3px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 12px;
text-transform: uppercase;
padding: 0px machine 5px;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px venture #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = novel Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var establish = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
establish = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
provide ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' inwards entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' inwards entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' inwards entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' inwards entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAcDxiUOEHItBfPIZ5pZy58TJwSkmXKqjSiED9JNHHT8Emk2FRmxo3JPpPhUN9789ICXNWu2g1uKAmgHAPuDuLOx3tbuxvG1brzb4LJWFagim4WThVuocVeznYScq8803vGG-Xd07VMs/s1600/no_thumb.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="t ever accept the fourth dimension or wish to become through all the posts written in that location inwards gild to mak Advanced Random posts widget for Blogger amongst picture thumbnails together with snippets" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Random Posts Options
- Thumbnail dimensions: to modify the size of the thumbnails inwards pixels, supersede the 75px value.
- Summary length: you lot tin laissez passer the axe command the the length of the summary (in characters) past times changing the 110 value from var randomposts_chars=110;
- Post info: if you lot wish to enshroud the ship service appointment together with comment count modify 'yes' from var randomposts_details='yes'; to 'no';
- Font Size for Posts Titles together with Summary: to modify the font size for the ship service snippet modify the 11px value together with for the posts title, the 12px value;
