Home » Blogger Tutorials, Tricks and Hacks » How to Add Amazing Social Widgets

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add Amazing Social Widgets

How to Add Amazing Social Widgets

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,034 views

This is another cool social widget for you to integrate in your site. Safeer Ahmed shows you his version called Amazing Social Widgets.

Here’s how you can add to your Blogger blog:

  • Go to Blogger Dashboard.
  • Go to Layout > Add a Gadget > HTML/JavaScript.
  • Copy and paste the code provided below in the content area.
<style>
/*social icon By howdoblog.com*/

#head-htb{width:230px ; }

#head-htb ul li {list-style :none; padding: 0 0 0 1px; float: left;}

#head-htb ul li a {text-indent: -9999px; font-size: 0; line-height: 0;
overflow: hidden ; height: 64px; width: 64px ;border: 0px; background:transparent url(https://lh4.googleusercontent.com/-yEXXN_B-6l8/UCRV34EwUvI/AAAAAAAAAWw/p409CMgxlXw/s353/Social%2520Media%2520Widget.PNG)
no-repeat; display: block;}
#head-htb li#fb a {background-position: -210px 0px;margin:0px 0px;}

#head-htb li#fb a:hover {background-position: -210px 0px;margin:0px
0px;transform:rotate(30deg);

transform:rotate(15deg);

-ms-transform:rotate(15deg);

-moz-transform:rotate(15deg);

-webkit-transform:rotate(15deg);

-o-transform:rotate(15deg);

-moz-transition-duration: 950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}
#head-htb li#twit a {background-position: -290px 0px;margin:0px 0px 0px
7px;}

#head-htb li#twit a:hover {background-position: -290px 0px;margin:0px 0px
0px 7px;transform:rotate(30deg);

transform:rotate(-15deg);

-ms-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);

-webkit-transform:rotate(-15deg);

-o-transform:rotate(-15deg);

-moz-transition-duration: 950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}
#head-htb li#g a {background-position: 0px 0px;margin:0px 0px 0px -8px;}

#head-htb li#g a:hover {background-position:0px 0px;margin:0px 0px 0px
-8px;

transform:rotate(15deg);

-ms-transform:rotate(15deg);

-moz-transform:rotate(15deg);

-webkit-transform:rotate(15deg);

-o-transform:rotate(15deg);

-moz-transition-duration:950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}
#head-htb li#rss a {background-position: -68px 0px;margin:0px -3px;}

#head-htb li#rss a:hover {background-position: -68px 0px;margin:0px 0px
0px -3px;transform:rotate(30deg);

transform:rotate(-15deg);

-ms-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);

-webkit-transform:rotate(-15deg);

-o-transform:rotate(-15deg);

-moz-transition-duration: 950ms;

-webkit-transition-duration: 950ms;

-o-transition-duration: 950ms;

}
/*Social Icons howdoblog.com */
</style>
<div id="head-htb">
<ul>

<li id="fb"><a href="YOUR FB URL">Facebook</a></li>

<li id="twit"><a href="YOUR TWT URL">Twitter</a></li>

<li id="g"><a href="YOUR GOOGLE+ URL">Google+</a></li>

<li id="rss"><a href="YOUR RSS URL">RSS
Feed</a> </li>

</ul>

</div>

<div align="left">

<font size="0.125">

<a href="http://www.howdoblog.com/2012/08/amazing-social-media-widget-for-bloggers.html">

[Grab This]</a></font>

</div>
  • Save.

Note: Always make a backup first before doing any customizations in your template. Replace the following with your own URL links:

  • Your FB URL (Facebook fan page)
  • Your G+ URL (G+ profile or blog fanpage)
  • Your TWT URL (Twitter account)
  • RSS FEED LINK (feed links)

 

Liked It ? Please Share

Comments

3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Abdo Nour says:

    Hello Sir, I don’t understand what code should I use to add beautiful widgets, I am seeing too many codes in different places ?! Can u give me a specific code to put it please :)

  2. Safeer Ahmed says:

    http://www.howdoblog.com/2012/08/amazing-social-media-widget-for-bloggers.html

    Visit this source page.

    You will find right information in right way. Thanks

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here