How To Customize Bullet Style With An Amazing Mouse Hover effect....


  • The Look of your post is very importent to make Precious effect on Reader...
  • It can be done very-well by " Giving An Amazing Mouse Hover Effect " To Your Post, and Give An Amazing Look Your Post...

    Note




    How To Add Mouse Hover effect To Your Blog.?
  • At First, Login to Your Blogger Account...
  • Go To Blogger Dashboard...
  • Click On " Template " Option...



  • Click On " Edit HTML " Option...


  • Now Find For (clrt+F) ]]></b:skin> In Your Template...
  • Copy Bellow Code & Pest just Before ]]></b:skin>...


    /*----image Hover Effect----*/
    .post ul li{list-style:none; }
    .post ul li {
    line-height: 1.0em;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-vVuqz2dSRlaMs9c0xxGP-C10X8MDG5KrMJV8F-bxe8EDvuexXpV8vkdBOj5xqkED9PDOj65N95cqZoxgKhTvAsIYWD921lzQT1Ktkokli8dr6FavJHsRQKPXw5YWZd-fkVWtBdOOhhs/s400/255.gif) no-repeat scroll -4px 0px;
    margin: 1.0em 0; padding: 0 0 1.0em 28px; }
    .post ul li:hover {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfe4eJK-ExNJSv9dKuCRErGsZt8jV8T5EBmPKWd20pc0e3NPS-bQzY6_4nUfHd9sbxvaYvdxJDn3IfenYJUSkFnz2h-RIPeRlsiCZ1DcxZXwR4bQMm8MNdD7nsZ5Li5sZpBB_-7phgLP4/s400/251.gif) no-repeat scroll -2px 0px; }


    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...
    Just Save Your Template...I Hope It Will Work...
    If You have any Problem then Please make a comment....
    Thanks For Visit....