In blogging organizing everything is very necessary, it makes your blog neat and clean and side by side gives your readers proper understanding about the content. Now personally I like to add ordered list in my step by step post like I am going to do it now. This helps my readers to understand every step in proper way and they know that 1 instruction is over and other is next to be followed.
What is Ordered List and How to Use It ?
Well if you are still unaware about what I am talking about then you need to check the below screenshot.
When you add those 123 in your post that takes every next paragraph and add another number, those are called “Ordered List” and it makes good sense to include in your post, if you are making a step by step post so that people can understand your post easily.
- Add Multi Colored Rainbow Effect on Blogger Images
- Automatically Remove Links from your Blogger Comments
- Blogger Backup - Full Details on Backing Up & Restoring It
- Improve Blogger Loading Speed using these Tips & Tricks
So normally your ordered list is simple with numbers, it looks very simple and if you want to customize it, its not that easy to just add those CSS styles but it needs some special codes in CSS to start customizing them, but after long time I found this and added these styles to this blog.
And now I wanted it to be shared with your all as I know many of you might be wondering how we can actually customize these numbers with different colors, background and what not.
Customizing Ordered List using CSS in Blogger
So lets get started and see how you can easily customize these number with background, colors, padding and what not like a normal widget. You can apply any styles you like.
- Open Blogger > Template > Edit HTML.
- Press
Ctrl +F and search for]]></b:skin>tag or</style>(if you have removed default CSS from blogger) and paste below code above the code you have searched..post-body ol li:before{counter-increment:yourVariableName;content:counter(yourVariableName);color:black;background:#f1f1f1;border-radius:3px;text-align:center;margin-right:10px;font-weight:bold;border:1px solid #c1c1c1;padding:2px 10px!important;box-shadow:inset 0 1px #fff}.post-body ol{list-style-type:none;counter-reset:yourVariableName} - Now your main styling is added, so just save your template and see how they are looking, in case you can getting any alignment issues, then you can modify those margin values highlighted in red above.
- Rest if you want to customize the colors, border or anything you need to have some knowledge about CSS.
- I have marked everything in colors that you can modify in the above code, so change those according to your site’s design.
So guys this ends another awesome tutorial, I hope you guys found this useful and would be able to make your site a little nicer with these dazzling number styling. Do comment in case you face any problems, I would be really happy to help you fix those issues.
(COMMENTS WILL LOAD AUTOMATICALLY)