Cara Membuat Subscribe Box (Kotak Berlangganan) Keren di Blog Valid AMP

Kali ini saya mau bahas tentang Subscribe Box AMP. Biasa juga di sebut Kotak Berlangganan yang Valid AMP. Penerapannya cukup mudah dengan beberapa pilihan style yang bisa kalian pilih.

Subscribe Box atau Kotak Berlangganan bisa kita temui di beberapa blog atau website. Lebih tepatnya penempatannya biasa berada pada sidebar blog, footer blog, atau pada akhir tulisan blog.

Apa itu Subscribe Box?

Subscribe Box merupakan sebuah Kotak Berlangganan yang di tujukan untuk pembaca blog sebagai pilihan apakah pembaca mau menerima update artikel secara berkala atau tidak.

Pembaca hanya di minta memasukkan alamat email lalu meng-klik tombol subscribe yang disediakan. Maka secara otomatis, artikel yang di update setiap saat oleh penulis di blog atau website akan masuk ke email pembaca secara berkala.

Nah, di sini saya akan membuat Subscribe Box khusus untuk blog valid AMP.

Apa bedanya Subscribe Box Valid AMP dengan Subscribe Box Non AMP?

Di beberapa tutorial yang saya temukan di blog lain menerapkan pembuatan Kotak Berlangganan mereka dengan CSS Inline yang efeknnya akan menampilkan Error AMP pada template AMP.

Tidak hanya itu, penambahan widget secara sembarangan di sidebar blog juga akan berakibat Error pada Validasi AMP Blog.

Tapi lain halnya dengan blog yang Non AMP, blog tersebut bisa menerapkan CSS Inline dan Menambahkan Widget sesuka hati, tanpa adanya Error AMP. karena template yang digunakan tidak menerapkan fitur AMP.

Kabar baiknya, Subscribe Box AMP ini selain bisa di terapkan di blog AMP, juga bisa di terapkan di Blog Non AMP.

Pengen buat TOC seperti ini? baca artikel tentang Cara Membuat TOC Keren di Blog Valid AMP dengan mudah.

Cara Membuat Subscribe Box di Blog Valid AMP

Subscribe Box Valid AMP kali ini saya buat dengan beberapa style atau gaya yang bisa kalian pilih sesuai selera.

Namun, sebelum itu tambahkan dulu script <amp-form> berikut ini tepat di atas code </head>

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

Selanjutnya, silahkan pilih Subscribe Box AMP di bawah ini sesuai keinginan kalian.

1Subscribe Box Style 1

Untuk menerapkan Subscribe Box model ini, silahkan masuk ke Dashboard Blog » Tata Letak » Tambahkan Gadget dan pilih HTML/Javascript.

Isi Judul sesuai keinginan kalian. dan pada bagian Konten, masukkan kode HTML berikut ini.



<div id='idnxmus-subox'>

<svg style='height: 50px; display: block; margin: auto;' viewbox='0 0 60 60'>
<path fill='#666' d='M28.5 4.75c-6.548 0-11.875 5.327-11.875 11.875S21.952 28.5 28.5 28.5c2.422 0 4.743-.715 6.712-2.066a1.186 1.186 0 1 0-1.345-1.957 9.441 9.441 0 0 1-5.367 1.648c-5.24 0-9.5-4.26-9.5-9.5 0-5.237 4.26-9.5 9.5-9.5s9.5 4.263 9.5 9.5v.931a2.067 2.067 0 0 1-2.064 2.064 2.067 2.067 0 0 1-2.066-2.064v-.931c0-2.96-2.408-5.37-5.37-5.37a5.377 5.377 0 0 0-5.37 5.37 5.375 5.375 0 0 0 5.37 5.37 5.329 5.329 0 0 0 3.933-1.743c.812 1.054 2.073 1.743 3.503 1.743a4.443 4.443 0 0 0 4.439-4.439v-.931c0-6.548-5.327-11.875-11.875-11.875zm0 14.87a3 3 0 0 1-2.995-2.995A3 3 0 0 1 28.5 13.63a3 3 0 0 1 2.995 2.995A3 3 0 0 1 28.5 19.62z'/>
<path fill='#666' d='M42.22 37.8a1.184 1.184 0 0 1-1.646-.33 1.187 1.187 0 0 1 .33-1.645l14.918-9.945-8.322-5.723V1.187C47.5.532 46.968 0 46.312 0H10.688C10.031 0 9.5.532 9.5 1.188v18.969L1.178 25.88l14.917 9.945A1.187 1.187 0 1 1 14.78 37.8L0 27.95V52.25C0 54.87 2.13 57 4.75 57h47.5c2.62 0 4.75-2.13 4.75-4.75V27.949L42.22 37.8zM11.875 2.376h33.25v28.5h-33.25v-28.5zm37.741 47.056c-.235.292-.58.444-.928.444-.262 0-.523-.083-.744-.259l-11.547-9.241H20.603L9.056 49.616a1.193 1.193 0 0 1-1.672-.185 1.188 1.188 0 0 1 .188-1.67l11.875-9.5a1.18 1.18 0 0 1 .74-.261h16.625c.271 0 .532.093.744.261l11.875 9.5a1.19 1.19 0 0 1 .185 1.67z'/>
</svg>
<p>Yuk langganan artikel gratis</p>
<div class='idnxmus-emailbox'>
 <form action='//feedburner.google.com/fb/a/mailverify' method='get' novalidate='' target='_blank'>
  <input name='uri' type='hidden' value='idnxmus'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='emails user-valid valid' aria-label='Masukkan Email' autocomplete='off' name='email' placeholder='yourmail@gmail.com' required='required' type='email'/>
  <button class='button-subs' aria-label='Subscribe' type='submit' value='Subscribe'>Subscribe</button>
 </form>
