Membuat Widget Follow By Email (Berlangganan) Valid Amp

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 supaya 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 kesannya butuh sentuhan kecil supaya pemasangan widget ini valid AMP. Maka, goresan pena 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 supaya 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 aba-aba widget Follow by Email dan ganti dengan aba-aba 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 bergotong-royong sahabat sudah final memasang widget follow by Email valid AMP, namun supaya tampilannya ciamik silahkan lanjut ke langkah ketiga.

#Langkah Ketiga

Pada langkah ketiga ini, sahabat tinggal memodivikasi tampilan dengan CSS. Silahkan letakkan aba-aba 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, kini susah selesai. Tralala, widget follow by email sahabat sudah terpasang dan tentunya valid AMP. Semoga bermanfaat dan jikalau ada kesulitan, silahkan coret-coret di kotak komentar ya...
Sumber https://www.blog.pustakamadrasah.web.id/