Saturday, November 05, 2016

How to add Auto Read More with thumbnail to Blogger Posts

Unlimited Tutorial Last Bus Stop. Today i will be sharing with you how to add Read more to blogger post, When i starting blogging as a novice blogger then, Each time i make any post, The post will just display like that, it was very hard for my Reader to navigate to all my post, Because the have to scroll and scroll, As a Novice blogger then i didn't know what to do. Thank God for my friends then that helped me, Today i can design and Add READ MORE to any blogger template. Am sure By the end of this post you as well will learn how to do the same thing as the procedure is not hard.

Check Also: How to Block Spam Comments in Blogger

Step One
Note: before you make any changes on your templates, always make a back up of it.
Login in to your blogger account, then navigate toTemplatesection of your blog .
Then search for this tag:Then search for this tag: </head> . Use Ctrl F on your keyboard to search for it. Use Ctrl + F on your keyboard to search for it.
Now place the code below above the tag in your templates:

Check Also: How to Disable Copy and Paste in Blogger Posts

[<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 120; img_thumb_width = 140; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTagundefinedstrx,chop){ ifundefinedstrx.indexOfundefined"<")!=-1) { var s = strx.splitundefined"<"); forundefinedvar i=0;i<s.length;i++){ ifundefineds[i].indexOfundefined">")!=-1){ s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length); } } strx = s.joinundefined""); } chop = undefinedchop < strx.length-1) ? chop : strx.length-2; whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++; strx = strx.substringundefined0,chop-1); return strx+'...'; } function createSummaryAndThumbundefinedpID, pURL, pTITLE){ var div = document.getElementByIdundefinedpID); var imgtag = ""; var img = div.getElementsByTagNameundefined"img"); var summ = posts_no_thumb_sum; ifundefinedimg.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><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>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <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 dotted #E6E6E6; padding-bottom: 20px;} .readmore a { background: none repeat scroll 0 0 #B44444; color: #ffffff; display: inline; font-size: 15px; font-weight: 400; line-height: 14px; margin-right: 12px; padding: 2px 5px !important; text-decoration: none; text-indent: 0; text-transform: uppercase; position: relative; top: 20px; } .readmore a:visited { text-decoration: none; color: #9c4d46; } .read more a:link { text-decoration: none; color: #b44444; } </style> </b:if> </b:if>]
summary_noimg = 430; this code will decide how much characters must be shown in the post.

summary_img = 340; If the post contains image, then this code will decide how many characters must be shown in that post.

img_thumb_height = 100; this tag decides the height of the thumbnail to be shown in the post. Vary the number 100 to suit your template

Check Also: How to Build Quality Backlinks in 2017

img_thumb_width = 120; This tag decides the width of the Thumbnail image to be shown.

That is Not all just one more step remaining and you are Done with your Read more Hack

Check Also: Advanced Social Sharing Buttons Just Below all Post in Blogger

Step 2: Now find


Using CTRL+F

NOTE; That we have Two in your template, So if you put the link in the First one is not going to work. So look for the second One. Don't worry how to find the second one i will tell you. In your Blogger template click the first Three Black Arrow, There you will see the Second
After finding your second 

Image result for data:post.body

  1. <data:post.body/>
  replace it with the codes 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.body/></div> <script type='text/javascript'>createSummaryAndThumbundefined&quot;summary<>&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 can now preview your template and then save it.
How to add Auto Read More with thumbnail to Blogger Posts
4/ 5

Subscribe via email

Get our latest updates straight to your inbox.