</div>
</div>
Keterangan :
  • Silahkan ganti #666 dengan kode warna sesuai keinginan kalian untuk mengganti warna pada icon amplop.
  • Silahkan ganti idnxmus dengan username akun feedburner kalian.

Setelah Gadget tersimpan, selanjutnya masuk ke Tema » Edit HTML. Tambahkan kode CSS berikut ini tepat di bawah kode <style amp-custom>



#idnxmus-subox{text-align:center;padding:10px}

#idnxmus-subox p{margin:15px 0;font-size:16px;text-align:center;color:#444}
.idnxmus-emailbox{position:relative;display:inline-block}
.idnxmus-emailbox input.emails{min-width:260px;max-width:100%;margin:0;padding:14px;border:none;color:#000;background:#efefef;outline:0;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;box-sizing:border-box;}
.idnxmus-emailbox button.button-subs{padding:9px 10px;border:0;color:#fff;right:6px;top:6px;position:absolute;line-height:1;font-weight:600;text-transform:uppercase;background-color:#70bf6b;text-align:center;outline:none;cursor:pointer;border-radius:27px}

Lalu cari dan hapus kode <b:include name='quickedit'/> untuk menghilangkan Error AMP. Jangan lupa, klik tombol Simpan Tema.

Untuk melihat hasilnya, bisa kalian cek melalui JSFiddle berikut ini.

2 Subscribe Box Style 2

Untuk menerapkan Subscribe Box model ini, silahkan masuk ke Dashboard Blog » Tata Letak » Tambahkan Gadget dan pilih HTML/Javascript.

Isi Judul sesuai keinginan kalian. dan pada bagian Konten, masukkan kode HTML berikut ini.



<div id='idnxmus-subox'>

<div class='idnxmus-headbox'>
 <h3>SUBSCRIBE</h3>
 <svg style='height: 55px;margin: 0 auto -34px;background: #444;border: 6px solid #fff;border-radius: 50px;padding: 6px;' viewbox='0 0 24 24'> <path fill='#fff' d='M12 .64L8.23 3H5V5L2.97 6.29C2.39 6.64 2 7.27 2 8V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V8C22 7.27 21.61 6.64 21.03 6.29L19 5V3H15.77M7 5H17V9.88L12 13L7 9.88M8 6V7.5H16V6M5 7.38V8.63L4 8M19 7.38L20 8L19 8.63M8 8.5V10H16V8.5Z'/></svg>
</div>
<div class='idnxmus-emailbox'>
 <p>Dapatkan update artikel secara gratis melalui emailmu.</p>
 <form action='//feedburner.google.com/fb/a/mailverify' method='get' novalidate='' target='_blank'>
  <input name='uri' type='hidden' value='idnxmus'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='emails user-valid valid' aria-label='Masukkan Email' autocomplete='off' name='email' placeholder='yourmail@gmail.com' required='required' type='email'/>
  <button class='button-subs' aria-label='Subscribe' type='submit' value='Subscribe'>Subscribe</button>
 </form>
</div>
</div>
Keterangan :
  • Silahkan ganti idnxmus dengan username akun feedburner kalian.

Setelah Gadget tersimpan, selanjutnya masuk ke Tema » Edit HTML. Tambahkan kode CSS berikut ini tepat di bawah kode <style amp-custom>



#idnxmus-subox{text-align:center;width:280px;margin:20px auto;box-shadow:0 0 6px 0 rgba(173,173,173,0.42)}

.idnxmus-headbox{background:#e74c3c;position:relative}
.idnxmus-headbox h3{color:#fff;padding:20px 10px 10px;margin:0;font-size:25px}
.idnxmus-emailbox{background:#444;margin-top:-15px;padding:45px 10px 10px}
.idnxmus-emailbox p{color:#b3b3b3b3;font-size:12px;font-weight:400;line-height:1.5em;margin:10px 0}
.idnxmus-emailbox input.emails{width:100%;margin:10px 0;text-align:center;padding:10px;border:none;color:#000;background:#fff;outline:0}
.idnxmus-emailbox button.button-subs{width:100%;padding:10px;border:0;color:#fff;font-weight:600;text-transform:uppercase;background-color:#e74c3c;text-align:center;outline:none;cursor:pointer}

Lalu cari dan hapus kode <b:include name='quickedit'/> untuk menghilangkan Error AMP. Jangan lupa, klik tombol Simpan Tema.

Untuk melihat hasilnya, bisa kalian cek melalui JSFiddle berikut ini.

3 Subscribe Box Style 3

Untuk menerapkan Subscribe Box model ini, silahkan masuk ke Dashboard Blog » Tata Letak » Tambahkan Gadget dan pilih HTML/Javascript.

Isi Judul sesuai keinginan kalian. dan pada bagian Konten, masukkan code HTML berikut ini.



<div id='idnxmus-subox'>

 <svg style='height: 55px;background: #8a8a8a;border-radius: 50px;padding: 6px;' viewbox='0 0 24 24'> <path fill='#fafafa' d='M12 .64L8.23 3H5V5L2.97 6.29C2.39 6.64 2 7.27 2 8V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V8C22 7.27 21.61 6.64 21.03 6.29L19 5V3H15.77M7 5H17V9.88L12 13L7 9.88M8 6V7.5H16V6M5 7.38V8.63L4 8M19 7.38L20 8L19 8.63M8 8.5V10H16V8.5Z'/> </svg>
<div class='idnxmus-emailbox'>
 <p>Dapatkan update artikel secara gratis melalui emailmu. </p>
 <form action='//feedburner.google.com/fb/a/mailverify' method='get' novalidate='' target='_blank'>
  <input name='uri' type='hidden' value='idnxmus'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='emails user-valid valid' aria-label='Masukkan Email' autocomplete='off' name='email' placeholder='yourmail@gmail.com' required='required' type='email'/>
  <button class='button-subs' aria-label='Subscribe' type='submit' value='Subscribe'>Subscribe</button>
 </form>
</div>
</div>
Keterangan :
  • Silahkan ganti idnxmus dengan username akun feedburner kalian.

Setelah Gadget tersimpan, selanjutnya masuk ke Tema » Edit HTML. Tambahkan kode CSS berikut ini tepat di bawah kode <style amp-custom>



#idnxmus-subox{background:#ffffff;text-align:center;width:280px;margin:20px auto;padding:10px;box-shadow:0 0 6px 0 rgba(173,173,173,0.42)}

.idnxmus-emailbox p{color:#444;font-size:12px;font-weight:400;line-height:1.5em;margin:10px 0}
.idnxmus-emailbox input.emails{width:100%;margin:10px 0;text-align:center;padding:10px;border:none;color:#000;background:#eaeaea;outline:0;box-sizing:border-box;}
.idnxmus-emailbox button.button-subs{width:100%;padding:10px;border:0;color:#fff;font-weight:600;text-transform:uppercase;background-color:#e74c3c;text-align:center;outline:none;cursor:pointer}

Lalu cari dan hapus kode <b:include name='quickedit'/> untuk menghilangkan Error AMP. Jangan lupa, klik tombol Simpan Tema.

Untuk melihat hasilnya, bisa kalian cek melalui JSFiddle berikut ini.

Kesimpulan

Peenempatan Subscribe Box AMP ini lebih saya sarankan di Sidebar Blog. Jika ingin menempatkan di bagian lain pada blog, maka silahkan edit kode CSS yang saya sediakan menyesuaikan template kalian.

Kode di atas bisa di terapkan baik di Blog AMP maupun Non AMP. Selebihnya, silahkan berkreasi sesuai imajinasi.

Cuma anak kemarin sore. Email kerjasama ke idnxmus@gmail.com

Baca Juga Nih

Ada 4 Caci Maki

Aturan Komentar :
Centang "Beritahu Saya" atau "Notify Me" untuk mendapatkan notifikasi balasan komentar via Email.
Gunakan tag HTML < em > untuk menuliskan potongan code atau URL. Contoh : < em >isi pesan< /em >
BUKA KOMENTAR