Write at HWS !!!

Guest Posting

Friday, September 9, 2011

Customize Bullet List Style In Blogger With Image Hover


Animated-Bullet-List

I was going to write the chapter 3 about blogging but you need to learn this thing as we are gonna use it in that chapter. So 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!



<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>                           /*hackwithstyle.blogspot.com*/
<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 :>

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!

Paste this code in the HTML Editor



Respected Readers:
As a 21 year old student, the only income I rely on is my pocket money. Bearing the running costs of HWS Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!


RSS Digg Delicious Twitter Facebook Stumble YouTube Technorati Google

2 comments:

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:-
Please do not spam Spam comments will be deleted immediately upon my review.

Regards,
XEO Hacker

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 

Recent Posts

Join Me On Facebook

200+ Followers

Followers


meet women in Ukraine contatore visite website counter

Recent Comments

Follow Me On Twitter

1112+ Followers