Optimizing Headlines for Latest Blogger Topics

Team TeachWiki

I wrote earlier about optimizing headings in Blogspot (Blogger) templates in Customizing h1, h2 and h3 Blogger Themes . However, this article can only be used when customizing older themes, newer (latest) Blogspot themes optimize a bit differently, which is why I'm writing this article.

This guide is written on the example of modifying the Notable, Emporio, Soho and Contempo themes.

Initial data:
  1. On the main page of these topics, in the h1 heading - the name of the blog (we will not fix this), article titles - in the h3 tag, widget titles - in h3.
  2. On the post pages - in the h1 tag - the title of the blog, h3 - the title of the post and the title of the widget.
After transformations:
  1. On the main page - the title of the blog in h1, the titles of the articles - in h2, the titles of the widgets will be left in h3.
  2. On the post pages, the blog title is in the h2 tag, the article titles are in the h1 tag, and the widget titles are in the h3 tag.
Course of action:
  1. Make sure you back up your theme before making any changes!
  2. Find this snippet of code in the Blog Template: <b:include name='super.title'/>

    3. This tag is included in the code:

    <b:includable id='title'>
           <div>
             <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
             <b:include name='super.title'/>
           </div>
         </b:includable>
  3. Replace the <b:include name='super.title'/> code with the code below:
    4.  <b:if cond='data:view.isPost'>              <h2><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>              <b:else/>              <b:include name='super.title'/>            </b:if>
  4. The <b:include name='super.title'/> code appears twice in the blog template. Replace it in the theme with the above code twice.
  5. Now let's start optimizing the titles of the blog articles .
    • If you have an Emporio theme , then find the <h3 class='post-title entry-title'> code snippet, it is enclosed in a code snippet:
      •  <a expr:name='data:post.id'/>
             <h3 class='post-title entry-title'>
               <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                 <a expr:href='data:post.link ?: data:post.url'>
                   <div class='snippet-container r-snippet-container'>
                     <div class='r-snippetized'>
                       <data:post.title/>
                     </div>
                     <b:if cond='data:post.title != &quot;&quot;'>
                       <div class='snippet-fade r-snippet-fade hidden'/>
                     </b:if>
                   </div>
                 </a>
               <b:else/>
                 <data:post.title/>
               </b:if>
             </h3>
      Replace all this code with: 
      <b:if cond='data:post.title'>
                     <b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h2>
                       <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
  </h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <data:post.title/>
     <b:else/>
        <b:if cond='data:post.url'>
         <data:post.title/>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h1></b:if>
                    </b:if>
    • If your blog theme is Notable, Soho or Contempo then also find the <h3 class='post-title entry-title'> code snippet, it will be wrapped in the following code:
      • <b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
      Change all this code to the following: 
      <b:if cond='data:post.title'>
                     <b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h2>
                       <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
  </h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <data:post.title/>
     <b:else/>
        <b:if cond='data:post.url'>
         <data:post.title/>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
</h1></b:if>
                    </b:if>

    6. Attention! The <h3 class='post-title entry-title'> code may appear multiple times in recent blog topics. To make it work, do the code replacement as many times as the <h3 class='post-title entry-title'> code occurs. Widget titles are wrapped in h3 tags, so we leave them as they are.

Comments