Modifikasi Widget Follow By Email Blogger Valid Amp Html

Salah satu cara mengembangkan konten blog yaitu dengan melalui email. Salah satu kemudahan yang disediakan blogger untuk mengembangkan konten melalui email yaitu widget Follow by Email dari FeedBurner.

Namun bila Anda memakai template AMP HTML, kita tidak dapat begitu saja menambahkan widget Follow by Email FeedBurner ini alasannya yaitu akan menjadikan error pada AMP HTML.

Untuk itu kali ini aku akan membagikan cara menciptakan atau memodifikasi widget Follow by Email Blogger semoga valid AMP HTML.

Langkah Pertama

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

Langkah Kedua

Silahkan masuk ke EDIT HTML kemudian silahkan ganti isyarat widget Follow by Email dengan isyarat 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 isyarat 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}

Praktis bukan? Selamat mencoba...


Sumber https://www.kompiajaib.com/

Share this post