Cara Membuat Kotak Berlangganan Subscribe Box Valid AMP

Abdi Apr 23, 2017 Apr 23, 2017 3 min read

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.

Pertama masuk ke menu TATA LETAK dan tambahkan widget follow by email di sidebar maupun 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.