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(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>
<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);
8 Response to Arrange blog posts in gallery view in blogger
This is sexy man
I've enabled this on my blog too
how to show only images and post titles in homepage
Hey, I'm using this in 2012. Can you tell me how I can modify the code so the thumbnail shows a cropped view of the bigger image instead of stretched?
awesome.....i was really finding for this! And your post about hiding post from homepage was also great. It really makes the blog feel like a real website. Thank you!
abhishek@technodator.blogspot.com
hey this is good can you help me out with this please ...
after you make thumbnails like this if you click on the title it will take you to post but if u click on the image it just shows image how to fix this ??
can you make it even if you click on image it still gets to post ???? please
Impresive man... applied on my blog
not workiong
Post a Comment