How To Add Unique Subscription Widget With Social Button Below Post To Blogger Blog

Email subscription box is usually a strong gadget for each blog.If you have more no of subscribers then clearly they’re going to contribute to the massive no of traffic on your blog . Subscribers are the backbone of any successful blog. The additional audience you have the stronger you get. people subscribe to your Feeds only if you publish quality content. therefore it’s important that you just could attempt each possible means of accelerating the amount of subscribers to your blog whether you’re a WordPress user or Blogger user. By using this unique subscription widget you will  link  your  social   media  profile   Facebook, Twitter  Rss Google  Pinteret and and subscribe field. it’ll facilitate to induce the new updates by emails. you’ll be able to check it  from below   demo link .

Related Articles:

unique subscription-box-for-blogger


How To Add This To Your Blogger/Blog

  • Go to Blogger > Template > Click Edit HTML.
  • Search CTRL + F for this piece of code:<data:post.body/>
  • Copy and paste the below code just after <data:post.body/>

<h2 class=”title” style=”font-weight: normal;”>

<b><span style=”font-size: medium;”>Subscribe to Blogger Heroe Today! Receive the Latest Tutorial via email!</span></b></h2>

<style type=”text/css”>

#bloggerheroe-subscribe-wrapper {

background: url( repeat scroll 0 0 transparent;

padding: 3px;


#bloggerheroe-subscribe-box {

background: url( repeat scroll 0 0 #F7F7F7;

border-radius: 15px;


overflow: hidden;


a.linkopacity img {


-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;

-webkit-transition:All .5s ease;

-moz-transition:All .5s ease;

-ms-transition:All .5s ease;

-o-transition:All .5s ease;

transition:All .5s ease;

padding: 3px;

border: 1px solid #999;


a.linkopacity:hover img {


-moz-opacity: 1;

opacity: 1;

-khtml-opacity: 1;

-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);

-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);

box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);


#bloggerheroe-subscribe-box:hover table {

top: 0;


#bloggerheroe-subscribe-box h1{

margin-top: 5px;

color: black;

font-family: arial;

font-size: 15px;

margin-bottom: 5px;

line-height: 14px;

font-weight: bold;

text-align: center;

letter-spacing: -1px;


#bloggerheroe-subscribe-box table {

position: relative;

top: 40px;

-webkit-transition:All .5s ease;

-moz-transition:All .5s ease;

-ms-transition:All .5s ease;

-o-transition:All .5s ease;

transition:All .5s ease;

margin-bottom: 0px;


#bloggerheroe-subscribe-box td {

padding: 2px;


#bloggerheroe-subscribe-box input{

background: white;

border: medium none;

font-size: 12px;

padding: 10px;

width: 150px;

color: #666;

font-family: arial;

margin-bottom: 3px;

width: 55%;


#bloggerheroe-subscribe-box input:focus{outline:none;}

#bloggerheroe-subscribe-box .submit{

background: #E73827;

color: #fff;

cursor: pointer;

font-weight: bold;

text-shadow: 0 1px 2px black;

width: 90px;

font-family: arial;

margin-left: -3px;

font-size: 14px;



<br />

<div id=”bloggerheroe-subscribe-wrapper”>

<div id=”bloggerheroe-subscribe-box”>

<form action=”” method=”post” onsubmit=”‘‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true” target=”popupwindow”>


<input name=”email” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;enter your email address…&quot;;}” onfocus=”if (this.value == &quot;enter your email address…&quot;) {this.value = &quot;&quot;}” size=”20″ type=”text” value=”enter your email address…” />

<input name=”uri” type=”hidden” value=”bloggerheroe” />

<input name=”loc” type=”hidden” value=”en_us” />

<input class=”submit” type=”submit” value=”subscribe” /></center>





<tr><td><a class=”linkopacity” href=”” target=”_blank”><img src=”” /></a></td>

<td><a class=”linkopacity” href=”” target=”_blank”><img src=”” /></a>


<td><a class=”linkopacity” href=”” target=”_blank”><img src=”” /></a>


<td><a class=”linkopacity” href=”” target=”_blank”><img border=”0″ src=”” /></a>







Make This Changes

  • Replace Bloggerheroe with your Feedburner ID
  • Replace bloggerhero with your Facebook username
  • Replace bloggerhero with your Twitter Username
  • Replace 106957260261276964704 with your Google Plus Username
  • Now save.
  • And you are done…

BLOGGER HEROE runs on the Genesis framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress.Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

The following two tabs change content below.
Adrian Lucernas is the founder of Blogger Heroe.. his appreciation about our technology. He is open minded who's willing to explore beyond his knowledge, And God is the center of his being.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

Speak Your Mind