Easy Ways To Make Auto Read More With Thumbnail In Blogspot/Blogger

A whole post is too long that takes place on the main page sometimes makes visitors feel impatient. Though they wanted to see a list of other post below. Visitors do not want to know about this, though perhaps in the sidebar of the page there is a list of navigation for posts, categories, and others that can take guests to the title of the post or other topics. However, not all visitors can observe these features.

This makes a lot of our other posts unreadable. If read, it's just who is in the main page only. And chances are visitors will soon run after reading one (or at least some) of our posts on the main page. To resolve this problem, they invented the readmore link will take visitors to a page full post after they read a few lines below the post title.

Easy Ways To Make Auto Read More With Thumbnail In Blogspot/Blogger:

1. Sign in to dahsboard Blogger >> Design >> Edit HTML.
2. If the blogger has completed the first script auto readmore, remove, use of guide posts to auto readmore know anywhere that should be removed.
3. Copy-paste the following script right BELOW </ head> (use Ctrl + F):

<! - DC Auto Start Script Read More ->
<script type='text/javascript'>
thumbnail_mode var = "yes"; / / yes-with thumbnail, thumbnail no-no
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 [
removeHtmlTag function (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.substring strx = (0, chop-1);
strx + return '...';
}

createSummaryAndThumb function (pid) {
var div = document.getElementById (pid);
imgtag var = "";
var img = div.getElementsByTagName ("img");
var summ = summary_noimg;
        if (thumbnail_mode == "yes") {
if (img.length> = 1) {
  imgtag = '<span style="float:left; padding:0px 5px 10px 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>
<! - DC Auto Script End Read More ->

The red is the number and size of the display, summary_noimg = number of characters without an image, summary_img = number of characters in the picture, and img_thumb_width whereas img_thumb_height is the image size (in pixels). Change your liking.

3. Then find <data:post.body/> (use Ctrl + F), and REPLACE with:

<! - DC Auto Start Read More ->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" data:post.id'> <data:post.body/> + </ div>
<script type='text/javascript'> createSummaryAndThumb ("summary <data:post.id/>");
</ Script>
<a class='more' expr:href='data:post.url'> Read More >> </ a>
</ B: if>
</ B: if>
<! - DC Auto End Read More ->

Customization:
Read More >> Replace with desired words .

4. Preview first, then save.

Make readmore in blogger (Features original default Blogger,)
In the new post page / new post, there are some control panels writings such as fonts, font size, alignment, font color, background color, and others-others, one of which again is a 'jump break'. Panels that function as limiting your posts on the main page and it will bring up readmore. Lies precisely in the column panel containing the 'Link', and so on. 'Jump Break' is in the position of the rightmost column of the panel, the visual appearance is as shown in light blue paper and divided into two. Click on the picture and the long flat box will appear grayed out. You can slide it in such a way as to put on the line you want.

Posted in: Blogger Design,Blogger Layouts,Blogger Tools,Blogger Tricks,Blogger Tutorials