Nov 14, 2015

Change/Customize Bullet List Style with Image Hover Effect in Blogger

Every blogger wants to create his/her post in a unique way,that why they always try to make some different. Today in this tutorial we are going to discussing how to change bullet list styke with image hover effect in blogger. This tutorial is rated easy and is designed so that even Blogger newbies can make the changes they want to their Blogger template. Changing the bullet list style involves changing the CSS styling in your Blogger template (BlogSpot template). Join me as I walk you through this step by step guide.

As you know today, in this tutorial we will make some some fun with bullet list style. We will add two small rounded bullets colored in blue on green. In normal bullet will stay in blue color and on mouse hover it turns into green,this mouse hover effect attracts anyone and gives your article professional look. To add this effect you just have to put some CSS code in your template, Let's start now.
How To Change or Customize Bullet Style List In Blogger

How To Customize Bullet List Style in Blogger

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Download a copy of your template.
  3. Now find ]]></b:skin> tag by pressing CTRL+F
  4. Paste below code just above of ]]></b:skin> tag inside your blogger template.

.post ul {    list-style: none;}
.post ul li {    line-height: 1.4em;    background: transparent  url( no-repeat scroll 0 5px;    margin: 0.3em 0;    padding: 0 0 0.8em 20px;}
.post ul li:hover {    background: transparent url( no-repeat scroll 0px 5px;}

Possible Customizations:

  • The bullet image can be aligned horizontally with the text by increasing or decreasing the value 5px. If you are editing code then both values highlighted in yellow color should be same.
  • You can replace the URL'S of image with your own images as you wish.
     5.  Now Hit On Save Template.
     6.  That's it, You are done.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.


So above guide is about How To Customize Bullet List Style with Image Hover Effect in Blogger and I hope by this tutorial you can easily customize Bullet List Style in Blogger. If anyhow problem persist after following all steps then ask us by dropping a comment below. We will help you out of sure. Don't forget to share on Blogging Communities.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.