How to Make a Follow Box Widget on Blogger By TopBlog Pk

How to Make a Follow Box 

Widget Like 

El Creative Academy

This Follwed Box Widget is intentionally made for Templates that don't have a Follow Box Widget. This widget is very useful because it has a function that can get customers from your visitors. By installing the Following Box Widget, your visitors who have Follow will receive an article update notification every time you publish a new article from your blog via E-mail. Very useful right?

This Follow  Box Design was inspired by a Blog Site called El Creative Academy . Without further ado just go to the tutorial:

How to Make a Follow Box Widget Like El Creative Academy

☢️ PROCEDURES :
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 - Follow Widget Code Share by Top Blog Pk • Mubassir Ali */


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

<div class='widget-content'>

<div class='widget-content-inner'>

<div class='follow-by-email-content'>

<h3 class='follow-by-email-title'>Follow Top Blog Pk</h3>

<p class='follow-by-email-text exceptions'>




Get Notified of the latest articles directly through your email.


</p>

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

<form action='https://feedburner.google.com/fb/a/mailverify?uri=topblogpk/PPmr", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>

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

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

<input class='follow-by-email-submit' id='follow-by-email-submit' type='submit' value='Customer'/>

</form>


/* End -  Follow Widget Share by Top Blog Pk • Mubassir Ali */

🚫 IMPORTANT ! 

🔹Text with Block in Orange : Change to            the name of your blog.  

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

🔹Text with Blue Block   : Change with          your  Feedburner value.

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

/* Start - Follow Widget  Code Share by Top Blog Pk • Mubassir Ali */

#sidebar-wrapper .FollowByEmail{border:.0625rem solid #b7b7b7;padding:20px;border-radius:8px}#sidebar-wrapper .FollowByEmail p{color:#333}.follow-by-email-title{color:#2962ff;font-weight:500}.FollowByEmail .widget-content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;text-align:center}.follow-by-email-address{width:100%;height:40px;font-family:inherit;background:transparent;color:#656565;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 10px;margin:0 0 10px;border:.0625rem solid #b7b7b7;border-radius:.25rem;outline:none}.follow-by-email-address:focus{background-color:rgba(155,155,155,.05);border-color:rgba(155,155,155,.4)}.follow-by-email-submit{font-family:inherit}.follow-by-email-submit:hover{background-color:#0039cb;color:#fff}.follow-by-email-submit{margin-right:.5rem;background-color:#2962ff;color:#fff;border:none;border-radius:.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:2.25rem;min-width:5.5rem;outline:0;padding:7px 15px;position:relative;-webkit-transition:background .4s cubic-bezier(.25,.8,.25,1);-o-transition:background .4s cubic-bezier(.25,.8,.25,1);transition:background .4s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-align:center;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:10px;margin-bottom:-10px}

/* End - Follow Widget  Share by Top Blog Pk • Mubassir Ali */

5. Finally press the Save Theme button.