Add a Strikethrough behind Blogger Blog Post Title

Add a Strikethrough behind Blogger Blog Post Title

Comments: 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.

Speak Your Mind

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *