Stylish Subscribe Box for Blogger

Rate this Post:

{[['

']]}

Today i have Created a New Style Subscribe Box. I am New in Web Designing, so it take much time and make me crazy while Coding. How ever i made it :P. It is Very Simple and Beautiful Box with 6 Social Icons. It also Contains Facebook Like Box. A feedburner Email Subscription box. Here are Some Highlighted Features of the Widget;

Features:

6 Social Icons
Facebook Like Button
Google +1 Button
Add This Button
Twitter Follow Button
FeedBurner Email Subscription Box

Installation:

Follow These Simple Steps;

Login to Blogger
Goto Layout
Add a New Widget

Paste the Following Code;

<style>
    #bp-social {
    width: 300px;     }
    .bp-iconset{
    padding: 5px;
    }
    .bp-iconset img:hover{
    opacity:0.8
    }
   .fb{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    text-align: center;
   }
    .facebook{
   text-align: center;
   padding-top: 10px;
   width:80%;
    }
    .twitter{
    padding-top: 10px;
    text-align: center;
    }
   .addthis_counter{
   float: left;
   height: 60px;
   padding-left: 60px;
   }
   .email-subscribe-emailbox form {
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;border: 0;
    }
    .email-subscribe-emailbox input.emailu {
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    color: #999;
    padding: 7px 10px 8px;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 13px;
    border: 1px solid #ccc;
    }
    .email-subscribe-emailbox input.emailu:focus {
    color: #333;
    }
    .email-subscribe-emailbox input.submitu {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: black;
    padding: 7px 14px;
    font-weight: bold;
    font-size: 12px;
    float: right;
    cursor: pointer;
    }
    .email-subscribe-emailbox input.submitu:hover {
    text-decoration: none;
    }
</style>
    <div id="bp-social">
    <div class="bp-iconset">
    <center>
    <a style="margin-right: 10px;" href="Facebook Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKy1EypCsE8A8P_8vjoLn_vGcEh38u8cCvvf1iuoQbDgu6tlzLwcKl6AqX30WFQWhzQk0n943LwOzyGtmC8TGQPwGytU3BrcAuTKT7TMI_FpJaYncnU6CJQdMOz4SRzdVUjy_YyE2kQvHE/s1600/facebook.png" width='50px' height='65px' title='Facebook'/></a>
    <a style="margin-right: 10px;" href="Twitter Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizSuG-zVtvm9EoglsUHP0CHcdGEdQZuQDTekEbCi9lbet7_Nl6PHLsV0-6Fhic3-D6SXPv-UVKNCq6p7WZjZU61jymnQcfz-M_Cfg87I1ZwciaxmiLjyTm3yTFlPHTJgtRQ-vNpB7u2UTT/s1600/twitter.png" width='50px' height='65px' title='Twitter'/></a>
    <a style="margin-right: 10px;" rel="me" href="Google Plus Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqv2O3GxVXSo382zMGPYkV1Y8EqNsYStLwkqfIBc9IlizfChosJAq2cxcL_rW-GoiN__v4U9y0rnRumhofEG6Rx4zWxO_QT63_dp0d513LjZKqAg9MKBuQoAvzEM8rQoRIRFKNDWgVmdxP/s1600/googleplus.png" width='50px' height='65px' title='Google Plus'/></a>
    <a style="margin-right: 10px;" href="Pinterest Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtL5jstwaA__drqFN48RlRAqtJw8wokwqbvUIWtaiW3bpq8AId2dNlh-Dnwuob3yQpSPa42Eef7vPcJRbaNItk30kyffXcnp2w6xnhUArs9UM3cdMrfVlp06W1Ylvko3V8o4YwnV-Hkx7/s1600/pinterest.png" width='50px' height='65px' title='Pinterest'/></a>
     </center>
    <center>
   <a style="margin-right: 10px;" href="RSS Feed Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0hlSSiJzJLeKtUhyphenhyphenpFcbJtHhVjlEKo3TkOCX-WMx5LJZcIcF6vSX0nnBnl2VjX35GGl0j-pS87HirvThAvPw_9sm8eI8ZshOikCvVLe5Qhs8QzBgEjtVM44NZCgIxmqrk3ilxJwIRFisc/s1600/rss.png" width='50px' height='65px' title='RSS Feed'/></a>
    <a style="margin-right: 10px;" rel="me" href="Flickr Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cAYh6zH_R4ciBaUDm2LD_IR5B5oEdRcVWHw3vDe7z60oWtOdTrD_U2Moh6Ze6-brRJpYhExUZjfH8PvStwjDU3ZhjtlCu0QTu1UEumA7Kg_ymj7CXkv1TsVZEHm2ZXXx8-1HL3NkpJzZ/s1600/flickr.png" width='50px' height='65px' title='Flickr'/></a>
    <a style="margin-right: 10px;" href="Linkedin Page URL" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRt6G5ixkbP-CwrD7WC16RlwmW8EsDeyCAVXfJM1iFYVIO95R5anOhwTlc1z6mZLvH_7f-anuZ6HsylZn38cBoo0iWNZuaS8lIKyBteOGmTFsqaNWym0v35fgzhN3Buuj_HRCzrq5JLVJf/s1600/linkedin.png" width='50px' height='65px' title='Linkedin'/></a>
    <a style="margin-right: 10px;" href="Youtube Page URL" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2FTkrud0oNo2MY8IQ_evF4VzjVNao70SU-nSOOeMqQIVrlj9ODO8r5BpvzRTyPHaVFqrzBYS-uyTvldsV9U6OXEe45FNj06lXcz020yLCYOLQkjxNqrxDnTcWvDWpRKrpF6PVPXmZGQU/s1600/youtube.png" width='50px' height='65px' title='Youtube'/></a>
    </center>
<div class="fb">
    <div class="facebook">
<a class="addthis_counter"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTipsNTricksForBloggerLovers&send=false&layout=box_count&width=50&show_faces=false&font=arial&colorscheme=light&action=like&height=90&appId=271817639530563" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:60px;" allowtransparency="true"></iframe>
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
    </div>
</div>
    <div class="twitter">
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=ProTipsNTricks&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
    </iframe>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
     <div class="email-subscribe-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerprofessional', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
    <table width="100%">
    <tr>
    <td>
    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
    </td>
    <td width="70px">
    <input class="submitu TZDefault" type="submit" value="Subscribe"/>
    </td>
    </tr>
    </table>
    <input name="uri" type="hidden" value="bloggerprofessional"/>
    <input name="loc" type="hidden" value="en_US"/>
    </form>
    </div>
    </div>
    </div>

Customizations:

Change The Width: 300px; according to the Width of Your Sidebar
Change TipsNTricksForBloggerLovers with your Facebook Page URL (after facebook.com/??????)
Change ProTipsNTricks with Your Twitter Username.
Change bloggerprofessional with FeedBurner Subscribe URL.
Change Page URL with Your Own Social Sites URL.