Add CSS3 Ordered List Styles To Blogger

Have you noticed that some blog have cool link list in their sidebar? You are also looking for the same cool link list for your blog too? If you are thinking so, you are here in right place. In my prevous post i have shared 15 different kind of facebook like button, In this post i am here with 2 types of unique CSS3 ordered list style for blogger. If you want to give attractive look to your blog, choose any style from the given below. And make your blog look beautiful.

Want Demo?

If you want to see a demo of  CSS3 Ordered List Styles Come to PokharaTech Lab.

How to add?

Here i am going to share 2 different style of  CSS3 Ordered List Styles, To add this cool widget to your blog go to blogger.com>>Sign in>> Edit Template>> Search for ]]></b:skin> and copy and paste the given css code (any one style) above ]]></b:skin>.Note: Don't Forget to Backup your Template.

Rounded-shaped numbers

.rounded-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em 2em;
 *padding: .4em;
 margin: .5em 0;
 background: #ddd;
 color: #444;
 text-decoration: none;
 border-radius: .3em;
 transition: all .3s ease-out; 
}
.rounded-list a:hover{
 background: #eee;
}
.rounded-list a:hover:before{
    transform: rotate(360deg); 
}
.rounded-list a:before{
 content: counter(li); counter-increment: li;
 position: absolute; 
 left: -1.3em;
 top: 50%;
 margin-top: -1.3em;
 background: #87ceeb;
 height: 2em;
 width: 2em;
 line-height: 2em;
 border: .3em solid #fff;
 text-align: center;
 font-weight: bold;
 border-radius: 2em;
 transition: all .3s ease-out;
}

Rectangle-shaped numbers

.rectangle-list a{
 position: relative;
 display: block;
 padding: .4em .4em .4em .8em;
 *padding: .4em;
 margin: .5em 0 .5em 2.5em;
 background: #ddd;
 color: #444;
 text-decoration: none;
 transition: all .3s ease-out; 
}
.rectangle-list a:hover{
 background: #eee;
} 
.rectangle-list a:before{
 content: counter(li); counter-increment: li;
 position: absolute; 
 left: -2.5em;
 top: 50%;
 margin-top: -1em;
 background: #fa8072;
 height: 2em;
 width: 2em;
 line-height: 2em;
 text-align: center;
 font-weight: bold;
}
.rectangle-list a:after{
 position: absolute; 
 content: '';
 border: .5em solid transparent;
 left: -1em;
 top: 50%;
 margin-top: -.5em;
 transition: all .3s ease-out;    
}
.rectangle-list a:hover:after{
 left: -.5em;
 border-left-color: #fa8072;    
}

Now, Save Template and go to Add Widget>>HTML/JavaScript, copy and paste the code given below.
For Rounded -Shaped Number Style

<ol class="rounded-list">
 <li><a href="#">List item</a></li>
 <li><a href="#">List item</a></li>
 <li><a href="#">List item</a>
  <ol>
   <li><a href="#">List sub item</a></li>
   <li><a href="#">List sub item</a></li>
   <li><a href="#">List sub item</a></li>
  </ol>
 </li>
 <li><a href="#">List item</a></li>
 <li><a href="#">List item</a></li>      
</ol>

For Rectangle-Shaped Number Style 

<ol class="rectangle-list">
 <li><a href="#">List item</a></li>
 <li><a href="#">List item</a></li>
 <li><a href="#">List item</a>
  <ol>
   <li><a href="#">List sub item</a></li>
   <li><a href="#">List sub item</a></li>
   <li><a href="#">List sub item</a></li>
  </ol>
 </li>
 <li><a href="#">List item</a></li>
 <li><a href="#">List item</a></li>      
</ol>

Costomization

Replace # with link and List Item and List Sub Item with your link list. If you don't want to show Sub List remove :

<ol>
   <li><a href="#">List sub item</a></li>
   <li><a href="#">List sub item</a></li>
   <li><a href="#">List sub item</a></li>
  </ol>

All Done. Now save HTML/JavaScript.

From The Editor's Desk

This Ordered Link List is made using Pure CSS3, i think you loved this. If you found this post useful for you please make share with your friends too. if you face any problem while adding process feel free to put your problem here using comment box below. Like our Facebook Page for Daily Updates. Peace, Happy Blogging.