First create your 1,2 or 3 column template in Artisteer, export it to blogger and then:

1. .Log in to your dashboard--> Design- -> Edit HTML

2. .Click on "Expand Widget Templates"

3. Search (CTRL + F) :


4. And replace it with:

width: 600px;
padding-top: 10px;
clear: both;
align: center;

This will ensure the pager always spans the width of  post columns on non-item pages.

5.Search: ]]></b:skin> and after paste this code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
.art-post {width: 215.3px; height: 215.3px; float: left; border: 1px solid #000; overflow: hidden;}

Change the width and height with you own to align the posts.

6.Scroll down to where you see </head> tag and right before it paste the next code:
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height = 172;
img_thumb_width = 192;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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");

if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
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;


Note : You can change the red values as your choice.

7.Now search this:


8.Replace above code with below code.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>  
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a expr:href='data:post.url'>
<div expr:id='&quot;summary&quot; +'>
<script type='text/javascript'>
<div style='clear: both;'/>

Now save your template and you are done.

OPTIONAL:   Search for:

/* begin PostHeaderIcon */
color: red;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}, a, a:link, a:visited, a.visited, a:hover, a.hovered
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid green;          text-align: center;

Change the margins to 0 (in your template it will have different values)to align better the images, and if you want a line under the title add the line in blue.

If you want to use Lightbox effect on your photos follow the next seps:

Search: ]]></b:skin> and before it paste this code:

/* LightBox */
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#lightbox-container-image-box &gt; #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#666}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}

Then find </head> and before it paste :

<script src='' type='text/javascript'/>