Cara Pasang Subscribe Box Valid AMP

Menambahkan subscribe box atau kotak berlanganan tentu akan memudahkan para pembaca untuk berlanganan postingan-postingan terbaru dari blog milik kita, dan tentu jika banyak yang berlanganan maka bisa meningkatkan jumlah kunjungan. Cara untuk membuat kotak/tombol berlanganan pada halaman blog itu cukup mudah karena sudah banyak sekali blog-blog yang membahasnya kedalam sebuah tutorial.



Tapi bagaimana dengan blog yang menggunakan Template AMP ? Jika kita memasang subscribe box yang biasanya di pasangkan pada blog biasa alias Non AMP tentu akan terdeteksi error dan tidak Valid AMP pada alat validator Google. Ini tentu membuat para blogger yang baru beralih ke template AMP akan merasa kebingungan mengingat mengubah template biasa ke AMP itu sangat ribet. Termasuk Cara memasang kotak berlangganan pada blog AMP itu tentu berbeda.

Cara membuat subscribe box valid AMP ini sangat jarang dibahas mungkin karena peminat template AMP belum terlalu banyak. bagi kalian yang kebingungan bagaimana sih cara membuat dan memasang widget subscribe box Valid AMP dengan mudah dan benar kalian cukup ikuti tutorial singkat dibawah ini.


Cara Membuat Subscribe Box Valid AMP
  • Tambahkan kode CSS dibawah ini di atas kode </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}}
  • Pastekan kode berikut ini pada bagian dimana widget subscribe box ingin ditampilkan.
<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>
  • Terakhir tambahkan kode Javascript dibaha ini tepat 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>
  • Terakhir simpan Tema dan lihat hasilnya. 

Belum ada Komentar untuk "Cara Pasang Subscribe Box Valid AMP"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel