New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:

Adding Read More To Blogger Updated Version!

As you read my previous tutorial on adding read more with thumbnails to blogger you found it difficult how to adjust the texts and the size of the image thumbnail. Now in order to answer that question, I made another version of it wherein you can customize the number of words or texts and the thumbnail size.

Adding Read More To Blogger Updated Version!

Step 1.  Log-in to your Blogger Account (if you have not).
Step 2.  Go to Blogger Dashboard and click Template button (back-up your template and store it an a safe place for your reference).
Step 3.  Hit the Edit HTML button.
Step 4. In the Blogger Template Editor's page, look for the tag below
Step 5. Just above the tag in step 4., paste the following code
<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
<script type='text/javascript'>

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;


Customization of the above code

  •  The number in red color (250) signifies the number of characters to display when there is no image.
  • The number in orange color (200) designates the number of characters to show when there is an image.
  • The number in light blue color (150) denotes the height of the image being displayed. 
  • And the  number in dark blue color (150) implies the  width of the image.
You may increase or lower the above numerical value as you want!

Step 6. Now look for the next tag below and delete it

Note: Choose the second occurrence of the code.

Step 7.  Replace the tag in step 6 with code below
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<>");</script>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>

  • The bold texts above are condiotional tags in order to hide this widget in your static pages and post pages.  Click here  for the tutorial if you want to hide this widget  in your archives.

  • Change the texts Read More with any other word or phrase like 'Continue Reading' or 'Show More>>'.
  • Change the position of the text Read More from right to left by simply replacing the texts 'right' in the fifth line from the buttom of the above codes.
Step 8. Click Preview to see the initial effect then hit the Save button. See your home page now with its new appearrance.
Have a Blissful Day and Enjoy!
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...