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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuoDzv9IwJKUtOuH69PGTxQB53yRRmr2Njx85aeaDWaOhvmt-VYYmW9ZRjIKfYlO3CuvIE41Pk8Ex9edMSXFqc0W_a2gekvHCW3QzFS5BkNeVxCSpfeNBVJ7XEOOueCy9v__QGiPI9uV0/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(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52piir5nOiboq8d9TxdaJlORozrcsI0PYt_YEaqzyMzvpS_wfMjwtNcgDj8wPwfhaKMd0sQZenKzwrmxfDazxh5CU0ksNUui3I41k4pyTFZDIR9ZOhFvEkMg290rGpzcFnxdHbk7Z1GY/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.

2 comments: Leave Your Comments