Customize Bullet List Style With Image Hover Effect In Blogger

Animated-Bullet-List

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 :>

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 »

28 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. @ mohd i have been sent you mail please send me read more buttons @ icecube007@ymail.com


    hanks for this nice tricks

    ReplyDelete
  2. A great addon for my site, thanks a lot!

    ReplyDelete
  3. @nil

    I resent you the icons. Hope you will like them :D

    @Googy

    Long ago since you last commented friend. Nice to have you back.

    ReplyDelete
  4. Hey thanks for this wonderful trick.

    I tried this trick for links of my sidebar. Now they are looking just awesome.

    You can see http://www.shirdisaibabastories.org/

    ReplyDelete
  5. HI bro, I want to do bloging.
    Can u tell me that what is the best platform for that either blogger or wordpress ?
    And is it neccessary to have own domain name and static ip for getting approved by google adsence?

    ReplyDelete
  6. @pradeep

    I would give 10/10 to Blogger and 5/10 to Wordpress. Blogger will provide you with great command in CSS, HTML and XML along with a wonderful blogging experience. You can customize your template far easily as compared to wordpress which uses php script that few understands and share. Further Blogger is a Google's service so you will have better search engine rankings!



    @china

    Why do you want me create such a template when it already is available for free download by the designer

    ReplyDelete
  7. hi MOHD
    can u pls help me to make favicon like yours
    i.e. "My Blogger Tricks" moving favicon

    ReplyDelete
  8. @esydownloads

    Create one at http://www.animatedfavicon.com/

    It's really easy to create one.

    ReplyDelete
  9. Hi Mohd. Please create a post for color scroll bar. I've tried somthing online but non of them work have a look at this you will get some idea-- >>http://rainbow.arch.scriptmania.com/tools/scrollbar/colour_scrollbar_generator.html

    ReplyDelete
  10. You may also create your own favicon from www.favicon.cc

    ReplyDelete
  11. http://www.favicon.cc/favicon/550/138/favicon.ico

    ReplyDelete
  12. @sreejesh

    I know how to stylize a scroll bar but friend this hack is way old and new browsers like mozilla doesn't support it. So it's really not apprecaited to apply this CSS styling to scroll bars. Especially not for blogger.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This trick did not work for my blog no Idea y ? any way Thanks

    ReplyDelete
  15. Great post ! Thank you very much !

    ReplyDelete
  16. hello.I'm very thankful for you by sharing this trick. I will be using this in my blog.

    ReplyDelete
  17. the 1st trick is not working but the other below is working..
    thanks!

    ReplyDelete
  18. It is all working with me! Thanks for the codes here and tuts.

    ReplyDelete
  19. can iget them please mohammed
    my mail is
    ahmed.ronaldo09@g mai l.com
    sorry for the 2 spaces

    ReplyDelete
  20. @ahmed

    There is nothing in this post to be sent brother. All codes are shared in the tutorial. :>

    ReplyDelete
  21. Hello Mohammed Mustafa i am already subscribe your blog.

    Please send me the bullet icons for my blog: www.first4all.blogspot.com

    Regards,

    Usman

    ReplyDelete
  22. Love This One Musatafa Bhai...!

    ReplyDelete
  23. No work for me. I want bullet style in my left hand side bar widget in blogger

    ReplyDelete
  24. hello sir I have subscribed but also i didn't get the download copy. Please send it fast sir. Thank you.

    ReplyDelete
  25. Hello Mohammad! Thanks for this awesome sharing. I having difficulties to implement this tricks. When I add bullets it shows both regular and custom bullets. Don't get the problem. http://prntscr.com/e2gk3h Can you please help me to fix this.
    Thank you

    ReplyDelete