Latest Updates

Customize Bullet List Style With Image Hover Effect In Blogger

ad+1




Today we will learn how to change the bullet list using the Image Hover effect.Every blogger wants to create her post in a unique way,that why they always try to make some different.To add this effect you just have to put some CSS code in your template.

Also Read : How to Optimize blog post title to H1 tags for better SEO 2014.



How to customize Bullet list in blogger :

  • Go to Blogger Dashboard → Template → Edit HTML.
  • Find bellow code,

]]></b:skin>


  • Now add bellow code just above ]]></b:skin>.


.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(http://4.bp.blogspot.com/-w3rfTRZZxNc/U4ck3Ip2dhI/AAAAAAAAAbQ/jiUQTR_1fs8/s1600/255.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent
url(
http://1.bp.blogspot.com/-eUURhcEooq8/U4clcPF3FVI/AAAAAAAAAbY/s4Z7NUFV478/s1600/251.gif) no-repeat scroll 0px 4px;
}


  • Now save your Template and you are done.

Costomizations:

  • You can also Replace highlighted image url with your choice.

3 comments: Leave Your Comments