Blog traffic and gaining the trust of your readers mostly depends on some particular thing in blogging which are: Inspirational content, consistency in your posting and finally your blog design. Most people fell in love with your blog not only because you have good contents, but also the styles and good designs that make up your blog. So 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 blue from green?
Liked it? Now learn it!
This effect is really easy to apply. We only need to apply a simple code to your template. So lets start!
1. Go to Blogger Dashboard
2. Click on Layout > Edit HTML
3. Now Search for
Isn’t the image turning blue from green?
Liked it? Now learn it!
This effect is really easy to apply. We only need to apply a simple code to your template. So lets start!
1. Go to Blogger Dashboard
2. Click on Layout > Edit HTML
3. Now Search for
.post-footer
4. Now Paste this code before it (you can see in the image below)
.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(URL-HERE) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url(URL-HERE) no-repeat scroll 0px 4px;
}
Click on the image to enlarge |
- 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.
Once you have selected your preferred bullet simply replace the above two links (Blue and Green) with the URL-HERE.
Save your template and you are done!
Enjoy!
Enjoy!
0 comments:
Post a Comment