blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

2 ways to add read more with thumbnails on blogger

Adding read more on blogger may further be tweaked by inserting thumbnails next to it. This can be done in two ways. WITH JAVASCRIPT, and WITHOUT JAVASCRIPT.


add read more with thumbnails with and without javascript


Technique #1. Read More with Thumbnails USING Javascript.
Pros.
-post snippet length may be customized based on your preference
-thumbnail size (width and height) may be changed based on your preference
-no need to place image before the jump break just to generate thumbnail

Cons.
uses javascript, thus
-it doesnt work if javascript is disabled on user's browsers
-the extended coding brought by the script may cause the site to slow down, and
-it is not search-engine friendly.

In this case, we'll use Greenlava's hack to add post summaries with thumbnails where it uses this script placed before </header>:

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
	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>
<!-- Auto read more script End -->


and these lines of code to replace <data:post.body/>

<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->


To learn more about this hack and how to customize the snippet length and thumbnail size, check out Blogger Sentral's auto read more with thumbnail hack.



Technique #2. Read More with Thumbnails WITHOUT Javascript.
Pros.
-no need at add jump breaks on every post as it automatically creates post snippet
-automatically generates first image as thumbnail
NO JAVASCRIPT NEEDED thus
-cross browser compatible
-faster page loading
-more search-engine friendly

Cons.
-thumbnail width and height dependent on blogger's default thumbnail size which is 72px by 72px.
-post snippet length dependent on blogger's default length summary which is about 20 words including the word "read more >>"
-thumbnail does not work if the only content before the jump break is an image.

View demo.


This hack from Blogger Buster involves:
(1) replacing codes in the template from

<data:post.body />


to

      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>


(2) and including the below CSS property to properly align the thumbnail to the post snippet.


.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}


View her full tutorial.


If you're using a template from Blogger's Template Designer, a neater code would be to:
1. search for:

<data:post.body/>


2. find this block of codes, highlight them.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if >


3. replace the entire block with the whole block of codes below:

   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>


  the highlighted lines came from Blogger Buster.

how to add read more with thumbnails no javascript


Other "Read More" Tweaks.
3 ways to add "read more" on blogger
customize "read more" on blogger
show only post titles on blogger homepage
post titles with thumbnails on blogger


Related Blogs.
Blogger Auto Read more with thumbnail
Easy Post Summaries and Thumbnails for Blogger Blogs.
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 4 Shared Thoughts >>


Bojan
December 11, 2011 at 10:02 AM

How do I see Thumbnail WITHOUT Javascript size 200x150px not 72px-center?
Thank you...

David Kutcher
July 30, 2012 at 9:48 AM

I used to use that same script until I got fed up with the way it messed up the proportions of the thumbnails and had limited customization opportunities. Instead we created our own script that does a MUCH better job of it

website design
November 19, 2013 at 10:31 PM

Blogs with thumbnails in the first page or the home page looks good and makes you show more posts with summary on your home page.
website design

Sqiar BI
December 31, 2013 at 3:32 AM

Thanks for the post, In this complex environment business need to present there company data in meaningful way.So user easily understand it .Sqiar (http://www.sqiar.com/why-data-visualization/) which is in UK,provide services like Tableau and Data Warehousing etc .In these services sqiar experts convert company data into meaningful way.

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.