Multicolor Social Subscription Widget For Blogger And WordPress

Social media subscription widgets are most important part of any blog or website. I seem to have published a lot of social subscription widgets on Blogs Daddy Blog over the years. 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 multi-colors. 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.

You May Like To Read:

• 10+ Best WordPress Social Sharing Plugins
• Add Social Sharing Widget With Search Bar To Your Blog
• How To Add Social Subscribe With CSS3 Bubble Buttons
• Stylish Subscribe Icons Widget To Blogger And WordPress

Multicolor Social Subscription Widget

Live Demo

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

/*--------Multicolor Social Widget BlogsDaddy.com ------*/
<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/AVvXsEjFd2cgKUF6aBqWuGy05E1BMXu93deeMbgjbwV6yaFXYJwwnvywguuDfI62vh_rNykPHDAj7XJh83u2TYSALtpx7IlJJAxjwpxK5kcEYXyBpEUgTtHRBKVRVYOAi8Oy3h5jv_Px6rWnPzvt/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/AVvXsEikuLEVhODrefSPXXC6isY_FegnaWeJVMj3Fk9Xci2SyXjFWcyQ3PwTDLF5V-qNRf4uVa3TIOrMKmglxzMuQECjITiM6LPHFG8JnsFgodJ4pZuFKT2JPI_WgVNfcWsd7HghiyhkXCJJqa4F/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/AVvXsEiF-yz46sricBV30H2adq2cZx_3hcqAFbgsvzgJ04V7u32oFYQyCunHUZYt5ZOsuf1RbhZxP4XKps-KXzPdJ7fVpGr7KYqXLqk0ASvkH0udtHeM4Y-yKeiad6tbLH1u6ldKumjzEvAa0Pbp/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/AVvXsEhndG1oSR30Qb48pS3M28STyIras0aZnxxe5XfeIE4ajDS_QqxXLAnhnuZ5ucaQP_nt2RPy6dwgeBsWwyIzR7SO45rIjoFHahWXxj_K8YzSEjMUulr_5cwPSiPim3Q6Sm1JAr-XYPdUav5G/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/blogsdaddy" 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 mine, as you can see above mine is 'BlogsDaddy'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/YourId with YourId being the ID.

That's it hopefully this gadget will increase your blog subscribers ! Leave Your Comments And Questions Below.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.