Customize Bullet List Style With Image Hover Effect In Blogger

I recently shared a tutorial of customizing the look of your bullet list and number list  and 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. Lets start!
Go To,

• 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/AVvXsEjjYbGzWN4z72PtGHjP7Bdbw-Ul6_v4rYVcs7JgbeyPcVX316VpaKsSZeYL7S_7v4tgmqfvzB6DAw2vvkx1cRW6yQAf4qda-3o9OALunD6cC2ciybAThs2YRMOKNjlFQoLcsROQjce8Gb8/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/AVvXsEhNO1GmrtfYXo4B8mumjMDVUKbAJRzNHCdr1m5jI8-gmdOksKXn8JLCWHwy91XN554Ah1RCtWvlmcITJ5lH1MdEfJHFrY4ZIhThm6An8eAQlzdINPf7qKWh_Ng6aajWBmeOQ2Oq7AbSKxo/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. To learn how to save images in blogger, read this post –> Create a Backup For Images in Blogger

Play With The Code!

If you want to try the code before applying it to blogger than use our HTML Editor by clicking the link Below,

Try it Yourself! :- MBT HTML EDITOR
Paste this code in the HTML Editor,

<style>
ul {list-style:none;
}
ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjYbGzWN4z72PtGHjP7Bdbw-Ul6_v4rYVcs7JgbeyPcVX316VpaKsSZeYL7S_7v4tgmqfvzB6DAw2vvkx1cRW6yQAf4qda-3o9OALunD6cC2ciybAThs2YRMOKNjlFQoLcsROQjce8Gb8/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNO1GmrtfYXo4B8mumjMDVUKbAJRzNHCdr1m5jI8-gmdOksKXn8JLCWHwy91XN554Ah1RCtWvlmcITJ5lH1MdEfJHFrY4ZIhThm6An8eAQlzdINPf7qKWh_Ng6aajWBmeOQ2Oq7AbSKxo/s400/261.gif) no-repeat scroll 0px 4px;
}
</style>
<ul>
<li>This is Sample Text</li>
<li>This is Sample Text</li>
<li>This is Sample Text</li>
</ul>

I hope you will like it. Take care :>

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 11/14/2009