Cara Membuat Widget Subscribe Box/Kotak Berlangganan Email Valid AMP

Berlangganan Untuk Mendapatkan Artikel Yang Paling Baru

Cara Membuat Widget Subscribe Box/Kotak Berlangganan Email Valid AMP - Hai sobat ATAEH, kali ini ATAEH akan membahas tentang Cara Membuat Widget Subscribe Box/Kotak Berlangganan Email Valid AMP. kenapa kita membutuhkan subscribe box atau kotak berlangganan?

Karena dengan memiliki subscribe box atau kotak berlangganan maka hal tersebut akan membuat blog atau website yang kita miliki akan sering dikunjungi oleh orang atau pembaca yang telah memasukkan emailnya ke dalam subscribe box atau kotak berlangganan milik kita, itu keuntungan bagi kita.

Sedangkan keuntungan bagi sang pembaca adalah mereka bisa dengan mudah mengetahui postingan postingan terbaru dari blog atau website yang kita miliki. Jadi dalam hal ini, Jadi dalam hal ini dengan adanya subscribe box atau kotak berlangganan, baik pembaca ataupun pengelola blog atau  website, keduanya sama-sama diuntungkan atau dengan kata lain terdapat hubungan simbiosis mutualisme (saling menguntungkan)

Kebanyakan blog atau website diluaran memiliki subscribe box atau kotak berlangganan yang memang dibuat untuk template yang non AMP, akan tetapi untuk kali ATAEH

ini akan memberikan yang valid AMP. 

Tidak banyak perbedaan antara yang non AMP dengan yang valid AMP dalam masalah ini. Perbedaannya hanyalah untuk subscribe box atau kotak berlangganan yang bisa dipakai untuk template valid amp bisa juga dipakai juga untuk template non AMP, akan tetapi sebaliknya, apabila subscribe box atau kotak berlangganan milik non amp dipakai untuk template valid AMP, sudah dipastikan akan terjadi error pada template valid AMP

Oke kita langsung saja menuju TKP untuk membahas Membuat Widget Subscribe Box/Kotak Berlangganan, di sini ATAEH akan menunjukkan caranya:

Pertama, silahkan copy dan paste kode script berikut ini kemudian taruh di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

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

Kedua copy dan pastekan CSS di bawah ini dan taruh di atas </style>

#subscribeBOX{overflow:hidden;margin:0 0 20px 0;width:100%} #subscribeBOX p{margin:1em 0} #subscribeBOX .emailCol{margin:auto;text-align:center;} #subscribeBOX .emailCol form{margin:0;padding:0;float:left} #subscribeBOX .emailCol input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:10px;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s} #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 5px;font-size:14px;cursor:pointer;border:1px solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s} #subscribeBOX .emailCol .Submitter:active,#subscribeBOX .emailCol .Submitter:hover{background:#c0392b;color:#fff;} @media only screen and (max-width:768px) { #subscribeBOX{float:none;width:auto;margin:0 20px 20px 20px}} @media screen and (max-width:480px) { #subscribeBOX .emailCol input{width:100%} #subscribeBOX .emailCol .Submitter{margin:0} #subscribeBOX .emailCol form{margin:auto;float:none}}

Ketiga, buka tata letak pada dasbor blog sobat, lalu pilih tambahkan gadget dan pilih HTML/javascript

Keempat pastekan kode dibawah ini pada HTML/javascript yang sobat buka tadi (lihat nomer tiga)

<div id='subscribeBOX'>     <h3>Newsletter</h3>     <p>Berlangganan artikel terbaru dari blog ini langsung via email.</p>     <div class='emailCol'> <form action='https://feedburner.google.com/fb/a/mailverify?uri=ATAEH' method='post' target='_blank'>     <fieldset>         <label>             <span>Your name</span>           <input name='name' required='required' type='text'/>         </label>       <label><br/>             <span>Your email</span>           <input name='email' required='required' type='email'/>         </label>       <input class='Submitter' type='submit' value='Subscribe'/>     </fieldset> </form>     </div>   </div>

Kelima selesai dan lihatlah hasilnya
Hasil dari subscribe box atau kotak berlangganan yang telah sobat buat tadi, kira-kira seperti ini. lihat gambar

Bagaimana sobat, cukup mudah sekali bukan untuk membuat Widget Subscribe Box/Kotak Berlangganan Valid AMP?

Pastinya mudah sekali dong... hehehe

Mungkin cukup sekian dulu pemaparan dari ATAEH tentang Cara Membuat Widget Subscribe Box/Kotak Berlangganan Email Valid AMP, apabila ada yang perlu ditanyakan silahkan melalui komentar di bawah

Berbagi :