--> Customize Bullet List and Number list Using Hover Effect | Experience Lab - Online business creation and development guide for bloggers and startups

Customize Bullet List and Number list Using 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...

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Customize Bullet List and Number list Using Hover Effect
Customize Bullet List and Number list Using Hover Effect
http://lh5.ggpht.com/_7wsQzULWIwo/SuOxwfHQncI/AAAAAAAACII/AFhc8TFwOxI/Bullet%20and%20Number%20List%20Hover%20Effect%5B5%5D.gif?imgmax=800
http://lh5.ggpht.com/_7wsQzULWIwo/SuOxwfHQncI/AAAAAAAACII/AFhc8TFwOxI/s72-c/Bullet%20and%20Number%20List%20Hover%20Effect%5B5%5D.gif?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2009/10/customize-bullet-list-and-number-list.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2009/10/customize-bullet-list-and-number-list.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy