Membuat Kotak Subscribe Vaild Amp

Membuat Kotak Subscribe di Blogger Amp Valid

Salah satu kunci sukses sebuah website ialah 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 ialah 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 ialah 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 aba-aba </head> pada blog anda. Abaikan bila sebelumnya sudah meletakan amp-form.js. Silahkan copy aba-aba 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 aba-aba 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 aba-aba berikut ini sesuai daerah 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 daerah yang terlihat. Misalnya di widget atau di final artikel.

Semoga Bermanfaat.

Sumber https://www.merpatih.com/