How to Create an Automatic Page Break on Blogger

on

How to Create an Automatic Page Break on Your Blogspot Blog


In the default, Blogger has provided the simplest method in creating a pagebreak or read more function in Blogger post editor. As you can see on the top navigation bar of Blogger post editor, a new button with a “ripped paper” icon has been added to make a pagebreak function on articles, which later will manually cut the full body content of your new post and serve only the first paragraph on your blog homepage.

But if you look at some blogs across the blogosphere, the pagebreak on those blogs are already set up as an auto pagebreak, where you won’t need anymore to press the pagebreak icon in post editor in order to make a pagebreak function. Well, that was the reason why I decided to test drive this cool auto pagebreak feature on my testing blog. Out of the blue, I managed to make it worked in the second attempt on that testing blog. Interested to know the trick? Read on.
Before proceeding to the steps below, I just want to tell you that, I am currently using Minima template on my testing blog.  Okay, here you go.
1. Enter you Blogger account
Now head on to Blogger.com and sign in to your account.
2. Go to Edit HTML
In the Dashboard, pick out your blog and go to Design/Layout > Edit HTML.
3. Expand the widget template
When landing to the Edit HTML page, you will see a small box with the sentence “Expand Widget Templates”. Now press it.
4. Make a back up template
Okay, before making any attempt to edit your blog template, I strongly insist you to make a back up template, just in case if later, you want to revert back the template to the first condition.
5. Look around for the code
Okay, now let’s play around with the code template. By pressing Ctrl + F, now find the code below:
</head>
6. Stack a new script code
After locating the code on number 5 above, now copy the script code below and paste it above the code </head>:
<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>
  <script type='text/javascript'>

var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 530;
summary_img = 440;
img_thumb_height = 180;
img_thumb_width = 180;
</script>
7. Find the blog post code section
Press Ctrl + F again and search for the code section that controls the occurrence of blog post on the homepage below:
<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>


Include Yes/No

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
8. Replace the code section
Okay, this is the trickiest part from the whole steps. After locating the whole code sections on number 8 above, now block those code sections and then replace it by using the new code sections below:
<div class='post-header'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUkShfZUsXo4SzZ-D45BcwfS8QRtQCW-mCfpc-50Y5pFIv9D1MOe5KAFL-RaH8RzZEr6RSWAWxlur7ydEeN7UfAktJw9UbqqEjN2UJXcOMeO5OHdlKHER_ZUsPql6SxAqaizuWZ7qxz_o/s1600/date.png'/><data:post.dateHeader/> | <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZyhuYafVyStaoWgTlAb6YCl0sdzPfj_39cN7GP42gClDM3u1UxU4pkf-nIhYneDJGsONkF4AuFGL3ykyBVe-Zm3rNIATKgITVi0drIu2641yBBcW5mlzt19qO6kN9VnH_oDUGkcDqbcs/s1600/user.png'/>       <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span></div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='post-body entry-content'>
      <div expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>
<div class='singleinfo'>
<div class='readmore'> <b:if cond='data:blog.pageType != &quot;item&quot;'><a expr:href='data:post.url'>Read More</a>
</b:if></div>
</div>
9. Save the template
Okay, you’re done. Now save all the changes of your blog template and see the result.
As you can see on your blog, without the pagebreak function from Blogger, all of your latest posts on the homepage will automatically appear in half, and only the first paragraph will be displayed to your blog.
What do you think? Is this pagebreak trick working or not? Got any problem implementing this pagebreak on your blog, feel free to leave your question below, and let me help you with that.

Comments

Post a Comment