Add a Strikethrough behind Blogger Blog Post Title

Add a Strikethrough behind Blogger Blog Post Title

6
data:blog.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.
Add a Strikethrough behind Blogger Blog Post Title
4 Stars stars - "Add a Strikethrough behind Blogger Blog Post Title" In some Blog designer use strikethrough in different part of Blogger Template. Mostly can be s...

Sir Salam niben.Amar bloge kaj kortecen to.Plese Seo kore diben.

Please follow the SEO 2015 article from below link--

http://www.bloggerspice.com/2015/01/search-engine-optimization-SEO-guideline-in-2015.html

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

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{.....}

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *