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,
- Change Bullet list (un-ordered list) style on Mouse Hover
- 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.
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>Your Content Here</p></li>
<li><p>
<li><p>Your Content Here</p></li>
</ul>
Publish your post and enjoy the new bullet style.
Change Number List (ol) style on Mouse Hover
See a Live Preview First.
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 {Change the colors to suit your preferences. For help use our color chart.
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;
}
- Save your template
That’s it! preview you template to see the new change in number list.
Hope you loved this new way of learning and applying CSS effects to your templates :>
- LG Announces the New PRADA 3.0
- Micromax Q1C price in india |Micromax Q1C QWERTY
- Watch out fellas! WM7 is here to stay
- how to enable DISQUS COMMENT BOX in blogger or how
- LG secret codes
- Why Android?
- Mapstronaut Nokia N8 unboxing
- How to change size of your facebook profile picture
- Android game review : Hangman from Spice Labs
- Samsung Galaxy Tab 730 price india |Samsung Galaxy
- Samsung Champ 2 price india | Samsung C3330
- LG Nitro HD price india |LG Nitro HD full features
No comments:
Post a Comment