Saturday, July 27, 2013
Somebody asked me how to create a galery template, well here i am now trying to explain how to create your own galery template. It's not realy complicated, might you think it's complicated to create a galery template, don't you? You only need to include some codes to your template, and that is it.

Galery template does look good, as long as you include at least one pic for every single post you publish. Yeah, i understand if you want a galery template for you are website.

Speaking english my friends, the code that i'm going to share here does not belong to me, i just took it from my template.

Very well! Here is javascript code, put it in your template somewhere in betwen tag <head>

<script type='text/javascript'>
summary_img = 550;
summary_no_img = 650;
summary_img_width = 125;
summary_img_height = 95;
</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");
var summ = summary_no_img;
if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
<img src="'+img[0].src+'" width="'+summary_img_width+'px" height="'+summary_img_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + RemoveHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Now that you done with the above code, find <data:post.body/> in your template. I will not tell you how to put the following code in your template exactly, but you have to replace the "data:post.body" tag with the code.

Sorry, but i forgot already what codes are before or after its "data:post.body" tag, if any. So, use your own imagination for it, anyhow you know that the main gol is you have to replace its data:post.body tag with the following code. So am i clear my friend? :)

<p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>CreateSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</p>

Have you gotten done with the above? Well, now save your changes and see the magic happen..

Here are things that you may want to make a little change on.

*summary_img - defines how many characters to show if the post has image to show.
*summary_no_img - defines how many characters to show if the post has no image to show.
*summary_img_width - defines how wide the image to show.
*summary_img_height - defines how very high the image to show.

That is it my friends, that is it. If you have any question about the code, or if you face a bussiness with the code, or anything else, you tell me okay? We'll get it right together. Meanwhile, you have a try.. :)

0 comments:

Post a Comment