Saturday 21 September 2013

Add Email Subscription Widget With Social Media Below Blogger Posts v.1

 Email Subscription Widget With Social Media Below Blogger Posts Increases Your User Subscriptions To Feed Burner, Twitter, Facebook and stumbleupon

Subscription Widget With Social Media Widget Generator


  • In Customize Field Enter The All The User Names In Corresponding Boxes
  • Click on Generate Button 
  • You Can Watch Demo (In New Tab) By Clicking on Demo
  • Copy The Generated Code And Follow Below Steps


Copy The Generated Code And Follow below Steps
  • First go to Blogger Dashboard > Template
  • Download a copy of your template
  • Click on Edit HTML
  • Find below code in your template   (Want help to find code Click Here)
<data:post.body/>

  • If You Find 3 <data:post.body/> Then Add The Code After or Below 2nd One


Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.

< href="javascript:expandcollapse('subtopicID')">Direct Mode :
    How To Add Email Subscription Widget With Social Media Below Blogger Posts v.1?

<style>
#nbt-subs-box {
background: #F1F1F1;
margin: 0 auto;
padding: 10px;
border: none;
border-radius: 10px;
width:350px;
height:270px;
}
#nbt-subs-box h2 {
font-size: 27px!important;
text-align:center;
font-style: italic;
font-variant: small-caps;
}
#nbt-subs-box h3 {
font-size: 15px;
font-family: arial, sans-serif;
text-align:center;
font-style: italic;
font-variant: small-caps;
}
#nbt-subs-box div.row {
text-align:center;
margin-bottom:10px;
}
#nbt-subs-box img{
display:inline-block;
border:none;
}
#nbt-subs-box .email {
clear:none;
}
.email {
clear: both;
width: 100%;
margin: 10px 0;
}
.emailform {
position: relative;
width: 300px;
background:#FFF;
margin: 0 auto;
-webkit-box-shadow: 1px 1px 2px #dfdfdf;
-moz-box-shadow: 1px 1px 2px #dfdfdf;
box-shadow: 1px 1px 2px #dfdfdf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}


.emailinput {

height:30px;
margin: 0 auto;
padding: 8px 40px 8px 10px;
border:none;
background: none;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #666;
}
.emailinput {
padding-right: 30px !important;
width: 260px !important;
}
.emailbutton {
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-top-right: 4px;
-moz-border-radius-bottom-right: 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-top-left: 0px;
-moz-border-radius-bottom-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 9px;
position: absolute;
right: -3px;
top: -1px;
bottom: -1px;
display:block;
line-height:16px;
}
.emailbutton {
padding: 14px !important;
}

.emailbutton, .formbutton {

background: #f7f8f9;
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: -ms-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 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton:hover, .formbutton:hover {
background: #f1f1f1;
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: -ms-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;
}
</style>


<div id='nbt-subs-box'>

<h2>Do you Like this Article</h2>
<div class='row'>
<div class='fb-like' data-href='http://www.facebook.com/newbloggertricks' data-send='true' data-width='300' data-show-faces='false'></div>
</div>
<div class='row'>
<a href="http://feeds.feedburner.com/newblogger-tricks" title="Suscribe to RSS feed"><img class='middle' src="http://2.bp.blogspot.com/-N2SnFgmEnF4/Uj249jM1dDI/AAAAAAAAAuk/dL1YT_ZbyeI/s1600/nbt-RSS.png" alt='rss'/></a>
<a href="http://twitter.com/newbloggertrix" title="Follow me on Twitter"><img class='middle' src="http://4.bp.blogspot.com/-T1B5mGRXRCw/Uj24-ELwwlI/AAAAAAAAAug/9fY6KQ_yHBA/s1600/nbt-Twitter.png" alt='twitter'/></a>
<a href="http://www.facebook.com/newbloggertricks" title="Became Fan on Facebook"><img class='middle' src="http://4.bp.blogspot.com/-d4WkASYmYGI/Uj249ukrRKI/AAAAAAAAAuU/5YHvRjRac9A/s1600/nbt-FaceBook.png"/></a>
<a href="http://www.stumbleupon.com/stumbler/gsrdatta/"><img src="http://1.bp.blogspot.com/-H5bsb-7SlXk/Uj249qzXO4I/AAAAAAAAAuQ/HflBvDsb1bY/s1600/nbt-Stumbled.png" alt='stumbleupon'/></a>
</div>
<div class='row'>
<h3>Get Subscribe to Free Email Updates!!</h3>
</div>
<div class='row'>
<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=newblogger-tricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' class='emailform'>
<input type='hidden' value='newblogger-tricks' 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='SignUp' title=""/>
</form>
</div>
</div></div>


  • Replace all(three) newblogger-tricks with your Feedburner Username
  • Replace all(two)  newbloggertricks with your Facebook Username
  • Replace  newbloggertrix with your Twitter Username
  • Replace gsrdatta with your stumbleupon username

Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.





0 comments:

Post a Comment

  • Home
  • About Us
  • Contact Us
  • Write For Us
  • Sitemap
  • Privacy Policy
  • Back To Top