Modifikasi Widget Follow By Email Blogger Valid AMP HTML

Salah satu cara menyebarkan konten blog adalah dengan melalui email. Salah satu fasilitas yang disediakan blogger untuk menyebarkan konten melalui email adalah widget Follow by Email dari FeedBurner.

Namun jika Anda menggunakan template 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.

Langkah Pertama

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

Langkah 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>

Langkah Ketiga

Gunakan kode CSS di bawah ini untuk memodifikasi tampilannya.

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}

Mudah bukan? Selamat mencoba...