Add Subcribe Box with Pure CSS Social Buttons on your blogger

This is one of my best subscribe box widget which I created. To provide a clean option to your readers for email subscription and social share this widget is best for you. The widget have neat and clean design with email subscription option and Push able style social share buttons.
I don't use any jquery to make social buttons push able 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.

1. Goto blogger dashboard >> Template
2. Backup your template
3. Click on edit HTML
4. Now search for    ]]>  

    and just above it paste the following code:@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}

• Now again search for the below code:
• 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.leerhacking.blogspot.com">Leerhacking</a></div> </div>