Blogger List Convert Into a Grid
Generally, all default blogger template are arrange in list style, while
some bloggers (especially those who run a fashion blog) have been
looking for a way to style their blogger template to a grid or gallery
style. I have receive couple of emails from different bloggers asking,
if there is a way they can style their blogspot template into a grid
style. Now here i come with a hack that can do the job perfectly well.
This hack will position your post thumbnail at the top, and align the
post summary at the bottom with an automatic jump break or "read more"
link, which will appear at the end of each summary after a specified
number of characters.
The hack will only work on homepage, archive, label and search page
(not with Google custom search.) Love that? Let's get it done then.
Turning List Style to Grid Style
- Go to your blogger dashboard
- Click on Template > Edit HTML
- Use ctrl F to find </head> and paste the following code above/before it.
Now search for <data:post.body/> and replace it with the following code. You may find 2-3 occurrence of this line, but don't replace the first occurrence with it.<!-- Grid Style Hack For Blogger By http://entertainmentplateform.blogspot.com 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 = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Grid Style Hack For Blogger By http://entertainmentplateform.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>
<!-- Grid Style Hack For Blogger By http://entertainmentplateform.blogspot.com End -->
Customization<!-- Grid Style Hack For Blogger Byhttp://entertainmentplateform.blogspot.com 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 For Blogger By http://entertainmentplateform.blogspot.com End -->
- If you don't want to show post image thumbnail, change "yes" to "no"
- "400" represent the number of characters to be displayed if a post has no image.
- "180" represent the number of characters to be displayed if a post has an image, but only the first image within the post structure will be use as thumbnail.
- The height of the thumbnail is "130"
- The width of the thumbnail is "220". Both the thumbnail height and width value can be adjusted to your own preferred value.
- You can change the word "Read More..." to something more enticing like "Continue reading..." Better still, replacing the read more link with image button will be super-cool.
Save your template & Enjoy...<div style='clear:both;'/>
Great info. Thanks for providing United States of America such a helpful info. continue the great work and continue providing United States of America additional quality info from time to time. entertainment
ReplyDelete