Cara Membuat Widget Subscribe Box Valid AMP

Sebelum saya membagikan sebuah tutorial tentang bagaimana cara membuat Subscribe Box menjadi Valid di AMP Blogger Template, terlebih dahulu kita lihat bagaimana proses membuat suatu AMP template yang Valid ketika di Cek dengan AMP Validator, caranya adalah coba anda copy url berikut ini dan buka pada mesin browser anda https://validator.ampproject.org/#url=https://amp-bloggertheme.blogspot.co.id dan coba anda perhatikan apa yang terjadi?



Jika anda sudah melihat hasilnya diatas, dan kemudian anda menjadi tertarik untuk membuat sebuah Template AMP yang valid silahkan baca postingan Cara Mudah Membuat AMP Template. Dan bagi yang ingin memasang atau membuat Subscribe BOX / Newsletter menjadi Valid pada AMP Template, silahkan langsung simak tutorial Cara Membuat Subscribe Box menjadi Valid pada AMP Template dibawah ini.

1. Copy kode CSS dibawah ini lalu letakan sebelum tag </head>

#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}}

2. Kemudian silahkan salin kode HTML dibawah ini, lalu letakan pada area dimana widget ini ingin anda tampilkan.

<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=antoncabon' 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>

3. Langkah terakhir tambahkan kode berikut ini sebelum tag </head>

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

4. SELESAI! Simpan Template anda lalu lihat hasilnya, OK selamat mencoba dan sebagai catatan dari saya silahkan anda edit kode CSS diatas untuk mendapatkan tampilan yang lebih menarik tentunya.