Subcribe Box with Pure CSS Social Buttons blogger 2015

 Maher Afrasiab  2 years ago  Blogger templates, Blogger Tricks, Blogging, CSS Tricks, Web Developement, Widgets

New Subscribe box for blogger 2015 with pushable social buttons made with pure CSS and with unique, clean and elegant design.

Previously I have shared 14 css scrollbar styles for blogger and now I have created a fresh blogger widget and going to share it with you.

Giving option to your visitors and readers for subscription at the bottom of the every post often prove great to increase subscribers. And the more readers we get the more our blog grows faster. We should provide our visitors an easy, clean and clear way to subscribe with our blog and to like and follow on social media.

So, to provide a clean option to your readers for subscription with unique design I have created a new Subscribe box widget 2015 for blogger with pushable pure css social buttons.

I don't use any jquery to make social buttons pushable they are made completely with pure css.

After installation this widget will stick at the bottom of all the posts and let your visitors subscribe with your feed updates and also to stay connected with you on social networks.

Recommended Post:

1. 10 best free newspaper templates for Blogger
2. 11 Excellent CSS image hover effects for blogs

Add it to Blogger

1. Goto blogger dashboard >> Template
2. Backup your template
3. Click on edit HTML
4. Now search for ]]></b:skin> tag and just above it paste the following code:

 /*------------PakMax.net subwidget---------------*/
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
.roundbtn {
  margin-right: 20px;
}
#pmmash {
   border-style: solid;
  border-color:#34495e;
    border-width: 5px;
  padding:10px;
  background:#ecf0f1;
  width: 450px;

}  #pmmash a {
    color: white;
} .roundbtn {
  width: 75px;
  height: 75px;
  border: 5px solid #9a9a9a;
  display: inline-block;
  background-color: #6c6161;
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  border-radius: 75px;
  -moz-transition: all 35ms linear;
  -o-transition: all 35ms linear;
  -webkit-transition: all 35ms linear;
  transition: all 35ms linear;
  -ms-transition: all 35ms linear;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.roundbtn.sea {
  border: 5px solid #1abc9c;
  background-color: #16a085;
}
.roundbtn.red {
  border: 5px solid #e74c3c;
  background-color: #c0392b;
}
.roundbtn.blue {
  border: 5px solid #51a9ff;
  background-color: #0077ea;
}
.roundbtn.dark {
  border: 5px solid #34495e;
  background-color: #2c3e50;
}
.roundbtn .inner {
  position: relative;
  width: 75px;
  height: 75px;
  background-color: #9a9a9a;
  margin-top: -8px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
  -o-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
  -webkit-transition: margin 35ms 35ms, box-shadow 35ms linear;
  -webkit-transition-delay: linear, 0s;
  transition: margin 35ms 35ms linear, box-shadow 35ms linear;
  -ms-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
}
.roundbtn.sea .inner {
  background-color: #1abc9c;
}
.roundbtn.red .inner {
  background-color: #e74c3c;
}
.roundbtn.blue .inner {
  background-color: #51a9ff;
}
.roundbtn.dark .inner {
  background-color: #34495e;
}
.roundbtn:active .inner {
  margin-top: 0;
  -moz-box-shadow: #6c6161 0 8px 0 inset;
  -webkit-box-shadow: #6c6161 0 8px 0 inset;
  box-shadow: #6c6161 0 8px 0 inset;
  -moz-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
  -o-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
  -webkit-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms;
  -webkit-transition-delay: 0s, linear;
  transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
  -ms-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
}
.roundbtn:active.sea .inner {
  -moz-box-shadow: #16a085 0 8px 0 inset;
  -webkit-box-shadow: #16a085 0 8px 0 inset;
  box-shadow: #16a085 0 8px 0 inset;
}
.roundbtn:active.red .inner {
  -moz-box-shadow: #c0392b 0 8px 0 inset;
  -webkit-box-shadow: #c0392b 0 8px 0 inset;
  box-shadow: #c0392b 0 8px 0 inset;
}
.roundbtn:active.blue .inner {
  -moz-box-shadow: #0077ea 0 8px 0 inset;
  -webkit-box-shadow: #0077ea 0 8px 0 inset;
  box-shadow: #0077ea 0 8px 0 inset;
}
.roundbtn:active.dark .inner {
  -moz-box-shadow: #2c3e50 0 8px 0 inset;
  -webkit-box-shadow: #2c3e50 0 8px 0 inset;
  box-shadow: #2c3e50 0 8px 0 inset;
}
.text {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: Courier New;
  font-size: 13px;
  color: white;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}
#credits
{
  float:right;
  font-size:10px;
}#credits a {color:black;}
/* Subscribe Box ---------------------- */
.subscribe{width:100%;height:100px;}

.subscribe h3{color:#fff;margin-bottom:2px;font-weight:600}
.subscribe form{float:center;margin:28px}
.subscribe form .inptfld{font-family:Open Sans;outline:none;border:none;font-size:15px;padding:10px;border-radius:3px;width:250px}
.subscribe form {font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-left:10px}
.subscribebtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;cursor:pointer;margin-right:10px; position:relative; left:290px; bottom:40px;font-weight:bold;}
.subscribe form .subscribebtn:hover{background:#2c3e50;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}
/*--------------PakMax.net subwidget-------------*/

• Now again search for the below code:

 <data:post.body/>

• Just below the above code paste the following code:

 <div id="pmmash">
<div class="roundbtn dark"><div class="inner"><span class="text"><a href="Your Facebook page URL"><i class="fa fa-facebook fa-2x"/></a></span></div></div>
<div class="roundbtn red"><div class="inner"><span class="text"><a href="Your Google+ page URL"><i class="fa fa-google-plus fa-2x"/></a></span></div></div>
<div class="roundbtn blue"><div class="inner"><span class="text"><a href="Your Twitter URL"><i class="fa fa-twitter fa-2x"/></a></span></div></div>
<div class="roundbtn sea"><div class="inner"><span class="text"><a href="Your LinkedIn URL"><i class="fa fa-linkedin fa-2x"/></a></span></div></div>
  <div class="subscribe">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pakmax', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="inptfld" name="email" placeholder=" Your Email" style="font-family:Open Sans" type="text"/>
<input name="uri" type="hidden" value="pakmax"/>
<input name="loc" type="hidden" value="en_US"/>
<input class="subscribebtn" type="submit" value="Sign Up Now!"/>
</form>
    </div>
<div id="credits">
  Widget By <a href="http://www.pakmax.net/">PakMax</a></div>
</div>

Make these changes 

• Change the Your Facebook page URL with your facebook page url.
• Change the Your Google+ page URL with your Google+ page or profile url
• Change the Your Twitter URL with your Twitter profile URL
• Change the Your LinkedIn URL with your LinkedIn profile URL
• And
• Now replace http://feedburner.google.com/fb/a/mailverify?uri=pakmax with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace pakmax with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=pakmax

Save your template and you successfully installed a this blogger widget.