How To Add Mashable WordPress Style Social Subscription Form To Blogger

Freshly we distributed How to Add All In One Social Media Sharing And Subscribing Widget For Blogger to you. And today we bed added but extremely fair widget that give prepare your sidebar undiluted and sportsmanlike and module sure appeal visitors to subscribe. This widget is a fashionable container which displays the complete sort of subscribers, contains RSS link, Facebook link, Twitter link, and Google + link with hover effects. It is also contains a beautiful subscription gathering where visitors can submit there emails to undergo liberated website updates. Now without soul to the tutorial of adding a glorious Subscription descriptor for your Journal or Website sidebars.

Adding Mashable WordPress Style Social Subscription Form

• Login to your Blogger Dashboard.
• Click the drop-down menu and select "Layout".
• Click on an "Add a Gadget" link.
• Scroll and find "HTML/JavaScript" element from the pop-up gadget list.
• Copy the code below and paste it inside the "Content Box".

<!--WordPress Style Social Subscription Form By www.bloggers-hero.blogspot.com-->
<style>

.Subscribe-BH h6{
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLILIpy1WbBaynfW61L9sfJEp57kEPUECQNiKD5jtN0eQ1JAMKitUgm0IdpcTFusnIugsRRCEUpDFjFPMYj6IPt6h3-NcFqBHLmvqZzcjG1g7HuONmFxKN-d2ziaT-U3q-3Mfsm748He8/s300/Subscribe%252Bblogger%252Bheroe.gif) no-repeat;height:50px;
margin:0px 0 0px 0;
padding:0px 20px 0px 0px;
font-size:0px;
font-family:Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
text-shadow:0 1px 0 #fff;
}

ul.social { 
list-style: none; 
margin: 10px; 
overflow: hidden;
}

.social li { 
float: left; 
background: none !important; 
padding: 0 !important; 
margin: 0 8px;
}

.social li a { 
display: block; 
width: 50px; 
height: 40px; 
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhntqDP3gG1_LWG9YAKNQmyEDuxZxkcXOPhtfoMsElY-sFwM3aNGGeygu9pAPw9ANayiuj1WRYgfbDer8hCzo0Bl22-iiqG5ADauq8sI_9s8zBIriN0iZwGuSFq8iLns6btb1z0JuOO3ANS/s250/Subscribe%252Bbloggerheroe%252BSocial.png") no-repeat transparent; 
text-indent: -99999em !important;
-webkit-transition: ease-in 0.15s all; 
-moz-transition: ease-in 0.15s all; 
-o-transition: ease-in 0.15s all; 
-ms-transition: ease-in 0.15s all; 
transition: ease-in 0.15s all;
}

.social li a:hover { 
padding: 0 !important;
}

.social li.rssicon a { 
background-position: 0 0;
border-right: 1px solid #e6e6e6;
}

.social li.twicon a { 
background-position: -50px 0;
border-right: 1px solid #e6e6e6;
}

.social li.fbicon a { 
background-position: -100px 0;
border-right: 1px solid #e6e6e6;
}

.social li.gicon a { 
background-position: -150px 0;
border-right: 1px solid #e6e6e6;
}

.social li.pinicon a { 
background-position: -200px 0;
}

.social li.rssicon a:hover { 
background-position: 0 -50px;
border-right: 1px solid #e6e6e6;
}

.social li.twicon a:hover { 
background-position: -50px -50px;
border-right: 1px solid #e6e6e6;
}

.social li.fbicon a:hover { 
background-position: -100px -50px;
border-right: 1px solid #e6e6e6;
}

.social li.gicon a:hover { 
background-position: -150px -50px;
border-right: 1px solid #e6e6e6;
}

.social li.pinicon a:hover { 
background-position: -200px -50px;
}

.Subscribe-BH{
width: 300px;
float: left;
}

.Subscribe-BH .count{
color:#F17C18;
font-size: 14px;
font-weight: bold;
font-family: Helvetica, Arial; 
height: 40px;
line-height: 40px;
vertical-align: middle;
width: 310px;
padding: 0 0px 0 4px;
margin:0;
}   

.Subscribe-BH .count span.bigcount{
color:#F17C18;
font-size: 24px;
font-family: Helvetica, Arial;
line-height: 39px;
vertical-align: middle;
margin:0px;
padding:10px 0px 0px 0;
}   

.Subscribe-BH .subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}   

.Subscribe-BH .emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 15px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}   

.Subscribe-BH .emailsub .emailicon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9c1tGoxXKxBFFIZdQldXYBzD6JSuXWQvsxr60mkVZY0Msmx-7CvSjAfCLdRmpBUDLn1HQPb1IuZiNTrdqhkDCq11oq_2IG-ZFTffSmfQjTgvkmlYa7Ozo16YZSVDKIRkv7JX4iQzATJQv/s32/Subscribe%252Bblogger%252Bhero%252Bsubscribe.png) no-repeat 0 2px;
float: left;
padding: 0px 15px 10px 40px;
margin: 0 0 0 5px;
width: 300px;  line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #333;
}

.emailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}

.emailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}

.email{
clear:both;
width:100%;
margin:10px 0;
}

.emailform{
position:relative;
width:300px;
margin:0 auto;
}

.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}

.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}

.emailbutton{
padding:8px !important;
}

.emailform, .emailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}

</style>

<p style="display:none;">Email Subscription box by<a href="http://www.bloggers-hero.blogspot.com/">Adrian Lucernas</a></p>

<div class="Subscribe-BH">

<h6 class='title'>Subscribe Now!</h6>

<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/bloggerheroe"><img src="http://feeds.feedburner.com/~fc/bloggerheroe?bg=F17C18&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a>
</span>  Learn Pro Tricks daily </div>

<div class="subicons">
<ul class="social">

<li class="rssicon">
<a href="http://feeds.feedburner.com/bloggerheroe" rel="nofollow" target="_blank">Rss</a></li>

<li class="twicon">
<a href="http://twitter.com/jaa_09" rel="nofollow" target="_blank">Twitter</a></li>

<li class="fbicon">
<a href="http://www.facebook.com/bloggerhero" rel="nofollow" target="_blank">FaceBook</a></li>

<li class="gicon">
<a href="https://plus.google.com/106957260261276964704/" rel="nofollow" target="_blank">Google+</a></li>

<li class="pinicon">
<a href="http://pinterest.com/jaa09" rel="nofollow" target="_blank">Pinterest</a></li>

</ul>
</div>

<div class="emailsub">
<div class="emailicon">
<p style=" width:240px;
color:#3A3A3A;
font-size: 13px;
font-weight: normal;
font-family: Helvetica, Arial; 
padding:0;
margin:0;
">Receive Quality Tutorials Straight in your Inbox   by submitting your Email ID below.</p>
</div>   

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

<input type="hidden" value="Bloggerheroe" 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="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div></div> 
<!--WordPress Style Social Subscription Form By www.bloggers-hero.blogspot.com-->

• Click "Save".
• View your blog to see the widget.

Make these important changes:

• You should need to change this (<a href="http://feeds.feedburner.com/bloggerheroe"><img src="http://feeds.feedburner.com/~fc/bloggerheroe?bg=F17C18&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a>) inorder to view your Feed Count. Just make sure your FeedCount is activated. If it is not yet activated, just follow the steps below on how to activate:

1. On your My Feeds page, click your feed, then click the Publicize tab.
2. If FeedCount isn't already active, apply your desired color/animation settings and click Activate.
3. Copy the URL that's in the src attribute of the <img> tag in the HTML code you're given to use to display FeedCount. It will start with http://feeds.feedburner.com/~fc/…

• http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe – You should replace this with your feedburner email subscription link. To get this, log in to feedburner, click on your feed. Then go to Publicize > Email Subscription. Activate and get the email subscription link under Subscription Link Code.
• Bloggerheroe – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is Bloggerheroe as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe
• http://feeds.feedburner.com/bloggerheroe – Replace this with your feedburner link.
• http://twitter.com/jaa_09 – Replace with your twitter profile link.
• http://www.facebook.com/bloggerhero – Your facebook page or profile link here.
• https://plus.google.com/106957260261276964704/ – Replace with your Google+ profile link.
• http://pinterest.com/jaa09/ - Your Pinterest profile link here.

I would be truly diverted to concentrate nigh your suggestions and feedback. If you visaged any discommode then do not fearfulness and let me know!