Tuesday 7 May 2013

Bullet List Style Customization With Image Hover Effect For Blogger

Today I am showing a new tutorial that will help you to customize your Bullet style in bloggger.
This Tutorial is very simple,You need only to apply the Procedure that are Given Step by Step on \bloggingToolz(BTz).
If you Feel any Problem Please Leave a comment.We'll Help you very soon.
The important thing before you changing your template is that Backup your template First. because if you made any mistake it will affect your blog or your Blog's Traffic. then you can easily set your template.

First of All Go to Blogger.com.
Go to Layout and Then also Click on Edit HTML.
Press CTRL+F the Search option is appear.
Find ]]></b:skin>
Just above the ]]></b:skin> paste the Following Code.

.post {background: #fff;width: 610px;margin: 0px 0px 35px;padding: 10px 15px 10px 10px;-webkit-border-bottom-right-radius: 10px;-moz-border-radius-bottomright: 10px;border-bottom-right-radius: 10px;box-shadow: 1px 3px 4px rgb(188, 188, 188);}.post ul {list-style:none;}.post ul li {line-height: 1.4em;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiljLd8ZPpnFLx2LOGUmKnzaWSFRfF-rhQOMAFBGVyHFw7l8wTw0zQI9rj7ZT6Evl29J9tngOTHGi4_VRYuPzNc2q56m4JLWSkBrRbi6KYus1VyfrAK3Y5hToiOG8kvBcUduDQFwCWjuZg/s400/255.gif) no-repeat scroll 0px 4px;margin: 0.3em 0;padding: 0 0 0.8em 20px;}.post ul li:hover {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPl7c1LDV1H3EACd-cCNgrt9c_qAwXqk7r6OpXI5i4hG1Eyf-DmtQTowmOGXUyiTAUn8J1DU-6DfXcjQRtU1vZyhYZdIlgPYPIqZpzmYHet36MxLOs6LzhRbn5izyOls3z1Gsst2UGlc/s400/251.gif) no-repeat scroll 0px 4px;}.post-labels {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0yXf7jp3jp5UJc1G9YYfkGBn7D5I9iWRhUkNK6mY8UGxWz4Y0fgRuBQ_dEebOdo-hXjYSWmYrdpWMfSVSTcYHhMj5PUFUOS5l88_RI4wnFORqzY5nmW_z61SMnXK6PNnhofvyDLIUyQeQ/s400/labels.png") no-repeat scroll 0% 150% transparent;padding-left: 20px;padding-top: 3px;color: rgb(137, 137, 147);font-family: Arial;}.post h2 {font:bold 210% Arial, sans-serif;line-height:1.2em;margin: 0 0 7px;padding: 3px 0px;}.post h2 a, .post h2 a:visited {display: block;text-decoration: none;color: rgb(74, 73, 73);text-shadow: 0px 1px 1px #666;}.post h2 a:hover {color: #828282;text-decoration: none;}.post h3 {color: #4E555A;border-top: 1px dotted #4E555A;border-bottom: 1px dotted #4E555A;padding: 3px;}.post h4 {color: #4E555A;border-top: 1px dotted #4E555A;border-bottom: 1px dotted #4E555A;padding: 3px;}.post h5 {color:#289728;border-bottom:1px solid #289728;padding:3px;font: 12px bold sans-serif, arial;}.post h5:hover {color:#666;border-bottom:1px solid #666;}.post-body {margin: 0 0 .75em;line-height: 1.6em;font-size:13px;}.post-body blockquote {line-height: 1.3em;}