Find info about electronics prices, discounts, top deals in link, like US below.

Adding Summary read more with thumbnail in blogger


To adding that our blog looks interesting and certainly easier for visitors, we can add some widgets or anything else, one of them is add a summary and read more with thumbnails on our blog so that when we will show 2 or more pages in the first post or home in it will look more attractive more simple and not too long until down.
Sample images and read more Summaries thumbnail for blogger or blogspot.
summary-readmore thumbnail


Here this step to adding Summary read more with thumbnail :

1. Log in to your account blog.
2. Go to you design and edit html check Expand Widget Templates :
design for blogger

3. Find this code </head> and copy this code below before </head> :
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 125;
</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_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 : the red text above can be changed with the size of the image and text to be displayed to your liking, respectively.

4. Then find this code <data:post.body/> and replace with the following code below :
<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><a expr:href='data:post.url'>Read More......</a>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>

5. Save template.
See your result.. good luck...!


Description: Adding Summary read more with thumbnail in blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Adding Summary read more with thumbnail in blogger

Posted by: Zein Okeh Share Everything, Updated at: Tuesday, November 22, 2011

1 komentar:

fce6ee7e-3a00-11e1-9453-000bcdcb8a73 said...

I like the new scripting method for comment XML!

Post a Comment

Sorry if my english is bad

Related Posts Plugin for WordPress, Blogger...
Powered by Blogger.