Cara Membuat Kotak Subscribe FeedBurner Email di AMP Blogger

Cara Membuat Kotak Subscribe Email di Blogger Valid Google AMP dengan AMP-FORM

Salah satu kunci sukses sebuah website adalah pengunjung yang loyal. Kenapa? Karena dengan semakin banyak pengunjung yang kembali lagi ke website kita, maka rate conversation semakin bagus. Lalu bagaimana cara agar pengunjung kembali lagi mengunjungi website kita, dan membaca setiap artikel baru?

Salah satu cara ampuh adalah dengan membuat subscribe box. Subscribe box ini berguna untuk mendapatkan database para pengunjung, khususnya database email. Maka ketika ada artikel baru yang anda buat, notifikasi email akan masuk ke pengguna tersebut.

Kali ini, saya akan mejelaskan tutorial mengenai Cara membuat subscriber box Feedburner yang bisa anda terapkan pada halaman AMP website anda. Dengan memanfaatkan komponen amp-form.

Membuat Akun FeedGurner

Pertama, silahkan buat akun Google feedburner disini. Login dengan akun google anda, dan buat feed baru dengan memasukan URL feed Blogger anda. Contoh url feed Blogger adalah seperti di bawah ini:
http://amp.alinux.com/feeds/posts/default

Kemudian klik next, dan isi nama FeedBurner anda di kolom yang tersedia. Kemudian silahkan aktifkan email subscriber di panel publicize. Lihat gambar untuk penjelasannya lebih detail.

Nantinya, nama akun Google FeedBurner anda yang akan kita gunakan saat integrasi dengan kolom subscribernya.

Membuat Subscriber Box dengan amp-form

Letakan komponen javascript amp-form sebelum kode </head> pada blog anda. Abaikan jika sebelumnya sudah meletakan amp-form.js.  Silahkan copy kode berikut ini:

<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>

Agar tampilan lebih bagus, silahkan copy kode CSS berikut ini, tempelkan setelah <style amp-custom='amp-custom'> :

/* Subscribe Box */

#subscribeBOX{overflow:hidden;margin:20px 0;width:100%}

#subscribeBOX p{margin:1em 0}

#subscribeBOX .emailCol{margin:auto;text-align:center}

#subscribeBOX .emailCol form{margin:0;padding:0;border:0}

#subscribeBOX .emailCol input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:0;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;width:73%}

#subscribeBOX .emailCol input:hover{border-color:rgba(0,0,0,.34)}

#subscribeBOX .emailCol input:focus{color:#000;outline:none;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}

#subscribeBOX .emailCol .Submitter{background:#e74c3c;color:#fff;margin:0 0 0 4px;font-size:14px;cursor:pointer;border:0 solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s;width:25%}

#subscribeBOX .emailCol .Submitter:active,#subscribeBOX .emailCol .Submitter:hover{background:#c0392b;color:#fff}

Step selanjutnya, anda tinggal memasang Subscriber Box. Copy dan paste kode berikut ini sesuai tempat yang anda inginkan.

<div id='subscribeBOX'>

<div class='emailCol'>

<form action='https://feedburner.google.com/fb/a/mailverify?' method='get' novalidate='' target='_blank'>

<input name='email' placeholder='Your Email' required='required' type='email'/>

<input name='uri' type='hidden' value='GoogleAmpForBlogger'/>

<input class='Submitter' type='submit' value='Subscribe'/>

</form>

</div>

</div>

Warning! Ganti mark kuning dengan nama akun Google Feedburner anda, seperti yang telah anda buat sebelumnya.

SAVE perubahan template anda, dan coba lihat hasilnya. Silahkan lihat demo hasil di Codepen saya.



Agar nilai subsribe lebih tinggi, pastikan anda menempatkan SubscriberBox pada tempat yang terlihat. Misalnya di widget atau di akhir artikel.

Selamat mencoba, dan semoga berguna :)