How To Add Auto Read More Script With Thumbnails To Blogger Blogs


How To Add Auto Read More Script With Thumbnails To Blogger Blogs, Blogger, Blogging, How Tos, Tutorials,
By adding the Automatic Read More Hack or Automatic Read More Script to your blogger blog will make the home page of your blog look more professional and organised. This trick am about teaching you will show the title of the post, a short summary of the post and a thumbnail (photo), the photo will be the first photo uploaded in the post. Then, there will be a Read more or Continue Reading link which when clicked will take you to the entire post.
Now to add this to your blogger blog...

=====>  Login to your Blogger Dashboard, go to Template, Back Up your Template and click on Edit HTML.

=====> Click anywhere inside the template and find the code highlighted below using CTRL + F

<data:post.body/>
After hitting the Enter key and you will find this code more than one, please stop at the third one.

=====> Now replace the code above with the one 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.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>

If you did not notice any changes after applying the above code, kindly replace the second <data:post.body/> tag too with the code above

====> Now search for the </head> tag in the template and paste the code below immediately above it.

<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="'+ 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>' + removeHtmlTag(div.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 {text-decoration: none; }
</style>
</b:if>
</b:if>

====> Now this is where the main tweaking comes from, to change the number of characters shown on the homepage there is no thumbnail (photo) modify the 490 value in red, to change the number of characters shown on the home page when there is a thumbnail or photo in the post, modify the 400 value in red and if you want larger or smaller thumbnails, modify the 160 (height) and 180 (width) values in yellow.

READ ALSO:  How To Transfer Money From UBA To Another Bank Using Umobile App

=====> Now click on Save Template, view your blog and see how the change has taken place.

That's it, I hope this helps?

Kindly subscribe to the blog to receive my latest updates and don't forget to share it with your friends using the share buttons.

Thanks for reading my first post of year 2016.



Comments

  1. Thanks admin, av already done that for my blog. Demo @ Entclass.com

    ReplyDelete
  2. thank you sir i have done that already i think i will be good for new bies

    ReplyDelete
    Replies
    1. Sure it will, thanks for your visit.

      Delete
  3. seriously I never knew u r good in tech blogging also. the next time I will create blog for a client I will try this out.

    ReplyDelete
    Replies
    1. Thank you bro, am just trying my best.

      Delete
  4. I still battle with that on my test blog on BlogSpot which I created for practice as I am more familiar with wordpress. Bookmarked though, cos I planned knocking back here whenever I get stocked. Make sure you don't get tired of me

    ReplyDelete
    Replies
    1. I will always be here bro, thanks.

      Delete
  5. I thought it was a new tweak.
    Any good template ought to have auto read more. This made it easier for those using phone to blog.

    ReplyDelete
  6. Good one here, buh in my blog i dont use auto read more, i do it manualy... I enjoy doing it like that, but this will be nice for those that want it auto, so as to forget about adding it when writing a post..

    ReplyDelete
  7. Have been searching and looking for a way to this,thanks for Sharing.

    ReplyDelete
    Replies
    1. You're welcome and thanks for reading my blog Rukayat.

      Delete
    2. I've tried to implement it on my blog but it's not working. I've a single line in my blog's HTML. Is d code meant for read more in the mobile view or the web view? (www.pepetimsblog.com)

      Delete
  8. thanks. have tried codes from other sites but only yours did the work for my blog @ www.naijasphere.com. thanks

    ReplyDelete
  9. Thanks for this post. But how can I customize my desktop view read more button. I guess this write isn't working for my blog ajetomsblog.com

    ReplyDelete
  10. really powerful hack, thanks for sharing

    ReplyDelete
  11. thank you guy, your tweek worked for me, bluegistsdaily.blogspot.com

    ReplyDelete
  12. Oga Akpene, I have this issue now, actually it is because I removed my templates copyright attribute.

    I did it successfully without making my blog redirect to the source but the real quanta now be say, There is no more a read more options in MA blog, like the summary sth, but it now displays everything at once.

    And the template already has these things your showing me in these post, like the html codes, so please how do you think I can change it. Here's ma blog url.

    Cartguide.blogspot.com.ng, Thanks man!.

    ReplyDelete
    Replies
    1. Its like when you were removing the copyright attribute you mistakenly removed the Read more script too.

      so if you cant be using the normal jump break, you can follow this tutorial to add it back or you can upload the template again and remove the copyright attribute but be more careful so you don't remove the read more script again.

      Thank you for reading.

      Delete
  13. Thank's for the tutorial bro +Akpene Jacob, see my blog so better.

    ReplyDelete
  14. please the code isn't working for me .....please help globalstreakads@gmail.com inbox me please. thanks

    ReplyDelete
    Replies
    1. what did you mean the code did not work for you?

      Delete

Post a Comment

I love to hear from you, your comments strengthen me to write more, give me more of them so that I can write more.