Blogger Ever

Subscription box and sharing buttons under post for Blogger

Subscription box and sharing buttons under post for Blogger

I've shared a e-mail subscription widget for Blogger,but this one allows reader to share what they reading.This sharing widget comes under post,with three sharing options of Google Plus,Facebook and Twitter.The adding of sharing buttons is a good idea,it supports the theory of sharing is caring and sometimes increase visitors.So lets begin.

Check Out This DEMO

Get our newsletters right into your inbox by subscribing us.
To add the widget follow the steps below,
  • Go to Blogger > Template > Edit HTML.
  • Find ]]></b:skin>
  • Then paste the following code just above it.

/*
----------------------------------------------------------
Subscription Box By Blogggerever.com
----------------------------------------------------------
*/
.besubscribe
{
background: #ff8c77 url('https://lh5.googleusercontent.com/-cLv2p2euz-Y/UXkg5cff_xI/AAAAAAAABXI/nHAoink5YnM/w449-h320/Untitled-3.png')scroll 5px 10px no-repeat;
background-size: 140px 110px;
box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.75);
color: #fff;
display: block;
font-family: segoe ui,verdana,arial;
font-size: 20px;
font-weight: 100;
margin: 10px 0;
moz-box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.75);
padding: 10px 10px 10px 150px;
text-shadow: 1px 1px 1px rgba(50, 50, 50, 0.75);
webkit-box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.75);
width: 100%;
}
.betextarea
{
background: #3e3e3e;
border: none;
color: #fff;
height: 30px;
margin-top: 5px;
moz-transition: all 0.3s ease-in-out;
ms-transition: all 0.3s ease-in-out;
o-transition: all 0.3s ease-in-out;
padding: 5px;
transition: all 0.3s ease-in-out;
webkit-transition: all 0.1s ease-in-out;
width: 250px;
}
.betextarea:focus
{
width: 300px;
}
.besubmit
{
background: #3e3e3e;
border: none;
color: #fff;
moz-transition: all 0.3s ease-in-out;
ms-transition: all 0.3s ease-in-out;
o-transition: all 0.3s ease-in-out;
padding: 6px;
transition: all 0.3s ease-in-out;
webkit-transition: all 0.1s ease-in-out;
}
.besubmit:hover
{
background: #000;
}
.be-post-sharing ul
{
list-style: none;
margin: 0;
padding: 0;
}
.be-post-sharing ul li a
{
cursor: pointer;
display: block;
float: left;
height: 25px;
margin-right: 5px;
overflow: hidden;
text-indent: -999px;
width: 25px;
}
.be-post-sharing span
{
float: left;
margin-right: 10px;
}
.be-post-sharing ul li.facebook-share a:hover,.be-post-sharing ul li.twitter-share a:hover,.be-post-sharing ul li.googleplus-share a:hover
{
background-position: 0 -25px;
}
.be-post-sharing ul li.facebook-share a
{
background: url('https://lh4.googleusercontent.com/-1c1sYfGyPMM/USeI665KqKI/AAAAAAAAAQU/kJRzR0qz-zU/w50-h100-no/Facebook-F-Metro.png');
background-position: 0 -50px;
background-size: 25px 50px;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.be-post-sharing ul li.twitter-share a
{
background: url('https://lh6.googleusercontent.com/-uewayCfklOA/USeI78EU14I/AAAAAAAAAQw/AK2iD_08GQk/w50-h100-no/Twitter-Bird-Metro.png');
background-position: 0 -50px;
background-size: 25px 50px;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.be-post-sharing ul li.googleplus-share a
{
background: url('https://lh6.googleusercontent.com/-hwGrsknSF_c/USeI67zmjjI/AAAAAAAAAQQ/HpKeGXy06yU/w50-h100-no/Google%252B-Alt-Metro.png');
background-position: 0 -50px;
background-size: 25px 50px;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
  • Then find <div class="post-footer"> and paste the following code just after it.
<div class="besubscribe">
Get our newsletters right into your inbox by subscribing us.
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="betextarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="YOUR_USERNAME" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="besubmit" value="Submit" type="submit" />
</form>
<div class='be-post-sharing'>
<ul>
  <span>Share it!</span>
<li class='facebook-share'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'>Facebook</a>
</li>
<li class='twitter-share'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
</li>
<li class='googleplus-share'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'>Google+</a>
</li>
</ul>
  <div style='clear:both'/>
</div>
</div>

  • Just replace YOUR_USERNAME with your Feedburner username.

Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.