Membuat Widget Follow by Email (Berlangganan) valid AMP

Keberadaan widget subscribe atau berlangganan pada sebuah blog sangat penting dan urgen, khususnya untuk menjaring pengunjung tetap. Selain itu juga, widget subscribe atau ada yang menyebutnya widget Follow by Emailsangat penting baik pengunjung agar mereka mengetahui informasi terupdate dari blog kesayangannya. Informasi ini akan selalu diupdate dengan pemberitahuan lewat email. Ada banyak tutorial untuk memasang widget subscribe/widget follow by emailini. Namun demikian pemasangan widget ini tidak valid AMP. Yups, Accelerated Mobile Pages kini menjadi trend. Pemasangan widget ini akan menimbulkan eror pada blog yang berbasiskan AMP. Oleh karenanya butuh sentuhan kecil agar pemasangan widget ini valid AMP. Maka, tulisan ini nanti akan mencoba menjembatani persamalahan tersebut.

Cara Memasang Widget Follow by Email (Berlangganan) valid AMP

Menarik apa yang diulas kang Adhy Suryadi dalam kompiajaib.com. Beliau memodivikasi widget subscribe atau follow by email agar valid AMP. Berikut langkah demi langkah pemasangannya:

#Langkah Pertama

Silahkan masuk dashboard blog sahabat dan pilih LAYOUT/TATA LETAK. Silahkan pasang widget Follow by Email/Ikuti lewat Email dan simpan. Untuk bentuk widgetnya, lihat di bawah ini:

#Langkah Kedua

Selanjutnya, silahkan meluncur ke TEMPLATE dan pilih EDIT HTML. Silahkan cari kode widget Follow by Email dan ganti 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>

Pada langkah ini sebenarnya sahabat sudah selesai memasang widget follow by Email valid AMP, namun agar tampilannya ciamik silahkan lanjut ke langkah ketiga.

#Langkah Ketiga

Pada langkah ketiga ini, sahabat tinggal memodivikasi tampilan dengan CSS. Silahkan letakkan kode CSS di bawah ini pada HTML sahabat:

 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}

Yups, sekarang susah selesai. Tralala, widget follow by email sahabat sudah terpasang dan tentunya valid AMP. Semoga bermanfaat dan jika ada kesulitan, silahkan coret-coret di kotak komentar ya...