Popular Posts in a Compact Format for Contempo...

A few months ago, Blogger rolled out new templates. The popular posts gadget is a new feature of the Contempo template which displays a handful of snippets for the most popular posts. For the popular posts, I didn't necessarily want full blown snippets, but, rather just a handful of links. So, I adapted a custom Related Posts gadget to create the following compact popular post gadget:

<script type="text/javascript">
var d=document;
var divs;
var articles;
var popularposts;
var popularpostsDivs;
var popular_posts_content='';
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=='widget PopularPosts'){
popularposts=divs[i];
articles=popularposts.getElementsByTagName('article');
for (var j=0;j<articles.length;j++){
var pageURL=new String(articles[j].getElementsByTagName('a')[0].getAttribute('href'));
var imgURL=new String(articles[j].getElementsByTagName('img')[0].getAttribute('src'));
var pageTitle=new String(articles[j].getElementsByTagName('a')[0].innerHTML.replace('...',''));
if (popular_posts_content.indexOf(pageURL.replace('http:', 'https:')) == -1) {
popular_posts_content+='<div class="related_item_box"><a href="'+pageURL.replace('http:', 'https:')+'"><img src="'+imgURL.replace('http:', 'https:')+'" class="related_item_img" alt="" title="'+pageTitle+'"/></a><br/><a href="'+pageURL.replace('http:', 'https:')+'" title="'+pageTitle+'" class="related_item_txt">'+pageTitle+'</a></div>';
} //filter duplicate posts
}}}
var pps = new String(popularposts);
if (pps!="undefined") {
popularpostsDivs = popularposts.getElementsByTagName('div');
for (var i=0;i<popularpostsDivs.length;i++){
if(popularpostsDivs[i].getAttribute('role')=='feed'){
var nIH=new String('<div class="related_posts_container">'+popular_posts_content+'</div>');
popularpostsDivs[i].innerHTML=nIH;
for (var j=0;j<articles.length;j++){
articles[j].style.display='none';
}//for
}
}}
</script>

The compact popular post gadget should be added to the page layout menu. This gadget should function as is, but, might require some additional CSS to style the output appropriately. The size of the thumbnail image is controlled by the height and width elements in the sample CSS code shown below, highlighted in yellow while the code highlighted in orange, specifies the size of the container which encloses the thumbnail and link text:

.related_posts_container {
width:100%;
height:150px;
}
.related_item_box {
float:left;
font-size:.8em;
width:100px;
height:150px;
display:block;
margin:10px;
}
.related_item_box img {
width:100px;
height:100px;
}

The above CSS style would need to be added to the advanced section of the customize theme menu. Also, please note that the compact popular post gadget requires that the popular post gadget be enabled (display box checked) in the page layout menu. In addition, in the popular post gadget, you should also make sure to check the box for image thumbnail and uncheck the box for snippet. By the way the image for this post is Dokuro-Chan from Bludgeoning Angel. Enjoy.