Blogger Tutorial

How to Change Content List View to Grid View in Blogger


Most of blogger templates are in the List view style but in this content we are going to share a tip that will help you to change your blogger posts from List to Grid view style. If you run a free marketing online then this tip will useful for you. This tip will work on Homepage, Archive and Label only.


1- Log in to your Blogger account
2- Select your Blog  >>  Template  >>  Hit the Edit HTML
3- Search for </head> tag, then copy the following code and paste just above or before the </head> tag
<!-- Grid Style Hack Start By sharetoworld.com-->
<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[

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 Hack End By sharetoworld.com -->
Note:
- summary_noimg = 400 : No of characters to show for posts with images
- summary_img = 180 : No of characters to show for post without images
- img_thumb_height = 130 : Height of the image thumbnail
- img_thumb_width = 220 : Width of the image thumbnail
- width:44%;height:370px : Height and width of post container (You can also use px form for width)


4- Now search for <data:post.body/> and replace it with the following code
<!-- Grid Style Hack 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>
<!-- Grid Style Hack End -->
Note:
>>> If you find you Home, Newer and Older post links missing, do not worry, in the Edit HTML section search for <b:includable id='nextprev'> and paste the following code just below or after it.
<div style='clear:both;'/>
5- Press the Save template button

0 comments:

Post a Comment

Powered by Blogger.