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) :

.blog-pager{

4. And replace it with:

.blog-pager{
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;'>
<style>
.art-post {width: 215.3px; height: 215.3px; float: left; border: 1px solid #000; overflow: hidden;}
</style>
</b:if>
</b:if>

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>
<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");

if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg" 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;
}


//]]>
</script>

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

7.Now search this: 

<data:post.body/>

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;'>
<data:post.body/>
<b:else/>
<a expr:href='data:post.url'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div></a>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
</b:if>
</b:if>

Now save your template and you are done.

OPTIONAL:   Search for: 

/* begin PostHeaderIcon */
h2.art-postheader
{
color: red;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

h2.art-postheader, 
h2.art-postheader a, 
h2.art-postheader a:link, 
h2.art-postheader a:visited,
h2.art-postheader a.visited,
h2.art-postheader a:hover,
h2.art-postheader 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-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#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{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box &gt; #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#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}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

Then find </head> and before it paste :

<script src='http://artistutorials.googlecode.com/files/lightbox.min.js' type='text/javascript'/>