Beautiful Social Sharing Widget with Hovering Effect | InfoTechBlogging InfoTechBlogging: Beautiful Social Sharing Widget with Hovering Effect

Posted by Syed Muhammad Ali

It’s been a long time we have posted on ITB. I was a little busy and could not gave time to blogging but now we are back with some awesome widgets and glorious articles.

Today we are going a unique social sharing widget made by ITB. Using this widget, you will allow your blog visitor to like your profile page on Facebook or share it on Twitter or Subscribe your Blog.

This is an Awesome widget made by ITB by using which you can boost up your blog rankings!

This is a social sharing widget with awesome hovering affect.

Just Follow the Below Simple Steps to Add this Awesome Widget to Blogger

  • Log- In to your Dashboard
  • Now Search for ]]> tag inside template
  • Paste the Below code Just Above ]]>

.social_icons {
    float: center;}.social_icons ul {    margin: 0px;    padding: 0px;}.social_icons ul li {    float: left;    display: block;    position: relative;    text-indent: -99999px;}.social_icons .twitter a {    background: url(http://3.bp.blogspot.com/-0p7ZvRhOHJA/Utt7PdUPgMI/AAAAAAAAA9M/Ab4kTwinp0Y/s1600/Social_Icons.png) no-repeat;    width: 18px;    height: 15px;    float: left;    background-position: -32px;}.twitter:hover {    background: none repeat scroll 0% 0% rgb(113, 218, 247);}.rss:hover {    background: none repeat scroll 0% 0% #E8C165;}.facebook:hover {    background: none repeat scroll 0% 0% #93A4D8;}.social_icons .rss a {    background: url(http://3.bp.blogspot.com/-0p7ZvRhOHJA/Utt7PdUPgMI/AAAAAAAAA9M/Ab4kTwinp0Y/s1600/Social_Icons.png) no-repeat;    width: 18px;    height: 15px;    float: left;    background-position: -11px;}.social_icons .facebook a {    background: url(http://3.bp.blogspot.com/-0p7ZvRhOHJA/Utt7PdUPgMI/AAAAAAAAA9M/Ab4kTwinp0Y/s1600/Social_Icons.png) no-repeat;    width: 12px;    height: 15px;    float: left;    background-position: 5px;}.social_icons .facebook {    border-right: 1px solid #ddd;}.social_icons ul li {padding: 20px;border-left: 1px solid rgb(221, 221, 221);float: left;width: 20px;

}

  • Now Paste the Below Code inside the tag in your template where you want the widget to appear 

 

  • Change the widget position by replacing center with left or right.
  • Replace Infotechblogging with your Facebook Page Id
  • Replace Itechblogging with your Twitter Profile Id
  • Replace Infotechblogging with your Rss Feed Id.

Congrats! You are Done

You can see this Awesome widget on your Blog.

If any problem persist during installation, Ask us in Below Comments:).

Follow Us!

About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter