Those of us who blog on the blogger platform know that many things are limited in blogger. For example, we can easily do many things by installing many types of plugins in WordPress. But it is not possible to install plugins in blogger. So we have to do all the customization from within the theme.
We can add many scripts/css to make our blogger blog more beautiful and attractive. In today's post I will show how to change blogger's default number listing style by adding just few lines of css.
Advantages of custom number list style:
By adding these css codes inside your blogger blog theme code, when you post using a number list tag, your blog number list will look very beautiful. It will attract your website visitors as well as give your blogger blog a modern look.
To view the demo :Click here ।
How to Add Custom Number List Style to Blogger Blog:
- Go firstBlogger DashboardA.
- Then go to Themes .
- Clicking on the Edit HTML option in the drop-down menu will redirect you inside the theme.
- Now search for ]]></b:skin> and paste the following CSS codes above the ]]></b:skin> tag.
Style 1 CSS :
ol.style1{counter-reset:numbers;list-style:none;padding:0}ol.style1>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-left:55px}ol.style1>li img{margin:15px 0;width:100%;display:block}ol.style1>li #box-download img{margin:0}ol.style1>li::before{content:counter(numbers);line-height:23px;font-family:'Noto Sans',sans-serif;font-size:14px;font-weight:700;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#eb3b5a;border:5px solid rgba(42,203,186,1);border-radius:50px;top:-2px}ol.standard li,ol.style0 li,ol.style1 li ul li,ol.style2 li{margin-bottom:15px}ol.style1 li ul{margin-top:15px}.drK ol.style1>li::before{color:#7efff5;border-color:rgba(50,255,126,1)}Style 2 CSS :
ol.style2{counter-reset:numbers;list-style:none;padding:0}ol.style2>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-left:55px}ol.style2>li img{margin:15px 0;width:100%;display:block}ol.style2>li::before{content:counter(numbers);line-height:23px;font-family:'var(--fontB)';font-size:14px;font-weight:700;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#9c27b0;border:5px solid rgb(254 202 87);border-radius:50% 0 50% 50%;top:-2px}ol.style2 li ul li{margin-bottom:15px}ol.style2 li ul{margin-top:15px}.drK ol.style2>li::before{color:#fff200;border-color:rgba(24,220,255,1)}Style 3 CSS :
ol.style3{counter-reset:numbers;list-style:none;padding:0}ol.style3>li{counter-increment:numbers;margin-bottom:25px;position:relative;margin-left:55px}ol.style3>li img{margin:15px 0;width:100%;display:block}ol.style3>li::before{content:counter(numbers);line-height:23px;font-family:'var(--fontB)';font-size:14px;font-weight:700;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#eb3b5a;border:5px solid rgb(42,203,186,1);border-radius:50% 0 50% 50%;top:-2px}ol.style3 li ul li{margin-bottom:15px}ol.style3 li ul{margin-top:15px}.drK ol.style3>li::before{color:#7efff5;border-color:rgba(24,220,255,1)}Now save the theme.
For now, your work inside the theme is done. Now when you write a new post, click on the HTML view from Compose view of the post as you used to list the numbers. Then find the HTML codes of the number list. And there <ol> tag. If you find it, write the style you like inside the <ol> tag. For example, I will give style 3. Then write like this: <ol class=”style3″> . Then your custom number list will be created.
If you go to the demo link that I have given above, you can see 3 styles. I am giving the download link of the CSS codes of the 3 styles below. You can add any one or all 3 themes if you want.
To download :Click here।
Paste the above CSS codes above the ]]></b:skin> tag of your theme. And as I said, if you can't edit the list style by going to the HTML view of the post, then go to the HTML view and use the following 3 styles. You can paste any one or all 3 of them and edit them as you wish.
Style 1 HTML
<ol class="style1"> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li></ol>
Style 2 HTML
<ol class="style2"> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li></ol>
Style 3 HTML
<ol class="style3"> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li></ol>
