Arange Blog Posts in Gallery

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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdd_2M8zBPmvWW-9meil-EJj5O3aAWWbVBDI8HMNX1edXEtC2ABXFS2BDWq1xdOwdA7iJRlWMovw2Wfaqw13iBR-G5H-XZJ83b3QsCvAu-JM8VGJLI3HgctPajODA3vK24SZIXV9CvFE30/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdd_2M8zBPmvWW-9meil-EJj5O3aAWWbVBDI8HMNX1edXEtC2ABXFS2BDWq1xdOwdA7iJRlWMovw2Wfaqw13iBR-G5H-XZJ83b3QsCvAu-JM8VGJLI3HgctPajODA3vK24SZIXV9CvFE30/s1600/post.jpg);

Take From here



Related Posts Plugin for WordPress, Blogger...