Full Blog Posts on Notable Theme's Homepage in Blogger Blogs

Post written by
In the new themes the page break in post editor is just for the name as the themes auto-truncates the posts and shows snippets and a preview thumbnails only on the homepage. Page break / Jump break is good only for feeds now.

There is no setting to make the theme show full posts on the home, index and archive pages and that is why we feel the need of writing this tutorial.


Previously on StramaXon we published a tutorial to show how it was done on Contempo theme, this tutorial will guide you through the steps to achieve the same with Notable theme, so if you are a Notable Theme user in Blogger then follow the steps given below to get your blog posts to show up as full.

Important: As with all of our tutorials where we are supposed to touch the theme code it is highly recommended that you take a backup of your current Blogger theme.

Video walk-through. 

We've prepared a video tutorial of the same so you can watch it and follow the steps with more ease. 

Link to the video tutorial.



Editing the XML / HTML Code in Theme

  1. Open a new tab in the browser and Log-into your Blogger Dashboard
  2. Go to the Theme   section
  3. Click on "Edit HTML"
  4. When the Theme code editor opens, focus into the code editor and hit CTRL + F / CMD + F to open the in-page search
  5. Look for the following line of code|

    <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>

  6. Upon searching you will get the result like this,



  7.  Copy the following HTML / XML markup

    <b:if cond='data:widget.type != &quot;PopularPosts&quot;'>
  <div class='post-body-container'>
  <b:include data='post' name='postBody'/>
  <div class='post-sidebar invisible'>
    <b:with value='data:widget.instanceId + &quot;-normalpostsidebar-&quot; + data:post.id' var='sharingId'>
      <b:include cond='data:post.shareUrl' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
    </b:with>
    <b:if cond='data:post.labels and !data:post.labels.empty and data:this.allBylineItems.labels'>
      <div class='post-labels-sidebar'>
        <h3><data:messages.labels/></h3>
        <b:include data='post' name='postLabels'/>
      </div>
    </b:if>
  </div>
</div>
  <b:else/>
 <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>
</b:if>
  8. Go back to the theme editor where we previously found the line of code from step 5. Replace that line of code with the code you just copied. This is what it the XML code should look like when you have replaced it.


  9. Now click on "Save theme" to save the changes and go to your blog to see the change. The posts should now appear full on all the pages. 

You may have noticed that the "Read More" button is still there even though the post shows up full, it's because the Jump link is added by another code that we didn't touch yet and it isn't even necessary, we will be using CSS to simply hide the links.

CSS to hide the Jump Link

This CSS snippet should hide the "Read more" links from the posts on home, archive and index pages.
.widget.Blog .jump-link {
    display: none;
}

Here's a complete guide with screenshots on adding CSS in Blogger blogs

  1. Log-into your Blogger Dashboard
  2. Go to the Theme   section
  3. Click on "Customize" 
  4. In the Theme Designer go to Advanced > Add CSS
  5. Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right
Refresh your blog to see the changes live on your blog.

Showing full blog posts on other new themes

The same can be done on other themes and here are the links for the tutorial to do it on other new Blogger theme(s)