Cara Menciptakan 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 yaitu pengunjung yang loyal. Kenapa? Karena dengan semakin banyak pengunjung yang kembali lagi ke website kita, maka rate conversation semakin bagus. Lalu bagaimana cara semoga pengunjung kembali lagi mengunjungi website kita, dan membaca setiap artikel baru?

Salah satu cara ampuh yaitu dengan menciptakan subscribe box. Subscribe box ini berkhasiat untuk mendapat database para pengunjung, khususnya database email. Maka ketika ada artikel gres yang anda buat, notifikasi email akan masuk ke pengguna tersebut.

Kali ini, saya akan mejelaskan tutorial mengenai Cara menciptakan subscriber box Feedburner yang dapat 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 gres dengan memasukan URL feed Blogger anda. Contoh url feed Blogger yaitu menyerupai 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 ketika integrasi dengan kolom subscribernya.

Membuat Subscriber Box dengan amp-form

Letakan komponen javascript amp-form sebelum isyarat </head> pada blog anda. Abaikan jikalau sebelumnya sudah meletakan amp-form.js.  Silahkan copy isyarat 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 isyarat CSS berikut ini, tempelkan sesudah <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 isyarat berikut ini sesuai kawasan 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, menyerupai 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 kawasan yang terlihat. Misalnya di widget atau di final artikel.

Selamat mencoba, dan semoga berkhasiat :)

Berbagi :