Social Sites Share Button

Social Sites Share Button

This type of widgets are helpful to redirect your visitors on social sites pages which is created for sites, Social sites are fetch more traffics on your sites. For demo move mouse cursor on below buttons.

 

 

How to add this widget on blogger

Copy all the code CSS and HTML
Go Dashboard > Layout > Add Gadget > HTML > JavaScript > Save

How to add this widgets on sites

Copy all the CSS except  ( <style> and </style> ) code and paste inside <style> and </style> Tag.

Copy all HTML code and paste before </body> Tag.

CSS CODE

<style>
.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.social-wrap li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -454px;
}
.social-wrap li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -580px;
}
.social-wrap li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhVjQusr7J0eyoKD233BqWsjdAbP4PCRw1dJHSlQjK3z56Qb3vPuYy65iiTwpwOzT1k7YWfi1V6dsUnG_rtXCUnUh9UqvoMHzDi5wt4S0bqmoCR0l2a6oaBA0PuKjIWPsURzqBW2KbGCp/s1600/social_sprites.png) no-repeat 0px -711px;
}
</style>

HTML CODE

<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/sites18' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/sites18' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/111017048615442636299' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/sites18' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/sites18' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/sites18' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>

Settings

Replace all my id with your id,