random
1

Add Cool And Stylish Recent Comments Widgets In Blogger Blog

Hey folks, I am back here another remarkable  blogger blog widget i.e cool and stylish Recent Comments widget for blogger blog. That widget has mouse hover animation in it, really you would be enjoy after placing on your blogger blog. Here is how!

Shouted Blog's Gift...!
Responsive And Automated Featured Posts Slider Widget To Your Blogger Blog

Add Cool And Stylish Recent Comments Widgets In Blogger Blog

  1. First Off, Go To Your Blogger Dashboard,
  2. Select "Layout" Tab From Blogger Dashboard.
  3. Now Choose "Add A Gadget".
    Add Cool And Stylish Recent Comments Widgets In Blogger Blog
    Add Cool And Stylish Recent Comments Widgets In Blogger Blog
  4. New Window Would Be Open.
  5. Just Select HTML/JavaScript.
  6. After That Copy the Below Code And Paste In To It.
  7. Just Copy the Below Code And Paste In to It.
    1. <style type="text/css" scoped> 
      ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;} 
      .allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
      .allbloggertricks_recent li:hover{border:1px solid #ddd;
      -webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
      .allbloggertricks_recent a {text-decoration:none;}
      .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px 
      #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden} 
      .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px} 
      .allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} 

      </style>
      <script type="text/javascript">
      //<![CDATA[
          var
       numComments  = 5,
       showAvatar  = true,
       avatarSize  = 35,
       roundAvatar = true,
       characters  = 40,
       defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
       hideCredits = true;
       maxfeeds=50,
       adminBlog='Your Name';
      //]]>
      </script>
      <script type="text/javascript" src="http://files.allbloggertricks.com/Scripts/abt-recent-commentsv3.js"></script>
      <script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
      </script>
  8. You Have Done.
  9. Go To Your Blogger Blog Live And See The Cool And Stylish Recent Comments Widget With Mouse Hove Effect.

Customization

Yo Can Change All The Blue Highlighted Text  As You Are Interested.
Shouted Blog's Gift...!
Add Cool And Stylish Recent Comments Widgets In Blogger Blog Reviewed by Ghulam Haider on 02:40:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.