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(http://3.bp.blogspot.com/_7wsQzULWIwo/SuM3oFg5zlI/AAAAAAAACHo/n5UluB5ugMI/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(http://2.bp.blogspot.com/_7wsQzULWIwo/SuM3oYoTkRI/AAAAAAAACHw/Dig1etGrcpY/s400/251.gif) no-repeat scroll 0px 4px;}.post-labels {background: url("http://1.bp.blogspot.com/-RrdRaYQFhog/UPrK1zWtmvI/AAAAAAAAIuA/nnuBJvamrKc/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;}
  • Save Your Template and your Work Have Done.
If you Like this Post Kindly Leave a comment about this Post Because your Comment is valuable for us.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...


:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

© All Blogging Gadgets and Tools
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top