Latest News

3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script

Every blogger has their own reason to put read more or not on their blog, but most bloggers choose to make read more, either using auto read more or make it manually.

The Read More that I mean here is cut out the article (post) to a certain extent on the home page, label page and archive page.

There are 3 ways to create read more in blogger that we can do, they are:
  1. Make read more using jump break manually
  2. Make read more automatically without script using code from blogger
  3. Make read more automatically  using auto read more script for blogger
Well, those are the three ways to create read more in blogger that I will discuss at blogger tutorial this time.

Why do I discuss 3 ways to create read more in blogger?

As knowing these 3 ways, then we can consider, choose and decide which way we are going to apply on the blogger blog that we have, because each method has advantages and disadvantages itself.

Okay, let's start one by one
Every blogger has their own reason to put read more or not on their blog 3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script make read more in blogger.

At this method we don’t have to edit the blogger template that we use, this read more does not require it. It is because the tools we need are already available at the post editor blogger.

The Simple Ways to Create Read More On Blogger

Here are the steps you can do to create read more using this method
  1. Sign in to your blogger dashboard
  2. Create a post as usual until complete
  3. Determine the extent which you want to cut the post and then place the cursor there
  4. Click the icon Insert jump break, then you will see the boundary line, which means that the content of the post before the deadline that will be seen on the home, label page and archive page
  5. Lastly please click publish and please see the results on the home page of your blog.
Every blogger has their own reason to put read more or not on their blog 3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script
If your blog already has posts that has been published previously, then to make the read more on those posts please edit the post and add Jumbr ... to the extent that you want, then click Update Post.

Do the same ways to another posts until all posts have read more.

Note: If you, friends, use blogger template that was created with read more automatically, then this method will not work.

2. Create Read More With Automatic Thumbnail Without Script Use Code From Blogger

If the first way is manual step to create Read More, then the second way is how to create an automatic read more in blogger.

This means that if we use this way, then we do not need to create read more manually like the steps above, because all the post will automatically have read more, whether it is a new post or posts that had long published.

The Ways to Create Automatic Read More Without Script

The steps that we have to do to create read more thumbnail automatically are as follow:
  1. Sign into blogger dashboard
  2. Open Template page
  3. Backup your blogger template first, the ways: click Backup / Restore → click Download Full Template.
  4. Click Edit HTML, then we will be taken to blogger template editor page.
Every blogger has their own reason to put read more or not on their blog 3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script
On blogger template editor page please find the code
     <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> 
Which is not too far under the code <b:includable id='post'var='post'>, if you have found it, then please remove it, and then save template change.

Furthermore, please find the code <data:post.body/> which is not far below the code <b:includable id ='post'var ='post'>
Every blogger has their own reason to put read more or not on their blog 3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script
If you have found please replace the code with the entire code below
 <b:if cond='data:blog.pageType != "item"'>  <b:if cond='data:post.snippet'>  <b:if cond='data:post.thumbnailUrl'>  <div class=' post-thumb'>  <style type="text/css">. post-thumb img {float: left; margin: 0 10px 5px 0;}</style> <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' 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> 
Information :
  • <style type="text/css">.thumb img {float: left; margin: 0 10px 5px 0;}</style> : is CSS code that make thumbnail located on the left, please modifications as needed, if you don't like the position, you may move it or combine it to another css code were before </head> section of your blog template.
  • <img expr:src='data:post.thumbnailUrl'/> : is the code that will display images / thumbnails should be wrapped with the code <b:if cond='data:post.thumbnailUrl'> and </b:if> , so the code is basically like this:
 <b:if cond='data:post.thumbnailUrl'> <img expr:src='data:post.thumbnailUrl'/> </b:if> 
  • <data:post.snippet/> : is the code that displays a summary of the article content of post that should be covered by the code <b:if cond='data:post.snippet'> and </b:if>, so the code is essentially like this:
 <b:if cond='data:post.snippet'> <data:post.snippet/> </b:if> 
  • <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> : is the code to create Read More thumbnail, which must be wrapped code <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> and </b:if>, so the basic code is like this:
 <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </b:if> 
Lastly, please click Save Template button that is located at the top of the column blogger template editor.

How to change the thumbnail size of with javascript or jQuery

Default thumbnail on read more without script is 72px width and 72px height, and if you would like the thumbnail in different size, then you can change without or with pure JavaScript or you can also use jQuery.

How To Change Post Thumbnail Size Without JavaScript / jQuery

The first way that we can do to change the thumbnail size of blogger post is using code from blogger, ie <img expr:src='data:post.thumbnailUrl'/>

