Blogger Random Posts Widget with Big Thumbnails
You can see how this looks on the actual blog itself in the screenshot above. Sidebar-wide thumbnails with the post title and snippet placed below them. There are 2 steps to doing this:
Step 1: Copy paste the following long code into an HTML widget from the layout panel and save:
<style>
#random-posts img {
border-radius: 0px;
float: left;
margin-right: 5px;
width: 300px;
height: 300px;
background-color: #ffffff;
padding-bottom: 7px;
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;
font-weight:600;
text-transform: uppercase;
margin-top:10px;
padding: 0px auto 5px;
color: #131313;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding-left: 0px;
line-height:1.5em;
margin-right: 8px;
margin-top:-15px;
color:#383838;
text-transform:uppercase;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 7;
var randomposts_chars = 50;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = '';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new 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 found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return 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' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in 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' in 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' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjw0guWreOEYR39rGU5KzzfagozqmRwaB-dCl_qo6x8G9HITjLBGWCW6lyCLhJbWW-K1pH_-7qT0THEqaCg4GjxD1Os3qI9pL2LC6roDsNISsdtpxZ_tI7uXXw2nU5juMNfbfuIo8f2w/s1600/no_thumb.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" 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>
Step 2: Unless there is a special code to fix this problem, Blogger will mess up thumbnails that are bigger than 75 pixels on widgets. So, go to the big HTML editor and copy and paste the code below into your template before the </head> of your HTML in order to get nice, clean thumbnails:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function() {
// change the dimension variable below to be the pixel size you want
var dimension = 300;
// this identifies the PopularPosts1 div element, finds each image in it, and resizes it
$('#HTML1').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
image.attr('width',dimension);
image.attr('height',dimension);
});
});
//]]></script>
There are of course parameters inside the widget code that you may want to change. The thumbnail size that I have here is 300x250 and I have highlighted this in blue. If you want to change that you can, but make sure that you do it inside both codes, giving the javascript code the higher value. And then, there are of course lots of other parameters that you can play around with. The font family will be inherited from whatever you have on your blog template, but most other things will need to get adjusted inside the HTML widget.
And that's it. You now have a random posts widget with big thumbnails.
