Customize Bullet List Style With Image Hover Effect

Most of the times  when website owners or web developers  would like to make a posts, they tend to elaborate things through explaining some features on the topic that they are discussing to their readers. To make it more professional in looks, it is recommended to write using a bullet list style. In this tutorial, we will  discuss on how to customize bullet list style with image hover effect on it. The code that  I'am going to share with you are highly customizable and easy to implement. So, let's now jump to the tutorial!

Try to look below at my customization area just after step 6 in this tutorial or to my sitemap page for the live demo.

Customize Bullet List Style With Image Hover Effect

Step 1. Log-in to Blogger Dashboard
Step 2. Hit the Template Button ( have a back-up of your template for your reference)
Step 3. Click the Edit HTML button
Step 4. Point the mouse cursor inside the new Blogger Template HTML Editor page
Step 5. Control F or find the code below

]]></b:skin>

Step 5. Above the code in step 5., paste the css code below

.post ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJGx_BZZ89cNfygLXfmiX6sB-GdwG9M2VxHI_ML6qj0ASFYDyIiwHN2YAHEoMsI1J0G3x4rdNtli2w0rNHKLIar7Ct8sUrRI_mRDtGr59VjW-Qf84HZTvgilTSe7nu8YJyyBWZv9-YWk/s1600/bullett+1.png) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
border: 1px solid #DDC;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix14qeYyQ9CphEkyw2HA_UvFTgi5v1ltym5ua7bSAjrV5iN1CT9zUF_KhNkHKrZP9-Iw3mah5Qyx8S48G-SJz09I0cId72rA1IECLNFaCFFSYXz6DIjKfxYSn6ESYF9rIKtod0qQPwT0M/s1600/bullet+2.png) no-repeat scroll 0px 3px;
}

Step 6. Save your template! and you're done.

Customization (optional):

• You may change the text in red (url of image if no mouse hover effect) with your own image  and the text in blue ( url of the image with hover effect)
• The image size should range from 10px by 10px to 13px by 11px
•  You may or may not delete the border (1px solid #DDC).
• You can select the different border styles here and variuos hexadecimal colors through this link

Please copy the code below in your  Blogger editor page (it must be in HTML mode) everytime you want to apply this trick in your post.

<ul>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
</ul>

 Just add another "<li>Your Texts/Message Here</li>" above"</ul>" tag if you want to add another texts with bullet list styles.

Or you can copy and paste the code below direct to your Blogger editor's page (in HTML mode).

<style>
.post ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikASvVO0kw4EiUvP1EoQBWsYs9hIIGKbH5lHjbWdAxKuxG8ppLvIv56CFv41GSekkWTto95lIJ2gecAxp7neVbYCF2ROEnM7PmYUmALz90ILCbp1dn8ClAvNk21yhlK99Sn9j84rbRdOc/s1600/blogger+logo14.png) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
border: 1px solid #DDC;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyC5Dm28vcnLS6LV1C6qqinZHVccs-HlqOtoKcjWe0-9sObrzpcVfHpNdRzclDpIC39ol7xUByozin48ALlhBrNmtdRFh3EtAMUqkMgenjqvIy0hZcKz1HYbFtOTvYJnfztlUoyGads38/s1600/blogger+logo+15.png) no-repeat scroll 0px 3px;
}
</style>
<ul>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
<li>Your Texts/Message Here</li>
</ul>

 Hope  this post is helpful to you buddy. Always Give thanks to the Lord!
Enjoy!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook