How To Make Email Subscription Widget With Social Icons On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Each project would find customers, without exception on a Website or Blog. Maybe it was a pride for the Webmaster or Blogger if it has a lot of customers who certainly from the visitors. You also know YouTubers also find customers which of course it is the viewers subscribers on their YouTube channel.

On a website or blog, this widget is called "Email Subscribe" now I will share to you the tutorial. But you should know that for a Website or Blog that disables the function block text and right click is equal to no effect for artisan copy and paste, but crowded also the Webmaster or blogger who disable the function block text and right click but use this widget though in style different, there may be a purpose and if you are a Webmaster or Blogger true necessarily know what the goal is.

Back to the topic of discussion, you should know that these widgets are extremely light because light is considered by the Webmaster or Blogger.
If you want to apply this widget course, you must have the "FeedBurner" provided by Google, is certainly special for the blogger who partnering by Google that uses the Blogger platform provided by Google. This excess is partnering with Google.

This widget complete with a social icon. You are free to choose one among the two styles of this widget to your taste, the most important is that you have to fill with your data so that it works for your widget and you may change the style and color according to your taste or characteristic.

Maybe it helps you see the first results of this widget before you take this tutorial⇩

Result
Click To View

If you like it, let's all tutorial⇨

1. Put the following CSS Script below / after the <head> tags, but if it already exists on your blog template then just ignore⇩

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Put the following CSS above / before the ]]></b:skin> tags⇩

/*********************************************************************
Email Subscription Widget With Social Icons By www.BloggerDiscreet.com
*********************************************************************/
#subscribebox{background:#576269;padding:20px;font-family:&#39;Open Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#006600;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#009900}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
#subscribe-box {background-color:#009900;font-family: 'Open Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'Open Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
.creadit a{color: #A7A6A6; float: right; font-size: 8px

3. Add the following HTML into the box HTML / JavaScript on the Add Widgets⇩

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://www.bloggerdiscreet.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

Note: Replace all the blue color is the # sign with your social media links, and replace "YOUR-USER-NAME" with the username of your FeedBurner.

Alhamdulillaah, tutorial is ready.