Contempo In A Two-Column Format...

Blogger launched new templates a few months ago and, although the  new templates have some nice features, there is still room for improvement. The Contempo template presents posts as a series of snippets and originally, the snippets were presented one per row. I wanted a way to display more snippets in less space, so, I explored different mechanisms for achieving the desired result. At one point, I had managed to do most of the heavy lifting using a complicated style sheet, but, ultimately, the CSS proved to be a bit flaky and occasionally, a post snippet would either disappear or would be misaligned in some horribly noticeable way. Eventually, I created the following gadget:

<script type="text/javascript">
function DoGridView() {
var d=document;
var divs;
var articles;
var mainposts;
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=='blog-posts hfeed container'){
mainposts=divs[i];
articles=mainposts.getElementsByTagName('article');
if (articles.length > 1){
for (var j=0;j<articles.length;j++){
articles[j].style.display='inline-block';
if (j%2==0){articles[j].className+=' second_column';}
var cw = d.documentElement.clientWidth;
articles[j].style.width='40%';
if (cw < 700) {articles[j].style.width='38%';}
if (cw > 950) {articles[j].style.width='42%';} 
articles[j].style.paddingLeft='30px';
articles[j].style.paddingRight='30px';
if (j % 2 != 0) {
articles[j].style.float='right';
} else {
articles[j].style.float='left';
}
var header3 = articles[j].getElementsByTagName('h3');
if (header3.length > 0){
var ahrefh3 = header3[0].getElementsByTagName('a');
if (ahrefh3.length > 0) {ahrefh3[0].style.fontSize="1em";}
}//h3
var articleDivs = articles[j].getElementsByTagName('div');
for (var k=0;k<articleDivs.length;k++){
if (articleDivs[k].className=='snippet-item r-snippetized'){
articleDivs[k].style.fontSize='78%';
articleDivs[k].style.lineHeight='1.3';
}}//if-for atricleDivs

var articlea = articles[j].getElementsByTagName('a');
if (articlea.length > 0) {
for (l=0;l<articlea.length;l++) {
if (articlea[l].className=='snippet-fade r-snippet-fade'){
articlea[l].style.height='18px';
articlea[l].style.bottom='-2px';
}}}//if-for atriclea
}}//if-for atricles
}}//if-for divs
}//function

function UndoGridView() {
var d=document;
var divs;
var articles;
var mainposts;
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=='blog-posts hfeed container'){
mainposts=divs[i];
articles=mainposts.getElementsByTagName('article');
if (articles.length > 1){
for (var j=0;j<articles.length;j++){
articles[j].style.display='block';
articles[j].style.width='auto';
articles[j].style.paddingLeft='40px';
articles[j].style.paddingRight='40px';
var header3 = articles[j].getElementsByTagName('h3');
if (header3.length > 0){
header3[0].style.height="auto";
header3[0].style.overflow="hidden";
var ahrefh3 = header3[0].getElementsByTagName('a');
if (ahrefh3.length > 0) {ahrefh3[0].style.fontSize="1.17em";}
}//h3
var articleDivs = articles[j].getElementsByTagName('div');
for (var k=0;k<articleDivs.length;k++){
if (articleDivs[k].className=='snippet-item r-snippetized'){
articleDivs[k].style.fontSize='100%';
articleDivs[k].style.lineHeight='1.35';
}}//if-for atricleDivs
var articlea = articles[j].getElementsByTagName('a');
if (articlea.length > 0) {
for (l=0;l<articlea.length;l++) {
if (articlea[l].className=='snippet-fade r-snippet-fade'){
articlea[l].style.height='24px';
articlea[l].style.bottom='0px';
}}}//if-for atriclea
}}//if-for atricles
}}//if-for divs
}//function

function GridView() {
var maxlimit=910;
var minlimit=600;
var innerlimit=780;
var d=document;
var cw = d.documentElement.clientWidth;
switch (true) {
case (cw > maxlimit):
DoGridView();
break;
case (cw > minlimit && cw < innerlimit):
DoGridView();
break;
default:
UndoGridView();
break;
}
}
var body=document.getElementsByTagName('body');
var onloadbody=new String(body[0].getAttribute("onload"));
var onsizebody=new String(body[0].getAttribute("onresize"));
if (onloadbody=="null") {body[0].setAttribute('onload', 'GridView();');} else {body[0].setAttribute('onload', onloadbody + ';GridView();');}
if (onsizebody=="null") {body[0].setAttribute('onresize', 'GridView();');} else {body[0].setAttribute('onresize', onsizebody + ';GridView();');}
</script>

The code shown above crawls through the page looking for article containers and within each article container the code will look for snippets using the class name snippet-item r-snippetized. When a snippet is found, a number of formatting changes take place including changing the width of the snippet and the font size. The gadget then uses the onload and onresize events on the page body to enable or disable the formatting depending on the screen width. The gadget would need to be added to the page layout.

This gadget should work as is, but, you might need to make adjustments to the values for maxlimit, minlimit and innerlimit. This gadget switches between one and two columns automatically depending on the current screen width. The three limit values control which screen widths trigger a switch. Depending on your specific setup, some minor adjustments might be necessary.

Also, depending on your specific setup, you may need to apply some additional CSS rules to compact the snippets even more. Below is a sample CSS style that should squeeze some extra space out of the snippets:

.blog-posts article .comment-link {
font-weight: bold;
text-transform:uppercase;
font-size: 80%;
}
.blog-posts article .jump-link {
font-size: 80%;
}
div.widget.Blog .blog-posts .post-outer-container {
padding-top:20px;
padding-bottom:0px;
}
.post-body .snippet-thumbnail {
margin-right:1em;
}
.post-body {
margin-top:10px;
margin-bottom:0;
}
.post-header .byline {
margin-top:0
}
.post-bottom {
padding-top:0px!important
}
.second_column {
clear:both;
}
.post-snippet .snippet-item br,.popular-posts-snippet .snippet-item br {
display:none
}
.snippet-fade:after {
content: '';
}
a .snippet-item, .snippet-item a {
color:#000 !important;
}
.snippet-thumbnail, .item-thumbnail {
overflow:hidden!important;
border:solid 1px #000
}

The CSS code above should be placed n the advanced section of the customize theme menu. Please note that the CSS code removes the line breaks from snippets.  By the way, the character image above is Junko Enoshima from Danganronpa. Enjoy.