Bonus - A Small Social Profiles Widget With Hover Effect

social profiles widget with hover effect
Recently, we shared a guest post on writing a quality post by +Abdul Samad  and we also shared a tutorial on increasing the blog speed . So, after a long time working on the template, i decided to share a widget with you guys . This is a social profiles widget . This widget is very small and it will look perfect in your blog . This widget is coded with pure CSS and HTML . It will not slow down your webpage . This widget also has a hover effect. This copyright of this widget solely belongs to me . So,you can share this widget on your blog but you should provide proper attribution to my blog ! This widget has option to list your Facebook Page, Twitter Profile and your Google Plus profile . This widget can really increase your fan base on social sites as it is very small and attractive, grabbing the attention of your visitors . You will understand more about this widget after seeing the live demo of this on our demo blog ! 

social profiles widget with hover effect


Live Demo - Top Right Of Webpage

STEPS

1 . Go To Blogger - Template - Edit HTML
2 . Search For <body>
3 . Just After it paste the whole code given below 
4 . Now , Its time to do the necessary changes 

5 . Change The links highlighted in yellow with your social profile links
6 . All Done ! Now Save Your Widget And Hooray ! You have success at last !

Source Code

<style>
.top-social-block li a {
list-style: none;
display: block;
width: 28px;
height: 28px;
line-height:0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvaMQJz0f1_pMM1BrBUx4FM7kkRx-5VVc06LMtuY8Ix_V2ZRY_Mdr7sGPi4s6N07xnZODSEl3nC5Y4nAhb1_wsZPPHqtUqcJfBkGrORNBf3VCE8dCuUTME5QZ6f5fuOw0tCs76V6rw00/s576/social-icons.png) 0 -64px no-repeat;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-transition: all 0.2s linear;
}
.top-social-block ul { margin:0 15px 0 0;list-style: none; }
.top-social-block ul li { padding:0; float:right; border-left: 1px solid #E3E4E4;list-style: none; }
.top-social-block li a.twitter-top { background-position: -56px -64px }
.top-social-block li a.twitter-top:hover { background-position: -56px -92px }
.top-social-block li a.rss-top { background-position: -112px -64px }
.top-social-block li a.rss-top:hover { background-position: -112px -92px }
.top-social-block li a.facebook-top { background-position: -196px -64px }
.top-social-block li a.facebook-top:hover { background-position: -196px -92px }
</style>
<div class='top-social-block'>
<ul>
<li><a class='rss-top' href='http://bloggrkid.in/feeds/posts/default/'></li>
<li><a class='facebook-top' href='http://www.facebook.com/envyblogging'></li>
<li><a class='twitter-top' href='http://www.twitter.com/envyblogging'></li>
</ul>
</div>

Final Words

I have nothing to say other than to thank you readers for reading my blog . This widget is really an awesome one if you use it at the top of the webpage.Moreover , it can increase your fans on social networks ! 

12 comments:

  1. This widget is just awesome !
    I'm going to add this in my blog right away !

    ReplyDelete
    Replies
    1. Thanks For The Appreciation

      Keep Visiting

      Delete
  2. Nice One , Rizwan !
    I really love your widgets !
    Best of Luck !

    ReplyDelete
    Replies
    1. Thanks , Anshid For Your Valuable comment !

      Delete
  3. A wonderful widget from a wonderful blogger !
    Could you please tell us from where you studied CSS
    Eager to know your reply !

    ReplyDelete
    Replies
    1. First Of All , Thanks For The Appreciation
      I studied CSS from W3 Schools
      And Many other Websites !

      Delete
  4. Nice widget bro, i would love to try it out thanks for sharing this awesome widget

    ReplyDelete
    Replies
    1. It would be great if you add it in your blog !
      Thanks For your kind words

      Kep Visiting

      Delete
  5. Nice simple Short and sweet widget. I cant have any more words to describe.

    Regard's
    http://www.skillblogger.com

    ReplyDelete
    Replies
    1. Thanks Deep
      For Finally Approving my Ability

      Keep Visiting

      Delete
  6. great widget, hover effects always looks good to everyone.

    ReplyDelete
    Replies
    1. Thank You, gaurav For Appreciating My Widget

      Keep Visiting

      Delete