Skip to main content

Add to blogger :Bullets With Image hover effect

Bullets with image hover effect bloggerThis is a simple tutorial to learn to ADD bullets images to your blogger which change with while you place mouse on it.The image beside shows hovering effect .IF you are looking for free bullets icons or graphics for your blog you can check my article Best places to download free bullets .

Adding Bullets to Post Area

  • Login to your blogger
  • Click on Layout tab >> Click Edit HTML
  • Use your browser search (Cntrl + F) to find .post ul li or some thing like this might be different in different templates.
background:transparent url( no-repeat scroll 0 4px;
and add in your .post ul li(in between curly brackets { and }) so that your code becomes

.post ul li {
background:transparent url( no-repeat scroll 0 4px;
margin:0.3em 0;
padding:0 0 0.8em 20px;

This is not yet done ,if you save your template you have successfully added image as bullet in your template but it will not change when you take your mouse to your lists.
For that you have to add an another image generally of same style but with different color like i have done first green then blue.For doing that copy below part - and paste it just after .post ul li part
background:transparent url( no-repeat scroll 0 4px;

.post ul li:hover {
background:transparent url( no-repeat scroll 0 4px;

So now your Final code becomes-

.post ul li {
background:transparent url( no-repeat scroll 0 4px;
margin:0.3em 0;
padding:0 0 0.8em 20px;
.post ul li:hover {
background:transparent url( no-repeat scroll 0 4px;

Note : If your theme does not have any thing like .post ul li   or   .post ul li:hover  in that case search for ]]></b:skin> and paste full code above it.

Adding Bullets to Sidebar

Adding bullets to sidebar is similar to adding it in posts area just add
background:transparent url( no-repeat scroll 0 4px;
in your sidebar wrapper code if your sidebar already has an image you just need to replace the image with this

.sidebar ul li {
background:transparent url( no-repeat scroll 0 4px;
margin:0 0 5px;
.sidebar ul li:hover {
background:transparent url( no-repeat scroll 0 4px;

Note : If your sidebar does not have any thing like .sidebar ul li:hover   you have to add one for your sidebar.
Note :Dont just copy paste blindly it will not work


  1. I'm hovering through the image but I'm not sure what's suppose to happen because nothing happens?


Post a Comment

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,

Popular posts from this blog

Get ip-address widget for your blogger

Here is a unique collection of  IP address widgets which shows your visitors their Ip address,operating system,country,browser and the version of the browser.It is cool thing to display  ip address to your visitor's specially if you have TECH related blog.
Now you can get these any of these widgets and add these to your blogs by following these steps -

Get Ip Address Widget for your blog

1 .Choose any widget they are in different size and shapes,choose any according to your blog requirement.
2. Login to blogger dashboard ,and the click on Layout - > page Elements .
3. ADD a new HTML/Javascript gadget anywhere in your blog.
4. Copy any code from below(all are working) and paste in to HTML / Javascript gadget and then save your gadget.
5 Done,Your widget is Now live

1 .Square Ip Address Widget (Height=125px, Width=125px)<!--Ip Address Widget Starts--><span style="display: block; text-align: center;"><a href="">…

Best DoFollow Blog directories list for seo

List of Dofollow Blog directories,
Note: some items have profile information some do not, doesn’t matter, they’re all DoFollow Blog directories so submit your blogs to them all.
Year Site Created: 2000
Indexed Pages in Google: 103,000
Backlinks in Yahoo: 542,700
PageRank: 6
Link Status: Dofollow
Quantcast Rank: 200,223
Editorial Policy: Yes
Spam in index: No
Submission rules: From the website:
We will reject: Spam blogs, hate blogs, stolen blogs, links to non-blog websites, links to illegal or illicit topics like child pornography. Blogs with under 5 posts are no longer accepted, but they might be waitlisted for later review if they look cool.
Commercial blogs are fine, but they must be “fun and useful.” Because of the huge amount of robot-generated blogs being submitted, blogs with the following will not be approved for listing: Acne, Mesothelioma, Real Estate, Lawsuits, Insurance, Gambling, SEO, Web Marketing, Medical Procedures and En…

Add a reply option to blogger comments like Wordpress

If you Are using blogger platform for your blog than during some stage of your blogger life you must have noticed that blogger does not have Reply option to it comments.This is one of the major reason why people migrate towards Disqus or IntenseDebate comment Platform.
I suggest you to read this - Readers can't comment on your blog - Tip For You

With a very little change to your template you can add this hack to your blog.
This hack was originally posted on thisischen

ScreenShot :
Update - Previous Reply code was not working for some blogger templates.This is an updated version and work well with all templates
Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.

Step[2] Find the following code in your blogs Html : <data:commentPostedByMsg/> 

Step[3]. Paste the following code Directly Below/After <data:commentPostedByMsg/>  

<span class='comment-reply'…