Social Sites Subscription Widgets

Social Sites Subscription Widgets 

 

Today i am going to design a new Social Subscription Widgets, but here a most important question is arised why we are use these Social Subscription on my sites or blog ? It's very simple answer of this question, Social Sites fetch more traffics on our sites so we are use Social Subscription on our sites or on blog, These Buttons are simple to use, just click on these button and automatically go to related sites. For Live Demo Click On Below Buttons

 


Feature of These Social Subscription

1. Easy to use.
2. Get more Traffics form social sites.
3. Directly redirect on related social sites page

How to add this widget
 

1. Login to blogger.
2. Choose your blog.
3. Go to Layout.
4. Choose Add gadget.
5. Choose HTML/JavaScript.
6. Paste All the below code.
7. Save

For More Detail how to add widgets Click Here

Copy all the CSS and HTML code and paste on your blog

CSS CODE

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/s1600/social_sprites.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/s1600/social_sprites.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/s1600/social_sprites.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/s1600/social_sprites.png) no-repeat 0px -454px;
}
.social-wrap li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/s1600/social_sprites.png) no-repeat 0px -580px;
}

.social-wrap li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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/AVvXsEjuni3fAaJ73XOTL9UO1H45290yjkxkkqktoYRxXc2gYGgtU20ZPiser5B28lVtOX-22MTahRJnco1E-iL-8kdq_MQYERnrToXLi1paV_avp2x2kXlJDg5R921cB4cm3CJTOSc0UD2Zxv7z/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" rel="nofollow" target="_blank" title="Facebook"></a></li>
<li><a class="twitter1" href="http://twitter.com/sites18" rel="nofollow" target="_blank" title="Twitter"></a></li>
<li><a class="google-p1" href="https://plus.google.com/b/111017048615442636299" rel="nofollow" target="_blank" title="Google Plus"></a></li>
<li><a class="rss1" href="http://feeds.feedburner.com/sites18" rel="nofollow" target="_blaank" title="RSS Feed"></a></li>
<li><a class="pinit1" href="http://www.pinterest.com/sites18" rel="nofollow" target="_blank" title="Pinterest"></a></li>
<li><a class="linkdin1" href="http://www.linkedin.com/in/sites18" rel="nofollow" target="_blank" title="Linkedin"></a></li>
</ul>
</div>
</div>

Note: Change all the green text with your own Social profile
.
If you have not all Social profile and you want to add some button then simply remove that line
For Example: Suppose you have no feedbuner id then remove...
<li><a class="rss1" href="http://feeds.feedburner.com/sites18" rel="nofollow" target="_blaank" title="RSS Feed"></a></li>

For Sites

If You have a sites then 

Copy and paste all the CSS Code and paste before </head> tag.

Copy and paste HTML Code before </body> tag.

For Wordpress

1. Login on Wordpress
2. Click on Apperance
3. Go on Widgets
4. Add A text Widget to your Sidebar and paste code in content area.

That's it.