Today we will learn how to change the bullet list using the Image Hover effect. Hover your cursor over the bullet list below to see the effect.
- Isn’t the image turning green from shiney yellow?
- Liked it? Now learn it!
- Blogger > Layout > Edit HTML
- Search For
]]></b:skin>
- and just above
]]></b:skin>add the code below, (Tip:- Press Ctrl + F)
.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HzHg6ROzX0mUh9tJBqQf-7DM3fCxpiMR5vTGhkVE023un_bWCOBSxhfOL56YyMFgSrHLDnXlrBB6fyuMVsET6LzrmKgsjnaxsxCVsQun2VNbW9LgccoUY5QU_wa44NjWFHvMk5cct8o/s400/265.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/AVvXsEjSBKMJ5pS3_O_Ny2IXwFbPvSPTq6Yr8p-PgQo3_hoN0vPTm2HYBR_nGhKBYXZ7T-sarV52aVo5kvRO87lh4w4-VPy-U1JjsmN0X10yzAOShAkv7c6n7VY90l-F11C9Kxm1olcPgHacyV0/s400/261.gif) no-repeat scroll 0px 4px;
}
- Save Your Template and you are done!
Customization
The bullet image can be aligned horizontally with the text by increasing or decreasing the value 4px. You can change the value to 7px or more or less according to your blog alignment requirement.
You can also replace the bullets above with your own. To get a bullet of your own choice download up to 231 seductive bullets by subscribing to this blog.
Note:- Subscribers have already been emailed the Download copy
Once you have selected your preferred bullet simply upload it to blogger and replace the above two links (Green and Blue) with the URLs of your own bullets.
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!
