Different Post title heading format on different Pages for your Blogspot(Blogger) Blog

You should have seen that here in greenTechspot we have different Post title format on different pages, namely different for Home page and archive page and different for individual page. Take a look at the following image. Today I am going to share the Hack I did to make such cool formatting. This hack is not very tough but requires patience and a little bit of knowledge about CSS, which we are going to discuss. So please read on.

Ok! So now that you have decided to learn this let us straight move to the point. We are splitting the article on two part 1. Coding part and 2. Designing Part. Follow each part carefully

1: Coding Part:

• Goto your Blogger.com account ► Dashboard ► Layout ► Edit HTML ► Click Expand Widget Template
• Now search for the code
  <h3 class=’post-title entry-title’>
  
  <b:if cond=’data:post.link’>

  <a expr:href=’data:post.link’><data:post.title/></a>

  <b:else/>

  <b:if cond=’data:post.url’>

  <a expr:href=’data:post.url’><data:post.title/></a>

  <b:else/>

  <data:post.title/>

  </b:if>

  </b:if>

  </h3>

  If you are having any trouble finding it then simply search for [Ctrl+F] <h3 class=’post-title entry-title’> . Take a look at the following image

• Now replace the whole thing by the following code
  <!– Start custom header code http://www.intechgrity.com –>
  
  <b:if cond=’data:blog.pageType == &quot;item&quot;’>

  <h3 class=’innerpage’>

  <b:if cond=’data:post.link’>

  <a expr:href=’data:post.link’><data:post.title/></a>

  <b:else/>

  <b:if cond=’data:post.url’>

  <a expr:href=’data:post.url’><data:post.title/></a>

  <b:else/>

  <data:post.title/>

  </b:if>

  </b:if>

  </h3>

  <b:else/>

  <h3 class=’frontpage’>

  <b:if cond=’data:post.link’>

  <a expr:href=’data:post.link’><data:post.title/></a>

  <b:else/>

  <b:if cond=’data:post.url’>

  <a expr:href=’data:post.url’><data:post.title/></a>

  <b:else/>

  <data:post.title/>

  </b:if>

  </b:if>

  </h3>

  </b:if>

  <!– End custom header code http://www.intechgrity.com –>

  Note this example and codes are based on a Minima Template. If you are using any custom template then you need to understand the template. What we are doing is inserting conditional h3 classes on item pages [ie individual post pages] and Home/Archive/Label Pages.

• Save your template. You should not be having any problem here. If you find any problem then revise the process and repeat the procedure after clicking on “Clear Edit” button. If still the problem exists then you may ask us through comments

2: Designing Part:

Now we are going to design the separate heading. Follow these steps:

• Search and Find .post h3 { and under this style delete color:$titlecolor; from there [If present]. Take a look at the image below
• Now search for
  .post h3 a, .post h3 a:visited, .post h3 strong {
  
  display:block;

  text-decoration:none;

  color:$titlecolor;

  font-weight:normal;

  }

  .post h3 strong, .post h3 a:hover {

  color:$textcolor;

  }

  Or something similar to this. What ever it may be completely delete them and replace them by

  /* Header customization CSS http://www.intechgrity.com*/
  
  h3.innerpage, h3.innerpage a, h3.innerpage a:visited, h3.innerpage strong {

  display:block;

  text-decoration:none;

  color:#4A4755;

  font-weight:normal;

  /*Other CSS styles*/

  }

  h3.innerpage a:hover { /*when u hover you mouse on the heading*/

  color: #990000;

  /*Other CSS styles*/

  }

  h3.frontpage, h3.frontpage a, h3.frontpage a:visited, h3.frontpage strong {

  display:block;

  text-decoration:none;

  color:#990000;

  font-weight:normal;

  /*Other CSS styles*/

  }

  h3.frontpage a:hover { /*when u hover you mouse on the heading*/

  color:#4A4755;

  /*Other CSS styles*/

  }

  /*End Header customization CSS http://www.intechgrity.com*/

• At this level you have style up your own headings. Style definition under h3.innerpage will get applied over the heading of individual pages and h3.frontpage will get applied over the index pages. Use your own creativity and imagination to style them up. Here are some tip and ready made CSS code which you can add before the line /*Other CSS styles*/
  border: 1px solid #4F4F57;
  
  background: #26242A;

  margin: 10px;

  padding: 10px;

  and so…. You can learn about them in the div element post @ greenTechspot or you may want to look w3schools CSS references. [Both of them are free]

That’s it! If you have liked this post and want to share then please feel free to do so by using the Social Bookmarking icons at the end of this post! Also you can grab the RSS feed from there to get newer updates. And remember, Your comments are really precious to us…