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 ->This image shows how post will be arranged side by side.
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
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<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