Cara Mudah Membuat Subscribe Box di Blog AMP

widget subscribe box

Pemasangan widget aksesori pada blog memang sangat disarankan sebagai menu navigasi aksesori bagi pengunjung untuk dapat mudah dan terus mengikuti blog yang kita sajikan, salah satu widget yang menurut aku perlu ditambahkan ialah widget Subscribe Box atau lebih sering disebut Newsletter atau berlangganan di Blog.

Widget Subscribe Box di Blog ini berkhasiat bagi pengunjung untuk terus mengikuti updated postingan pada blog kita dan secara otomatis pastinya akan terus mendatangkan trafik bagi blog kita, alat ini juga berfungsi sebagai media promosi yang menurut aku sangat efisien, disaat ada banyak pengunjung yang bergabung dan bersedia mengikuti blog kita akan secara otomatis setiap postingan yang kita updated akan memberitahukan melalui email ke pengunjung yang sudah mendaftarkan emailnya melalui widget Subscribe Box tersebut.

Sebagai teladan yang aku ambil dari blog nya Kuliner Mas Ade, kalau aku perhatikan blog tersebut sangat sederhana trafik alexanya pun tidak terlalu ramping namun dari yang aku tahu ternyata berbagai yang mengikuti Subscribe Box di blog tersebut, mungkin itu salah satu alasan Google Adsense mendapatkan blog tersebut, alasannya selain tema niche blog tersebut khusus membahas Kuliner faktor yang tidak kalah penting ialah banyak pengikut.

Contoh diatas ialah salah satu manfaat dari Subscribe Box di Blog, nah bagi sahabat yang tertarik dan ingin memasangnya mampu ikuti langkah berikut ini.


Langkah pertama
Pemasangan isyarat berikut untuk dipostingan kali ini di khususkan bagi template amp, silahkan sahabat salin isyarat CSS berikut ini dan tempatkan sebelum </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}}


Langkah Ke dua
Setelah isyarat tersebut diatas terpasang lanjut silahkan salin kembali isyarat HTML berikut kemudian letakkan pada sidebar di Tata Letak tambahkan widget pilih HTML lalu tempatkan bebas dimana sahabat ingin letakkan widget Subscribe Box ini.


<div id='subscribeBOX'>     <h3>Newsletter</h3>     <p>Berlangganan artikel Gratis pribadi via email.</p>     <div class='emailCol'> <form action='https://feedburner.google.com/fb/a/mailverify?uri=dibalikseo' 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> 

Perhatikan isyarat diatas silahkan ganti dibalikseo yang ditandai dengan feed punya sobat  

Widget News letter


Langkah Ketiga
Silahkan tambahkan isyarat JS-amp berikut ini sebelum tag </head> pada Edit HTML
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Kode JS-amp tersebut wajib ada terpasang untuk mengaktifkan widget tersebut


Langkah terakhir
Agar Widget Subscribe Box tersebut mampu digunakan aktifkan email feedburner sahabat terlebih dahulu.

Baiklah sahabat demikian Cara Mudah Membuat Subscribe Box di Blog biar bermanfaat

Comments