OscarminiOscarmini
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
Oscarmini Oscarmini
Subscribe
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • 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
Facebook Twitter WhatsApp LinkedIn Email
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.

Blogger tips blogging programming
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Oscar Frank
  • Website

A Nerd who blogs, makes music, Video-graphs, writes #codes and LOOPS the whole process for a living. Yeah! That's me. I'm on Facebook, Twitter or Instagram

Related Posts

Common Mistakes Newbie Developers Make and Solutions

March 23, 2021

5 Best Gadgets For Hobby-Bloggers In 2022

March 3, 2021

5 Best Writing Software And Gadgets For Writers In 2022

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

5 Best Office Wi-Fi Routers In 2022

May 24, 2022

Best Silhouette Machines In 2022

May 24, 2022

5 Best Filter Coffee Machines In 2022

May 24, 2022

Itel Releases P38 Series With 18w Fast Charging

May 23, 2022
Oscarmini
Facebook Twitter Instagram YouTube
© 2022 Oscarmini Co. Designed by illBytes.

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