Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger

Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger

Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger


Bloggerntt.com - Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger, Subscribe box sangat berguna untuk mendapatkan database para pengunjung. Khususnya database email. Ketika ada artikel baru yang dibuat, notifikasi email akan masuk ke pengguna tersebut.

Cara Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger :

Anda buat akun Google feedburner (klik disini). Login dengan akun google anda, dan buat feed baru dengan memasukan URL feed Blogger anda. Contoh url feed Blogger adalah seperti ini: http://bloggerntt.com/feeds/posts/default . Berikutnya  klik next, isi nama FeedBurner Anda di kolom yang tersedia. Lalu  aktifkan email subscriber di panel publicize.

Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger dengan amp-form

  • Pastikan di template blog Anda sudah memasang komponen amp-form, kodenya seperti dibwah ini. Kalau belum, copy kode dibawah lalu taruh komponen javascript amp-form sebelum kode </head> pada blog Anda. Jika sudah, lewati langkah ini.
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>
  • Berikutnya, Anda tinggal memasang widget Subscriber Box. Copy dan paste kode berikut ini sesuai tempat yang anda inginkan, bisa di sidebar blog ataupun template blog.
<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='Bloggerntt'/> <input class='Submitter' type='submit' value='Subscribe'/> </form> </div> </div>
  • Perhatikan kode yang saya tandai diatas, tinggal ubah dengan ID feedburner Anda.
  • Untuk mempercantik tampilan widget email subscribe box tersebut, kita gunakan kode CSS. Anda copy paste kode CSS dibawah ini lalu taruh  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}
  • Terakhir, save template Anda. Selamat mencoba bro!

Link DEMOnya

Sampai disini tutorial cara Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger. Semoga berguna sob.

Keyword : cara membuat subscribe keren di blog, cara membuat subscribe di blog, cara membuat kotak berlangganan di blog, cara membuat subscribe box di blog, widget subscribe blogger, cara membuat tombol subscribe di blog, cara membuat subscribe di website, cara membuat berlangganan artikel pada blog
Blogger
Disqus
Pilih Sistem Komentar

1 comment

untuk subscribe box yang versi viomag valid amp ada ?

Balas

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser