Modifikasi Widget SubcribeBox/Kotak Berlangganan Valid AMP Widget Follow By Email mempunyai peran yang cukup penting bagi sebuah blog. Pasalnya, dengan adanya widget ini, pengunjung yang suka dengan artikel blog kita bisa berlangganan via Email dengan bantuan widget ini. Sehingga setiap kali anda update blog, mereka (para pelanggan) akan memperoleh Email notifikasi dari update blog kita. Tentu saja hal ini bisa meningkatkan jumlah trafik blog anda. Karena adanya pemirsa setia blog anda.
Namun jika kita menggunakan template valid AMP HTML, kita tidak bisa begitu saja menambahkan widget Follow by Email FeedBurner ini karena akan menyebabkan error pada AMP HTML.

Untuk itu kali ini saya akan membagikan cara membuat atau memodifikasi widget Follow by Email Blogger agar valid AMP HTML.

Pertama

Silahkan masuk ke LAYOUT/TATA LETAK lalu tambahkan widget Follow by Email di sidebar maupun footer.

Kedua

Silahkan masuk ke EDIT HTML lalu silahkan ganti kode widget Follow by Email dengan kode di bawah ini.

          <b:widget id='FollowByEmail1' locked='false' title='Get FREE Updates in Your Inbox' type='FollowByEmail' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form expr:action='&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath' method='get' target='_blank'>
        <table>
          <tr>
            <td>
              <input class='follow-by-email-address' name='email' placeholder='Your Email Address...' title='Your Email Address' type='text'/>
            </td>
            <td>
              <input class='follow-by-email-submit' type='submit' value='Submit'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
      <p>Submit Your Email Address to Get FREE Our Latest Products Directly in Your Inbox</p>
    </div>
  </div>
</b:includable>
  </b:widget>

Ketiga

Gunakan kode CSS di bawah ini untuk memodifikasi tampilannya.taruh di CSS Tampilan mobile maupun desktop Halalaman HomePage maupun Postingan,

div#FollowByEmail1{border:1px solid #dedede;background:#fff;border-radius:3px;padding:10px;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#FollowByEmail1 h2{font-family:Roboto,sans-serif;font-size:18px;font-weight:300;text-transform:capitalize;color:#666;margin-bottom:15px;padding:0;line-height:1em}
#FollowByEmail1 p{font-family:Roboto,sans-serif;font-size:14px;font-weight:300;text-transform:capitalize;color:#666;margin-top:15px;padding:0;line-height:1em}
#FollowByEmail1 table{width:100%}
#FollowByEmail1 table td:nth-child(1){width:80%}
#FollowByEmail1 table td:nth-child(2){width:20%}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{background:#efefef;width:100%;height:44px;padding:0 10px;font-family:Roboto,sans-serif;font-size:14px;border:0;outline:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{height:44px;font-family:Roboto,sans-serif;text-transform:uppercase;border-radius:0;padding:0 10px;width:100%;font-size:14px;background:#dd5d24;border:0;outline:0;cursor:pointer;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

Klik pertijau jika sudah rapi klik simpan, Mudah bukan selamat Mencoba.

Sumber: http://www.kompiajaib.com/