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(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/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(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/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(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}

ul li:hover {
        background: transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/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 :>

Need Quick Help within 24 Hours? ASK NOW



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 »

34 comments : Post Yours! Read Comment Policy ▼
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. Hello Please Will Umake Me the template in which black-pink-blogger.blogspot.com is using pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    ReplyDelete
  7. @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
  8. hi MOHD
    can u pls help me to make favicon like yours
    i.e. "My Blogger Tricks" moving favicon

    ReplyDelete
  9. @esydownloads

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

    It's really easy to create one.

    ReplyDelete
  10. 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
  11. You may also create your own favicon from www.favicon.cc

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

    ReplyDelete
  13. @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
  14. This comment has been removed by a blog administrator.

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

    ReplyDelete
  16. Great post ! Thank you very much !

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

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

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

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

    ReplyDelete
  21. @ahmed

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

    ReplyDelete
  22. 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
  23. Love This One Musatafa Bhai...!

    ReplyDelete
  24. Hello mohammad....

    Thank you for this tutorial..
    I think this is only for the bullet list, what about the numbered list? do you have a tutorial for numbered list?

    May I request to make you tutorials for customizing numbered list.

    Thank you so much...

    JayRyan'sBlog

    ReplyDelete
  25. Mate, I am having problem to read the URL (.....), It's touching with your right panel contents. I hope you will fix this problem soon. Thanks.

    Regards,
    Admin of SEO Service Provider

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

    ReplyDelete
  27. Hello Mohammad, this code served a good purpose and was really helpful. The list image I had in mind was good but could not be compared to the one you used on this CSS code - I wanted to change the image, which I actually did. But I had to revert to the original one which is the one you used cos I like it more. I had issues while installing to my blog though but when I followed the instruction slowly I did it right. Check it out here sir.

    ReplyDelete
  28. This comment has been removed by the author.

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

    ReplyDelete
  30. Thanks It Did Really Help

    -------------------------------

    www.apk13.com

    ReplyDelete
  31. Awesome! It work like a charm in my site @ http://www.bubblegag.com/ Thanks and more power!

    (Note: you can find that it work in private privacy page in my site. I modify the code so that i will not use any image.)

    ReplyDelete