Many Blogger blogs are already added this feature on their blogs even if
you visited any professional site then mostly website owners are liked
to display their blog posts in grid view. It’s not a difficult job you
can change any template posts list to grid view by following some simple
and easily tips. If you running a entertainment or fashion blog then
this post is help you a lot because mostly fashion blogs are already
displaying their posts in grid view and if you also want to enable it
then you just need to follow below simple and easy tips.
Ok Now Let Do it ..
1. Go to Blogger Dashboard>> Template>> Edit HTML.
2. Find </head> tag in your template.
3. Simply copy below coding and paste above </head> tag.
<!-- Grid Style Start-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var thumbnail_mode = "yes" ;
summary_noimg = 420;
summary_img = 185;
img_thumb_height = 140;
img_thumb_width = 230;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Grid Style Hack For Blogger By www.realcombiz.com
*/
function
removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var
s=strx.split("<");for(var
i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!='
'&&strx.indexOf('
',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return
strx+'...'}function createSummaryAndThumb(pID){var
div=document.getElementById(pID);var imgtag="";var
img=div.getElementsByTagName("img");var
summ=summary_noimg;if(img.length>=1){imgtag='<span
style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';summ=summary_img}var
summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
<style type='text/css'>
.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}
.post
h3{height:32px;margin-top:60px;
margin-bottom:-15px;padding:5px;font-family: Helvetica,
Arial;line-height:1em;font-weight: bold;
font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:20px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
</style>
</b:if>
</b:if>
<!-- Grid Style End -->
4. Click on “Save Template” and go for below steps.
5. Again find <data:post.body/> in your template.
6. Replace
<data:post.body/> with below coding.
Note:
You may find <data:post.body/> more than 2-3 times in your template so don’t replace fist occurrence with above code.
Customization Like You Want :
- Replace “yes” to “no” if you don’t want to display image thumbnail.
- If you enabled image thumbnail on homepage then replace “185” with your own for displaying post characters on homepage.
- If you disabled image thumbnail on homepage then replace “420” with your own for displaying post characters on homepage.
- Replace image thumbnail height “140” with your own.
- Replace image thumbnail width “230” with your own.
- You can also replace “Read More” with your own Text or Image.
Here Is Important For You ... Use It For Fix Debug
After adding grid style coding in your template, if Homepage, New Post,
Older Post links or buttons are not displayed then simply follow below
steps.
1. Go to Blogger Dashboard>> Template>> Edit HTML.
2. Find <b:includable id='nextprev'> in your template.
3. Past following code below it.
<div style='clear:both;'/>
4. Click on “Save Template” button and you’re successfully done it.
