Home
Blogger

Add a Strikethrough behind Blogger Blog Post Title

Add a Strikethrough behind Blogger Blog Post Title
custom post title

In some Blog designer use strikethrough in different part of Blogger Template. Mostly can be seen on Sidebar, Footer or different widget title. You will see in some Blog's post divider used strikethrough for  beautifying the template. This design is really awesome. In this tutorial I will show you how we can add in Blogger Blog Post title. However I have tested this code in Default Blogger template only. To make in work in custom Blogger template you have to modify the code. Please follow the below tutorial for adding beautiful strikethrough on Blogger's Blog post title.


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>  by pressing Ctrl+F  

Step 4 And paste the below code above/before  ]]></b:skin> 

h3.post-title::before {
border-top: 2px solid  #4D4D4D;
margin-top: 10px;
content: " ";
position: absolute;
left: 0;
right: 0;
z-index: 0; }
h3.post-title span {
background: #FFFFFF;
padding: 0 20px;
position: relative;
z-index: 1 !important;
margin: 0 auto; }
.post-title.entry-title { text-align: center; text-transform:uppercase; }

Customization

  • Changes #4D4D4D for the border color
  • Alter #FFFFFF for changing the text background color for covering the line.
Step 5 Now Find this code <h3 class='post-title entry-title' itemprop='name'> by pressing Ctrl+F. Total code will be like below-

<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Step 6 Now Paste the below code after <h3 class='post-title entry-title' itemprop='name'> this line.

<span>

Step 7 And again paste the below code before/above </h3>

</span>

For example the whole code block will be like below---
<h3 class='post-title entry-title' itemprop='name'>
<span><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</span></h3>

Step 8 Finally hit the Save Template button and check the template to see the effect.


post title

Actually this code work in Blogger default template. If you want to make it work in Custom template then you have to have some knowledge about coding. In some template, in case of Post title instead of h3 generally use h2. So in that case you have to change h3 to h2. There are also another think you might have to take into consideration that <h3 class='post-title entry-title' itemprop='name'> code won't be exactly similar in all template coding. So just focus on <h3 class='post-title this line and find the code. And obviously you can bring dramatic change by changing CSS code.

7 comments

  1. hey bro hard tutorial not work :((
    • Hi There, this widget will work on Blogger default and custom template. But you are using MegaMag Blogger template which already has custom code for H3 :t
  2. This is not working on my blog :(
    • If your Blog containing custom heading and subheading then this won't work. First you have to remove the custom code. for example the script start with

      .post h3{.....}

      or

      .post h4{.....}
  3. SIR I have problem blog post title not indexed but url is -but just index hoimepage Title ...please tell me how can i fix this error
    • Hi, I think you have problem in sitemap. Please remove the sitemap form Google Search Console and resubmit it again. You can follow below tutorial to do this.

      https://www.bloggerspice.com/2016/08/submit-static-pages-sitemap-to-Google.html

      Also follow below tutorial for quick indexing the blog content.

      https://www.bloggerspice.com/2019/04/google-url-inspection-tool.html

      I hope both tutorials will able to solve your problem.

      Thank you.
Go Up