Arrange blog posts in gallery view in blogger

Tweet

Gallery view means arranging the blog posts one after another side wise as in a magazine. This is also referred to as magazine view. Unlike usual blogs, you can change your blog from the monotonous old look into a magazine side-by-side view.
This image shows how post will be arranged side by side.

 This is how to do it

Steps :

• Go to Blogger Dashboard => Design => Edit HTML
• Look for the piece of code ]]></b:skin> 
• Add the following piece of code after this line
•  Save your template

Code Starts  ->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>

#main-wrapper {
margin:0px 0px 0px 8px;
float:left;
border:0;
padding:0px;
background:none;
overflow:hidden;
width:760px;
}

.post{
background:url(http://3.bp.blogspot.com/_WoCJXgXotb8/Sr6_OOI-fpI/AAAAAAAAAGY/S6RX237A-sc/s1600/post.jpg);
background-repeat:no-repeat;width:227px;height:195px;
margin:0px 15px 20px 0px;
padding:10px 0px 0px 10px;border:0;
display:inline;float:left;overflow:hidden;position:relative;}

.post img {max-height:151px;max-width:217px;padding-top:8px;}
.post h3{font-size:11px;padding-top:5px;margin:0;line-height:6px;}
.post-labels{display:none;}.post-author{display:none;}
.post-body{padding:0px;}
</style>
</b:if>

Code End

Suggestions : 

• Edit width:227px;height:195px in above code to resize the size of each block
• This piece of code shows bugs when used for formatting individual pages in blog, I'm trying to fix it. If you find any solution do let me know. Works perfectly otherwise  "EDIT - Fixed"
• If you dont want the background image remove the line background:url(http://3.bp.blogspot.com/_WoCJXgXotb8/Sr6_OOI-fpI/AAAAAAAAAGY/S6RX237A-sc/s1600/post.jpg);