Add a Strikethrough behind Blogger Blog 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.

Recommended: How to use Strikethrough in Blogger Blog Post?

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 8Finally hit the Save Template button and check the template to see the effect.

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.