The thumbnail feature using code above actually is not a new thing in blogger, but recently blogger adds a little touch that can be used to resize post thumbnail by writing code / syntax template like this
resizeImage (url, size, ratio)
Example:
As we already know that the default size of thumbnail post blogger is 72 x 72 pixels, and we want to turn it into a 300 x 300 pixels, then we can use this syntax
resizeImage (url, size, ratio)
And we should write code like this
 <img expr:src='resizeImage(data:post.thumbnailUrl, 300 , &quot;2:1&quot;)'/> 
Or use this syntax
resizeImage (url, size)
And we should write code like this
 <img expr:src='resizeImage(data:post.thumbnailUrl, 300)'/> 

How To Change Thumbnail Size Using Pure JavaScript

To change the size of post thumbnail on the home page, label and archive then we can use the following JavaScript
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function resizeThumb(parentID, size) {     var parent = document.getElementById(parentID),         image = parent.getElementsByTagName('img');     for (var i = 0; i < image.length; i++) {         image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");         image[i].width = size;         image[i].height = size;     } } resizeThumb('main-wrapper', 200); //]]> </script> </b:if> </b:if> 
Copy the code above and then paste it before </ body> or </head>
The part that we must note in the script above is this
resizeThumb ( 'main-wrapper', 200);
main-wrapper is ID field posts, and 200 is a new thumbnail size. The code above will change the thumbnail size of 72 × 72 pixels to 200 × 200 pixels.

If the ID column of the post is a post-wrapper and you wanted to change the thumbnail to be 300 x 300 pixels, so you have to change the code becomes like this
resizeThumb ( 'post-wrapper', 300);

How To Change Thumbnail Size Using jQuery

To change the thumbnail size using jQuery, the first step is we have to add the jQuery Library on blogger template, the ways:

On blogger template editor page please add following jQuery Library before code </ head> or </ body>. The jQuery Library script is:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js/'>
If your blogger template already has jQuery Library then you don't need to add the jQuery script above anymore, and please go to the next step.

Once your template has jQuery Library script please add the following code before </ body>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function resizeThumb(el, from, to) {     $(el).each(function() {         $(this).attr({             'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),             'width': to, 'height': to         });     }); } $(function() {     resizeThumb('.post-thumbnail', '72', '200'); }); //]]> </script> </b:if> </b:if> 
The code part that you need to be noticed is this code
resizeThumb ('.post-thumbnails', '72', '200');
Information :
  • .post-thumbnail: is selector thumbnail area, please replace with selector thumbnail  area that corresponds to your template
  • 72: Was the original size of thumbnails (leave it alone)
  • 200: Is a new size for the thumbnails, which means from 72 pixels to 200 pixels changed. Please change as desired.
If you are finished, please click Save Template button.

3. How to Create Automatic Read More Using Auto Read More Script For Blogger

The third way about how to create read more in blogger is almost same with the second way, the difference is the third way use auto read more script for blogger, while the second method does not use script.

Steps to Create Read More Using Script

Here are the steps that you must be done to make auto read more in blogger using the script:
  1. On the blogger dashboard please open template page
  2. I recommend you to backup the blogger template first, the way: click Backup / Restore → click Download Full Template.
  3. Click Edit HTML, then you will be taken to blogger template editor page.
Look for code </ head>, and place the following auto read more for blogger script right on it
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px solid #E6E6E6; padding-bottom: 20px;}  .readmore a {text-decoration: none; } </style> <script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script "><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; }  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> </b:if> </b:if> 
The code above consists of CSS and JavaScript, please modify the CSS code that is between <style type = "text / css"> and </ style> as necessary.
Script part that need to be considered and modified as desired:
  • posts_no_thumb_sum = 490; → number 490 is a value that specifies the number of characters of text (summary) if the post does not have pictures
  • posts_thumb_sum = 400; → number 400 is a value that specifies the number of characters of text (summary) if the post has no image
  • img_thumb_height = 160; → 160 is a high-value size image
  • img_thumb_width = 180; → 180 is the value of the size of the image width
Up to this step you should save the template changes first, after that you can go to the next step.

Then look up the following code, and then delete the following code if there
     <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> 
The above code is in the <b: includable id = 'post' var = 'post'> and </b: includable>

Now find the <data: post.body/> not far under the code <b: includable id = 'post' var = 'post'>
Every blogger has their own reason to put read more or not on their blog 3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script
If you have got it, then please change the code with this code
 <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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>  <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span> </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> 
You also may replace the text Read More &#187; with another text you want.
It's completed and the tamat step click Save Template button.

0 Response to "3 Ways To Create Read More On Blogger: Manual - Automatic Read More With Script & Without Script"

Total Pageviews