Add | Put | Customize Bullet List Style With Colorfull Circle Hover Effect In Blogger Blogspot

In this tutorial i will show you how to add or customize Bullet List with amazing two Color Hover Effect in blog post. In normal position means without place mouse on bullet it looks blue but when you run mouse on bullet links then it is changes into green color which is very good looking and nice effect and reader of your blog post is also feel nice and good. It shows your post as a professional post or blog. These types of small changes in blogger make your blog better and good looking or professional blog.


How To Add Or Customize Bullet Style In Blogger With Simple Steps:


Now we are going to add this effect in our blog if you want to add in your blog then follow the below steps.

  • Go to Blogger.com.
  • Go to Template.
  • Click on Edit HTML.
  • Press Ctrl+F in HTML Body to appear search box.
  • When search box is appear in top right corner.
  • Paste below tag in search box and press enter.

]]></b:skin>

When you find this tag/code in HTML Body then copy below coding and paste above/before the ]]></b:skin> tag.

Add | Put | Customize Bullet List Style With Colorfull Circle Hover Effect In Blogger Blogspot
Add | Put | Customize Bullet List Style With Colorfull Circle Hover Effect In Blogger Blogspot


.post ul { list-style: none; } .post ul li { line-height: 1.4em; background: transparent url(http://1.bp.blogspot.com/-15tyJnOcQFY/T6JKYobSC3I/AAAAAAAABhM/sB5M5iGJB9k/s1600/blue-bullet-icon.png) no-repeat scroll 0 10px; margin: 0.3em 0; padding: 0 0 0.8em 20px; } .post ul li:hover { background: transparent url(http://2.bp.blogspot.com/-CdnDoCYg3rA/T6JKZQSDCzI/AAAAAAAABhU/0BnItZGAnls/s1600/green-bullet-icon.png) no-repeat scroll 0px 5px; } 

 

Customization In Above Coding:


If you want to increase the size of hover circle the change the value of 10px with your desire value.

0 comments