Cara Membuat Kotak Berlangganan Subscribe Box Valid AMP

Tetapi jika Kita memakai template AMP HTML, kita nir mampu begitu saja menambahkan widget Follow by Email/subribebox FeedBurner ini karena akan menyebabkan error dalam AMP HTML.Untuk itu saya akan memberikan Cara menciptakan kotak berlangganan/subcribe box valid amp ala kompi ajaib.

Pertama masuk ke hidangan TATA LETAK & masukkan widget follow by email di sidebar jua di footer.

Kedua masuk ke menu edit HTML dan cari widget Follow by Email yang baru saja di tambahkan tadi. Bagi yang menggunakan HP silahkan download dulu tema yang baru saja di tambahkan widget follow by email. Dan edit di aplikasi untuk edit css.

Jika sudah ketemu silahkan anda 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>

Ketiga copy kode di bawah ini untuk css tampilanya dan taruh di atas kode </style> untuk tampilan mobile maupun desktop.

			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}

Simpan template dan lihat hasilnya. Untuk contoh lihat yang saya pakai di blog saya di bawah ini. Semoga bermanfaat.