Cara membuat kotak berlangganan/subribe box valid amp ala kompi ajaib Fungsi kotak berlangganan Memudahkan pengunjung untuk stay connected dan menerima update blog Anda di inbox email mereka. Meningkatkan “link effect”, bahkan “backlink” blog, karena Feedburner merupakan bagian dari Social Media SEO.
Namun jika Kita menggunakan template AMP HTML, kita tidak bisa begitu saja menambahkan widget Follow by Email/subribebox FeedBurner ini karena akan menyebabkan error pada AMP HTML.Untuk itu saya akan membagikan Cara membuat kotak berlangganan/subcribe box valid amp ala kompi ajaib.
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 != ""'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form expr:action='"https://feedburner.google.com/fb/a/mailverify?uri=" + 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>
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.
Tinggalkan komentar