Social/Email Subscription Widget Box for Blogger - Blogspot Blogs

This is another Social Subscription widget for Blogger.

There are two simple steps to install this widget! Adding CSS code and then Widget code!

1. Login to Blogger Dashboard > Choose your Blog > Templates > Edit HTML
2.  Select the Template > Click on Edit HTML > Proceed
3. Search for ]]></b:skin> by using "CTRL+F" Search box and place the below code before it.

CSS CODE:

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20"); .w2bOldSocial ul { font-family: 'Oswald', sans-serif; margin: 15px 0; overflow: hidden; } font-family: 'Oswald', sans-serif; margin: 15px 0; overflow: hidden;}.w2bOldSocial ul li { float: left; width: 90px; padding: 0 0 0 55px !important; margin: 0 0 0 5px !important; line-height: 48px !important; } float: left; width: 90px; padding: 0 0 0 55px !important; margin: 0 0 0 5px !important; line-height: 48px !important;}.w2bOldSocial ul li a { font-size: 20px !important; text-decoration:none; padding:0 !important; margin:0 !important; text-decoration:none; } font-size: 20px !important; text-decoration:none; padding:0 !important; margin:0 !important; text-decoration:none;}.w2bOldSocial ul li a:hover { text-decoration:underline; } text-decoration:underline;}.w2bOldSocial ul li.w2brss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVv2siwvOssp_Wy6vB3Qriosvv5wWRl5R1-VPKjDfVUaqo4Y9eJU21uiMcCHxUrwq4gct1tKryVol5jUMKuQOQBd_OaUuiLWA2XZPzeV-dQXCjr3WN5Zl_y9u1nCrtdqX5Je3KlbtpYv4/s48/RSS.png") no-repeat scroll left center transparent !important; } background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVv2siwvOssp_Wy6vB3Qriosvv5wWRl5R1-VPKjDfVUaqo4Y9eJU21uiMcCHxUrwq4gct1tKryVol5jUMKuQOQBd_OaUuiLWA2XZPzeV-dQXCjr3WN5Zl_y9u1nCrtdqX5Je3KlbtpYv4/s48/RSS.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2bmail { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPb0pSuH0hVViVxCiXUXy_f7M8822AjT_hQiAPCmMLFgJ1XzDScdswUV3fyPOS3hYHVKqp7VLfU_xBVnrHtvXwQpzYCpnp1g9gEWf7E58gpr6zbxZjsacSdee78_Ze2bJ3T0bjTXirJmQF/s48/Mail.png") no-repeat scroll left center transparent !important; } background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPb0pSuH0hVViVxCiXUXy_f7M8822AjT_hQiAPCmMLFgJ1XzDScdswUV3fyPOS3hYHVKqp7VLfU_xBVnrHtvXwQpzYCpnp1g9gEWf7E58gpr6zbxZjsacSdee78_Ze2bJ3T0bjTXirJmQF/s48/Mail.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2btwitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtS-hpRgBPXEJsKLoYRuzvWuMAOulsQmJH6CfdOuTaCmsxxwmOEmkVCwXeRxyGozx0Yzsf-lV8NNBI8c-h82dCXMN0smAZpi9OUSoDZCw3ein8rtWLBvTXfn9QNyFF33XpmUdUedO7RtK/s48/Twitter2.png") no-repeat scroll left center transparent !important; } background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtS-hpRgBPXEJsKLoYRuzvWuMAOulsQmJH6CfdOuTaCmsxxwmOEmkVCwXeRxyGozx0Yzsf-lV8NNBI8c-h82dCXMN0smAZpi9OUSoDZCw3ein8rtWLBvTXfn9QNyFF33XpmUdUedO7RtK/s48/Twitter2.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2bfacebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0GGKG6mFtCnp2bN1wQH14KijWvtsc6-RGn_8FACxmerW4yx0AzP661J-GmcFJf6gvycZtD8lUM44i0uKQEZ0EaDT7okK6wfUUzzKHYF-5ywnylr6_mZCLfcB6B0_KWIKAJ1tEEj8CrTyQ/s48/Facebook.png") no-repeat scroll left center transparent !important; } background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0GGKG6mFtCnp2bN1wQH14KijWvtsc6-RGn_8FACxmerW4yx0AzP661J-GmcFJf6gvycZtD8lUM44i0uKQEZ0EaDT7okK6wfUUzzKHYF-5ywnylr6_mZCLfcB6B0_KWIKAJ1tEEj8CrTyQ/s48/Facebook.png") no-repeat scroll left center transparent !important;}#w2bEmailsub { display: block; clear: both; margin: 10px 0; } display: block; clear: both; margin: 10px 0;}form.w2bEmailform { margin: 20px 0 0; display: block; clear: both; } margin: 20px 0 0; display: block; clear: both;}.emailText { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt_aVUFQGkePLRFKVL_N0Qocvos2kxAASl7lLAZNPi0ZEa0L_-yf2yZDw4fc_FVbDZg0W3J2gkzA7XMuH_xxoA2-IJuk65cK7Zhg09gMSIsEEdgRinlXA1qPYvCIKq5Y-DUOfxaB6mDyQ/s28/w2b-mail.png") no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt_aVUFQGkePLRFKVL_N0Qocvos2kxAASl7lLAZNPi0ZEa0L_-yf2yZDw4fc_FVbDZg0W3J2gkzA7XMuH_xxoA2-IJuk65cK7Zhg09gMSIsEEdgRinlXA1qPYvCIKq5Y-DUOfxaB6mDyQ/s28/w2b-mail.png") no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset;}.emailButton { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}

Adding The Widget:

1. Go to Layout > Click on Add Gadget on your sidebar
2. Choose HTML/JavaScript Gadget and Paste the below Widget Code

HTML CODE:

<div class="w2bOldSocial"> <ul> <li class="w2brss"><a href="http://feeds.feedburner.com/24tool">RSS</a></li> <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=24tool" >Email</a></li> <li class="w2btwitter"><a href="http://twitter.com/24tool">Twitter</a></li> <li class="w2bfacebook"><a href="http://facebook.com/24tool">Facebook</a></li> </ul></div><div id="w2bEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=24tool', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform"> <input type="hidden" value="24tool" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <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="emailButton" value="SignUp" title='' /> </form></div>

Customize: 

Replace all highlighted 24tools username in the above HTML code.

1. http://feeds.feedburner.com/24tool

2. http://feedburner.google.com/fb/a/mailverify?uri=24tool

(This is your feed burner username).

3. http://twitter.com/24tool

4. http://facebook.com/24tool

5. http://feedburner.google.com/fb/a/mailverify?uri=24tool

(This is your feed burner username).

6. value="24tool" 

Replace "24 tool" with your feed burner username.

Done!