Customize Bullet List and Number list Using Hover Effect

Bullet and Number List Hover Effect Keeping the posts unique in every way should be the aim of every blogger. The Number list (ol) and Bullet list (ul) is an important part of a good article. To change  the entire look and feel of these lists we will use simple CSS effects to bring about a change in bullets and number style on mouse hover. This tutorial consists of two very interesting parts,

 

 

 

  1. Change Bullet list (un-ordered list) style on Mouse Hover
  2. Change Number List (order list) style on Mouse Hover

Change Bullet list (ul) style on Mouse Hover

Before I may start lets see a Live Demo. Make sure you hit the Preview button.

 

Live Demo

 

To add this effect to your posts, do the following,

  • Log into Blogger
  • Go To Layout > Edit HTML
  • Now add this piece of code just above ]]></b:skin>

.post ul {list-style-type: circle;
    }

.post ul li {

line-height: 1.5em;       
color:#289728;
}

.post ul li:hover {
       color:#0080ff;
list-style-type: disc;
}
.post ul p { color:#555555;
             line-height:1.4em;  }

You can change the colors with any Hexa Decimal Value you like and can also change list-style-type: with many options like : circle, disc or square.

  • Save Your template

Now whenever you create a bullet list in your posts make a minor change to it by adding p tag to it. How? Read below,

  • Once you have created a bullet list in your  post switch to the EDIT HTML Section and search for <ul> You will find a code something like below,

<ul>

<li>Your Content Here</li>

<li>Your Content Here</li>

</ul>

It doesn’t matter if the code appears horizontally. You just need to replace <li> with <li><p> and </li> with </p></li> . Replace them as many times as they appear. Now the code will look like this,

<ul>

<li><p>Your Content Here</p></li>

<li><p>Your Content Here</p></li>

</ul>

Publish your post and enjoy the new bullet style.

 

Try it Yourself! :- MBT HTML EDITOR

 

Change Number List (ol) style on Mouse Hover


See a Live Preview First.


Live Demo

To add this effect to your posts, do the following,

  • Log into Blogger
  • Go To Layout > Edit HTML
  • Now add this piece of code just above ]]></b:skin>

.post ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}

.post ol li {
line-height: 1.4em;
font: italic 1em Georgia, Times, serif;
  color: #289728;
}

.post ol li:hover {
font:bold italic 1em Georgia, Times, serif;
  color: #0080ff;
}

.post ol p {
  font: normal 1em Arial, Helvetica, sans-serif;
  color: #555555;
  line-height:1.4em;
}

Change the colors to suit your preferences. For help use our color chart.

  • Save your template

Now whenever you write a post and use a number list just make similar changes to the code in edit html section as you did for un-ordered list. But this time instead of searching for <ul> search for <ol> Make sure you change <li> with <li><p> and </li> with </p></li>

That’s it! preview you template to see the new change in number list.


Try it Yourself! :- MBT HTML EDITOR

 

Hope you loved this new way of learning and applying CSS effects to your templates :>

Update:- To learn how to add Image Bullet List with hover effect then click here

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 »

14 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. That is really cool hover effect. Thank You MOHD__ for this cool trick.

    ReplyDelete
  2. Can i use this two at same time?

    ReplyDelete
  3. Yes Sure! Both are different styles used for different purposes so why not.

    ReplyDelete
  4. Wow! They look so cool. YOur way of sharing tricks is undoubtedly remarkable. Thanks for that beautiful html tool.

    ReplyDelete
  5. how do you use this effect to all over ur blog??

    ReplyDelete
  6. when I use W.Live Writer I think it does not change as automatic

    ReplyDelete
  7. @Anup

    To use this effect automatcially in all your previous posts then you will use Image hover effect as I have done in my blog. I will share the trick in this week InshAllah

    @Sadr

    Many effects do not show up in WLW or blogger editor. To view them you must first publish the post.

    ReplyDelete
  8. Hi, Mohd. You're blog is really great source for trick and tips for blogger. All of your codes so far has worked for me. I would like to request you for a advice to get a Google Adsense account.
    I'm really sad that even after trying for long 6 months I've not managed to get a google adsense account for blogger.

    ReplyDelete
  9. @Sreejesh

    That's great that the tuts are working for you!
    You aksed about Google Adsense. Was your account previously deactivated or so? I am asking this question because its takes a minute to sign up for google adsense account. But if you have already been suspended due to violation of Adsense TOS than I am afraid to say that you can not display ads for your current blogger account. Although there is a solution.

    Create a new blogger account and import your old posts to this new account. Sign up for adsense with a different gmail ID and different name and identification data. I know this way is difficult but unfortunately this is the only way out!

    ReplyDelete
  10. hi,can you give me the code related post hack like yours?

    ReplyDelete
  11. thanks for the great work. Can i use It for my blogger sidebar to show my links.

    ReplyDelete
  12. @Pradip

    Of course you can. Just replace .post with .sidebar in the CSS code! That's it :>

    ReplyDelete
  13. Assalamu Alaikum Mustafa bhai... I want to created a list of book on my blog... I want to hide that long list and want to keep only heading... plz help me how would i be able to do it...

    ReplyDelete