How to Make a Subscribed Box Widget in Blogger

CREATE A BEST SUBSCRIPTION WIDGET IN YOUR BLOGGER 

Apny blog Mai New Subscribe Widget ko kesy lgaye

Yesterday I made a tutorial article How to Create Subscription Box Widgets Like El Creative Academy . This time I made a new one, the Subscription Box Design like the Fletro Template which is now being sought by bloggers. Without much ado just go directly to the tutorial.

How to Make a Subscribed Box Widget Like Fletro

🔻 So follow the procedure.

1. Login first to Blogger .
2. In the Blogger Dashboard select the Layout menu and add the HTML / Javascript widget ..
3. Copy the HTML code below in the text editor box then press save. 

/* Start!!! Widget Follow Email Share By Top Blog Pk*/

<div class="widget FollowByEmail" data-version="2" id="FollowByEmail1">

<h3 class="title">

Follow by Email

</h3>

<div class="widget-content">

<div class="follow-by-email-inner">

<label class="follow-text" for="email-input">Subscribe to our newsletter and stay updated !</label>

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=topblogpk/PPmr&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">

<input autocomplete="off" class="follow-by-email-address" id="email-input" name="email" placeholder="Email Address " type="email" />

<input class="follow-by-email-submit" id="email-submit" type="submit" value="Want to get email notification?" />

<label class="email-label" for="email-submit">

<svg viewbox="0 0 32 32"><path d="M28,13a1,1,0,0,0-1,1v8a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V14a1,1,0,0,0-2,0v8a3,3,0,0,0,.88,2.12A3,3,0,0,0,6,25H26a3,3,0,0,0,2.12-.88A3,3,0,0,0,29,22V14A1,1,0,0,0,28,13Z"></path><path d="M15.4,18.8a1,1,0,0,0,1.2,0L28.41,9.94a1,1,0,0,0,.3-1.23,3.06,3.06,0,0,0-.59-.83A3,3,0,0,0,26,7H6a3,3,0,0,0-2.12.88,3.06,3.06,0,0,0-.59.83,1,1,0,0,0,.3,1.23ZM6,9H26a.9.9,0,0,1,.28,0L16,16.75,5.72,9A.9.9,0,0,1,6,9Z"></path></svg>
</label>

    /* Widget Follow Email Share By Top Blog Pk*/
<input name="uri" type="hidden" value="topblogpk/PPmr" />

<input name="loc" type="hidden" value="en_US" />

</form>

</div>

</div>

</div>


/* End!!! Widget Follow Email Share By Top Blog Pk*/

🔺 IMPORTANT! 

Text with Red Block : Change with your Feedburner Subscribe Link.

Text with Blue Block : Change with your Value Feedburner.

4. After that go to Theme and Edit HTML  then copy the CSS code below above the code ]]> </ b: skin> or </style> . 

/* Start!!! Widget Follow Email Share By Top Blog Pk*/

.FollowByEmail{position:relative;padding:15px;background:rgba(255,255,255,.98);border-radius:8px;box-shadow:0 4px 12px 0 rgba(9,32,76,.05);margin-top:20px !important;overflow:hidden;}

.FollowByEmail:after{content:'';display:block;position:absolute;bottom:0;right:0;width:100px;height:100px;background:rgba(0,0,0,.025);border-radius:100px 0 0;}

.FollowByEmail .widget-content{position:relative;z-index:2;font-size:13px;}

.FollowByEmail h3.title{font-size:13px;margin-bottom:22px;}

.FollowByEmail .follow-text{display:block;margin-bottom:15px;color:#989b9f}

.FollowByEmail form{display:block;position:relative;margin:0;}
      /* Widget Follow Email Share By Top Blog Pk*/

.FollowByEmail input[type=email]{width:100%;padding:11px 55px 11px 18px;outline:0;border:0px solid #ebeced;border-radius:6px;box-shadow:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background-color:#f7f7fc}

.FollowByEmail input[type=email]:focus{box-shadow:0 2px 4px 0 rgba(9,32,76,.05);}

.FollowByEmail input[type=submit]{display:none;width:100%;margin-top:12px;padding:12px 18px;border:0;outline:0;border-radius:8px;color:#fff;cursor:pointer;}

.FollowByEmail label.email-label{position:absolute;top:0;right:0;padding:8.5px 0;display:inline-block;width:55px;height:39px;text-align:center;cursor:pointer}

.FollowByEmail label.email-label svg{fill:#3a7bd5;width:23px;height:23px;}

.FollowByEmail h3.title:after{content:'';width:20px;height:2px;display:block;margin-top:4px;background:#161617;}
/* End!!! Widget Follow Email Share By Top Blog Pk*/

5. Finally press the Save Theme button .