MULTICOLOR SOCIAL SHARING WIDGET

Social media subscription widgets are most important part of any blog or website. In this tutorial I will show in simple steps how to add the social subscription widget to your WordPress or Blogger blog.
This is very attractive because of multicolor. Four different colors for every social network. It include nice hover style. you can link with RSS, Facebook, Twitter and StumbleUpon. Lets look at the tutorial.

Multicolor Social Subscription Widget

Add Multicolor Social Subscription Widget To Blogger Blog

• Go to Dashboard > Design > Page Elements.
• Click Add A Gadget. In New Window, Select HTML/Javascript .
• Copy The Code Given Below and Paste It Inside The Box.
• Save The Gadget

Add Multicolor Social Subscription Widget To WordPress Blog

• Go to Dashboard > Appearance > Widgets > Available Widgets
• Drag Text Widget Into a Sidebar.
• Paste In The Code.
• Save Widget & Its Done

Code For Multicolor Social Subscription Widget

<style type="text/css">
.blogsdaddy-social-widget {
width: 340px;
margin-top: -10px;
border:0px solid #000000;
}
.blogsdaddy-social-widget ul {
margin: 0;
padding: 0;
 
}
.blogsdaddy-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.blogsdaddy-social-widget ul li a {
color: #fff;
display:block;
}
.blogsdaddy-social-widget ul li a:hover {
color: #c9c9c9;
}
.blogsdaddy-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }
.blogsdaddy-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;  }
 
.blogsdaddy-social-widget ul li .rss {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL9hDVoIheWBZurwvo6ErWnONqipBgQrE1STL1TGHa1oTkTFxXFoGwhs88ane2MyujHLiHdhqKt48cDvWSLlRfDBPwr97LTtWn4SYRRYNtjOzI1-kVwa9ZfZWRWdRI2lF1TA_BjyVwPj5R/s1600/blogsdaddy-Rss.png")
 no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .twitter {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIQPEdSsh3Aj3LemJvDuUqsnvKMFnt9WQAwG2Ej8PvIfEFSC9lWKw56A0gnNjmHuSA7IN1Vo-YLSMW_6eV-rCJ7kO61daJnq8HoQCeHEM3ysfVEErD4AVfRQSWgYcJMxGzY967Z6y6PRw/s1600/blogsdaddy-twitter.png")
 no-repeat scroll 2px center #59a5d9;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .facebook {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijF3-6oaiKbMXpKMD8TkdrDyYkATcfefjX0Ut83eucqXwRk5lQ-NnayDCV3r7BTjVix2pd8kNvI1k9TNchRyBu09IovckOdllKG83C0iW_4HpCzTKh1swdFgoCOWdA4rpKFeRMclgrYQxG/s1600/blogsdaddy-facebook.png")
 no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .stumbleupon {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSl61E2I_kWZj0Fn9SgrrZ2y3eKMbmTBIQFVKCPGiQotxhGiwKcNrgjlapo56Eq9bsueaermdl3hkKm_JToAkT6d6wq7YvOJCeBmWI_hhDaaVrC8-1_-8qRGEa6lQv9iQybgD-Gu_eo6W2/s1600/blogsdaddy-stumbleupon.png")
 no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}
</style>
<div class="blogsdaddy-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/topbloggertrickstk" target='_blank' rel='nofollow'>Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/blogsdaddy"
target='_blank' rel='nofollow'>>Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogsdaddy"
target='_blank' rel='nofollow'>>Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/gaganmasoun"
target='_blank' rel='nofollow'>>Stumble on Stumbleupon</a></li>
</ul>
</div>

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

For the Email RSS you only need to replace your feedburner ID with your own. Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/YourId with YourId being the ID.

Kindly Bookmark this Post using your favorite Bookmarking service: