random
1

Change Your Blogger List Posts Into A Grid Or Gallery View

Most probably, all default blogger blogspot template are arrange in list posts style, while some bloggers especially some modern style and new premium blogger templates have been looking for a way to style their blogger template to a grid  or gallery style.This way will only work on your blogger blog homepage, archive,  label and search pages.Here is how!

Shouted Blogs's Gift...!
How To Create Proffesional 404 Error Page Not Found For Blogger Blog

Change Your Blogger List Posts Into A Grid Or Gallery View

Step No. 01:
First Off, Go To Blogger Dashboard.

Step No. 02:
Select "Template" Tab From Blogger Dashboard.

Step No. 03:
Using Ctrl+F,Just Find </head> Tag.
Change Your Blogger List Posts Into A Grid Or Gallery View
Change Your Blogger List Posts Into A Grid Or Gallery View

Step No. 04:
After Finding That Tag,Just Copy The Below Code And Paste It Before The </head> Tag.
<!-- Start Grid Style Post View For Blogger Blog By Ghulam Haider-->
<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 Post View For Blogger Blog By www.pakblogz.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>
<!-- End Grid Style Post View For Blogger Blog By Ghulam Haider-->

Step No. 05:
Again, You Have To Need Find Another Piece Of Code.

Step No. 06:
Using Ctrl+F, Just Find  <data:post.body/> Piece Of Code.

Step No. 07:
After Finding that Piece Of Code, Just Replace The Below Code With Above Mentioned Piece Of Code,You May Find That Piece Of Code 2-3 Times,But You Have To Need Only Replace With 2nd Or 3rd Occurrence Not 1st.
<!-- Start Grid Style Post View For Blogger Blog By Ghulam Haider-->
<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>
<!-- End Grid Style Post View For Blogger Blog By Ghulam Haider-->

Step No. 08:
Save Your Template Now.

Take Look Your Blog Live.

That's It.
Shouted Blogs's Gift...!
Change Your Blogger List Posts Into A Grid Or Gallery View Reviewed by Ghulam Haider on 00:12:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.