How to create image gallery template using Artisteer

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 > #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'/>