Blogs Daddy's Social Subscription Widget For Blogger & WordPress

BlogsDaddy’s Social Subscription Widget for Blogger and WordPress blog.I am sure this will provide more attractive look to your blog.Last month I published two tutorials for stylish subscription widget and premium subscription box.Today I am giving the Code for new widget and How to add the Social Subscription Widget to your Blog.

This widget contains newsletter, rss, Twitter, Facebook & Youtube buttons with email subscription box.Let's start the tutorial:

You May Like To Read:

• Add JQuery Pop-Up Facebook Like Box To Blogger
• Add Beautiful Email Subscription Forms For Blogger
• Add Stylish Subscribe Icons Widget To Blogger And WordPress

Live Demo
Screenshot Demo:

Add Social Subscription Widget To Blogger

• Go to Dashboard > Design > Page Elements.
• Click Add A Gadget. In window, select HTML/Javascript .
• Copy the code below and paste it inside the box.
• Save The Gadget

Adding Subscription Widget To WordPress

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

See Also: Labnol Like Social Subscription Buttons For Blogger Blog

Code For Social Subscription Widget

<style>.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));border: solid 1px #dcdcdc;}

.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}

.social a:active{color:#000;border-color: #444;}

.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}

.emailform{margin:16px 0 0; display:block; clear:both;}

.emailtext{margin:10px 0 0;background:#f6f6f6 url(http://3.bp.blogspot.com/-3nqMfDFqsUQ/T4_x8t_XbaI/AAAAAAAAAok/oVXZ6X2RKsg/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}

.emailtext:hover{background: #f3f3f3 url(http://3.bp.blogspot.com/-3nqMfDFqsUQ/T4_x8t_XbaI/AAAAAAAAAok/oVXZ6X2RKsg/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}

.emailtext:focus{outline:none;}

.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}

.sub-button:hover{color:#444;border-color: #999;background:#ccc}</style>

<div style="width:300px;height:160px;border:1px solid grey;"><center><div class="social" style="padding: 0pt 0pt 0pt 5px;"> 

<table><tbody><tr><td> 

<a href='http://feedburner.google.com/fb/a/mailverify?uri= BlogsDaddy' target='_blank'><img alt='newsletters' src="http://2.bp.blogspot.com/-T6Jwvl78yt4/T6aQRn6CDmI/AAAAAAAABCU/vmj_BCGOv2U/s1600/mail.png" border="0" title='newsletters'/></a> </td>

<td> <a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank'><img alt='rss' src="http://2.bp.blogspot.com/-BkgRd2NvFT8/T6aQSYJiQnI/AAAAAAAABCg/IPE8JvSisT4/s1600/rss.png" border="0" title='rss'/></a> </td>

<td> <a href='http://twitter.com/BlogsDaddy' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-wDhM0i4yvb8/T6aQTdIRmSI/AAAAAAAABCo/CS61MLJ8QRo/s1600/twitter.png"  border="0" title='twitter'/></a> </td>

<td> <a href='http://www.facebook.com/BlogsDaddy' target='_blank'><img alt='facebook' src="http://1.bp.blogspot.com/-RvQpmf-y4PE/T6aQQqqjT2I/AAAAAAAABCQ/jEECzsdedY8/s1600/facebook.png"  border="0" title='facebook'/></a> </td>

<td> <a href='http://www.youtube.com/5abiRaag' target='_blank'><img alt=' youtube' src="http://1.bp.blogspot.com/-Lpu7KBe9Q2c/T6aQUbuQWBI/AAAAAAAABCw/bsKGA1q_WeQ/s1600/youtube.png"  border="0" title='youtube'/></a> 

</td></tr></tbody></table> </div></center>

<center>

<div class='sub-box'>

<div style="text-align: left; display: inline-block;">

<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8> 

<small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank' title='feedburner'>

<b>click here</b></a>, or subscribe to receive more premium tutorial just like it.</i></small> 

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="hidden" value="BlogsDaddy" name="uri"/>

<input type="hidden" name="loc" value="fr_FR" />

<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />

<input type="submit" class="sub-button" value="Enter" title='' alt='' />

</form></div></div></center></div>

See Also: New Stylish Subscription Box For Blogger/Wordpress Sidebar 

Remember Notes

• Replace "BlogsDaddy" with your own Feedburner username.
• Replace other Yellow Highlighted URL's With Your Social Profile URL's as Mentioned Above In Code.

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.