Subscribe Youtube Channel Muxic 0.9 ♪ Contact Us Subscribe!

How To Add Custom CSS3 Style Numbered list inside Blogger Post

Master the art of adding visually appealing custom CSS3 style numbered lists to your Blogger posts with ease.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

CSS3 Style Numbered list

Let's Begin 

CSS3 ordered list Rectangle style for Blogger 

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: Now find the  by pressing Ctrl + F

Step #5: Copy the code from below and Paste the code above/before  </b:skin>
/* CSS3 ordered list Rectangle style by abdullahdcurz.blogspot.com */ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}ol ol {margin: 0 0 0 2em;}.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;transition:all .3s ease-out;}.post ol li:hover{background:#EEEEEE;}.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;color:#FEFEFE;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}.post ol li:after{position:absolute; content:'';border: .5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}.post ol li:hover:after{left:-.5em;border-left-color:#FA8072;}.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}.post ol li span:hover{background:#f9f9f9;}
Step #6: Finally hit the Save template button. 

Let's Begin 

CSS3 ordered list Rounded style for Blogger

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: Now find the  by pressing Ctrl + F

Step #5: Copy the code from below and Paste the code above/before  </b:skin>
/* CSS3 ordered list Rounded style by abdullahdcurz.blogspot.com  */ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}ol ol {margin: 0 0 0 2em;}.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;transition:all .3s ease-out;}.post ol li:hover{background:#EEEEEE;}.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#87CEEB;color:#FEFEFE;height:2em;width:2em;border-radius: 30px;line-height:2em;text-align:center;font-weight:bold;}.post ol li:after{position:absolute; content:'';border: .5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}.post ol li:hover:after{left:-.5em;border-left-color:#87CEEB;}.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}.post ol li span:hover{background:#f9f9f9;}
Step #6: Finally hit the Save template button. 

To change the serial color just change color code #87CEEB only from code block. You can avail the different color from our Color Picker

Copyright:
www.abdullahdcurz.blogspot.com

About the Author

Welcome to my Site! Hi, this is Mr.Abdullah. If you have any questions related to this blog you can find us here on Instagram @abdullahdcurz Or, you can mail us here: abdullahdcurz@mail.com. Thank you.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.