OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Advertise With Us
  • Newsletter
Facebook Twitter Instagram
Oscarmini Oscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
OscarminiOscarmini
Home»Blogging»How to Add Read More and Excerpts to Blogger
Blogging

How to Add Read More and Excerpts to Blogger

Oscar FrankBy Oscar Frank2 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

Adding the Read More button and Excerpts to your blogger blog makes your blog look neat and organized. On default, when you visit any blogger blog, all posts are displayed on the home page in full, but with this tip I’m about to show you, you can add excerpts (a summary of the post) with a Read More Link to the main post just like the image shown below.

how to add excerpts and read more button to blogger

Follow this guide and you’ll have your excerpts, thumbnails and Read More button link running in less than 5 minutes.

How to Add Read More, Thumbnails and Excerpts in blogger

  1. Log in to your blogger dashboard, now click on the drop down button next to the blog you wish to add this function, then click on Template
  2. Now click on Edit HTML >> Proceed. Now tick the Expand Widget templates checkbox
  3. Click Ctrl + F and search for </head> , now immediately before this paste the code below
     <script type=’text/javascript’>var thumbnail_mode = “no-float” ;summary_noimg = 300;

    summary_img = 350;

    img_thumb_height = 200;

    img_thumb_width = 300;

    </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){

    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;

    }

    //]]>

    </script>

     

  4. Now press Ctrl + F and search for <data:post.body/> , now replace with the code below
     <b:if cond=’data:blog.pageType == &quot;static_page&quot;’><br/><data:post.body/>

    <b:else/>

    <b:if cond=’data:blog.pageType != “item”‘>

    <div expr:id='”summary” + data:post.id’><data:post.body/></div>

    <script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);

    </script> <span class=’rmlink’ style=’float:right;padding-top:20px;’><a expr:href=’data:post.url’><img alt=’Read More’ src=’http://4.bp.blogspot.com/-sLjgxDHhjKg/UJQp9DCXSXI/AAAAAAAAAIg/UxvPNI4klq8/s1600/brown.gif’/></a></span>

    </b:if>

    <b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>

    </b:if>

     

  5. Now click on Save Template, and view your blog. That’s it.

Hope you enjoyed this blogger tip. If you encounter any problem on this, feel free to use the comment box to ask your questions.

Get the most important happenings in your inbox weekly

Blogger tips blogging programming

Related Posts

Common Mistakes Newbie Developers Make and Solutions

March 23, 2021

5 Best Gadgets For Hobby-Bloggers In 2023

March 3, 2021

5 Best Writing Software And Gadgets For Writers In 2023

January 14, 2021
View 3 Comments

3 Comments

  1. samuel kelechi blog on November 3, 2013 1:04 am

    Thanks for the post, but bro the thing not working for me. what do i do… done everytin you said but yet not working

    Reply
    • Oscar Frank on November 6, 2013 7:17 am

      Really Samuel,
      Sorry for the late reply. I recently used this on one of my new blogger blogs. I’ll check the javascript if it’s still functioning and let you know about that.

      Reply
    • Oscar Frank on November 6, 2013 7:19 am

      Hi Kelechi,
      I just checked this and it still works. I guess you missed the where you were supposed to add the codes. Please recheck your template.
      Thanks.

      Reply

Leave A Reply Cancel Reply

Latest Posts

Curacel, a Nigerian Insurtech Startup, Raises $3 Million

February 17, 2023

Google Redesigns and Upgrades Gboard Toolbar

February 16, 2023

Internet Explorer to be Permanently Disabled

February 16, 2023

iPhone 15 Pro to Feature Thinner Bezels

February 16, 2023
Get the best African tech newsletters in your inbox
Oscarmini
Facebook Twitter Instagram YouTube
© 2023 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.