How to add custom steps in Blogger Blog Post?

How to add custom steps in Blogger Blog Post?

0
data:blog.title
steps

While we explain some tutorials we may explain it step by step. Suppose in my Blog while explain any tutorial then I use Step 1, Step 2, Step 3 but by writing simple font without any design it will looks like dull. And readers won't noticed while reading a tutorial. So we can add some style to make the steps noticeable. Though this system rarely used but in some WordPress Blog we see that customized Steps are using while describing something. And I will show you that system for using this in Blogger's Blog Posts. Just follow the below steps-


blogger widget

Step 1 Go to https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard click on ->Template ->Edit HTML 

Step 3 And locate the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 No copy below script and paste it above/before ]]></b:skin>

.step {
color:#2AA9E0;
margin: 0px 5px 0px 0px;
font:bold 15px 'sans-serif',Trebuchet MS;
padding-right:2px;
text-shadow:1px 1px 1px rgb(32,32,32);
}

Customization

  • For changing the text color alter #2AA9E0 with different color code.
  • For changing the Font size alter 15px with lesser or greater number.
Step 5 And click on Save template button from top right corner of the screen.

We have completed the CSS part now we have to make it work in Blog Post.

How to Use Custom Steps in Blog Post?

Now it's time to use the custom steps in Blogger Blog post. This is very easy, just you have to switch to HTML View while writing a Post. and add the below code before a tutorial description per line.

<span class="step">Step 1</span>
<span class="step">Step 2</span>
<span class="step">Step 3</span>
<span class="step">Step 4</span>

After that switch to Compose view and Publish your Post and check your Blog post and see customized steps.

Some Blogger may find this bit complicated but just use this code in single Blog post and whenever you write another post then just copy the customized Step 1 and paste it in new Blog posts that's it. You don't have to go in HTML view and add the whole line every time. I think this tutorial will help to tailor your Blog post and it will able to bring some variation while explaining any  tutorial. 
How to add custom steps in Blogger Blog Post?
4 Stars stars - "How to add custom steps in Blogger Blog Post?" While we explain some tutorials we may explain it step by step. Suppose in my Blog while expla...

Post a Comment

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 *