Add/Convert Blogger Post in Grid View

New blogger templates are coming in a new body layout like grid masonry, top notification and search bar. It looks cool when your blog bo...

Blogger post in grid view
New blogger templates are coming in a new body layout like grid masonry, top notification and search bar. It looks cool when your blog body change into grid view, it has many benefits than list view because in list view responsive media query not work well and they tightly shrink with your responsive screen and creates lots of stress in coding while grid view make this work easy as drinking water just you have to add float code in the CSS style sheet for responsiveness. Nowadays every one look responsive style after update of Google new algorithm Mobilegeddon and template designer also starting to create a responsive template with grid view styling because it is easy and cool.

So you can also make your new template from grid masonry and if you are using a custom list view template so don’t worry in this tutorial I will define you that how you can change your body list view style into grid view by adding some little code inside a blog HTML viewer.

Read the below steps for safe and secure code implement.

First study your template if you are using a custom theme because every template has different style so it is important to know every little thing about the template.

Then Back up your template for safety and comfort.

Go to Template>> Edit HTML>> Press CTRL+F.

Search the below code.
</head>
 Add the below code above </head>.
<!-- PRO TECHNIFY Grid Style Start-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Grid Style Hack For Blogger By www.protechnify.blogspot.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>
<!-- PRO TECHNIFY Grid Style End -->
 Afterwards, search the below code.
<data:post.body/>
Now replace <data: post. body/> with the below code and remember, don’t replace first replace second or third if available.
<!-- PRO TECHNIFY Grid Style Start -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More</a> </b:if> </b:if>
<!-- PRO TECHNIFY Grid Style End -->
 Click to save template and jump on the next step.

Customization

If you want to remove thumbnail effects so change ‘Yes’ to ‘No’.

If you have removed thumbnail on the homepage so change “420” with your own numbers for displaying post summary on the home page.

If you have enabled thumbnail and want to set character numbers on the home page so change “185” with your desire number.

If you wish to change the height and width of the thumbnail image so change “140” for height and “230” for width by your selected number.

Want to change the Read More text so you can change by replacing Read More with your own favorite text.

Last Words

This was the new hack which makes your work easy and comfortable as well as for web designer also, as I told you can make your post gird style into responsive by a little knowledge of code. If you need some help with more editing so freely ask am here to solve your all queries. Stay tune and be happy.

COMMENTS

BLOGGER: 13
Loading...
Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Add/Convert Blogger Post in Grid View
Add/Convert Blogger Post in Grid View
http://1.bp.blogspot.com/-Vbv-UjcDTqc/VYmBMU0AOCI/AAAAAAAAIZA/rtsleMhQ0TU/s640/Display-Blogger-Posts-in-Grid-View.png
http://1.bp.blogspot.com/-Vbv-UjcDTqc/VYmBMU0AOCI/AAAAAAAAIZA/rtsleMhQ0TU/s72-c/Display-Blogger-Posts-in-Grid-View.png
PRO TECHNIFY
http://www.protechnify.com/2015/06/add-convert-blogger-post-in-grid-view.html
http://www.protechnify.com/
http://www.protechnify.com/
http://www.protechnify.com/2015/06/add-convert-blogger-post-in-grid-view.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy