Feb 1, 2017

Cara Mudah Membuat Subscribe Box di Blog AMP

widget subscribe box

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

Widget Subscribe Box di Blog ini berguna 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 saya 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 contoh yang saya ambil dari blog nya Kuliner Mas Ade, kalau saya perhatikan blog tersebut sangat sederhana trafik alexanya pun tidak terlalu ramping namun dari yang saya tahu ternyata banyak sekali yang mengikuti Subscribe Box di blog tersebut, mungkin itu salah satu alasan Google Adsense menerima blog tersebut, karena selain tema niche blog tersebut khusus membahas Kuliner faktor yang tidak kalah penting adalah banyak pengikut.

Contoh diatas adalah salah satu manfaat dari Subscribe Box di Blog, nah bagi sobat yang tertarik dan ingin memasangnya bisa ikuti langkah berikut ini.


Langkah pertama
Pemasangan kode berikut untuk dipostingan kali ini di khususkan bagi template amp, silahkan sobat salin kode 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 kode tersebut diatas terpasang lanjut silahkan salin kembali kode HTML berikut kemudian letakkan pada sidebar di Tata Letak tambahkan widget pilih HTML lalu tempatkan bebas dimana sobat ingin letakkan widget Subscribe Box ini.


<div id='subscribeBOX'>
    <h3>Newsletter</h3>
    <p>Berlangganan artikel Gratis langsung 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 kode diatas silahkan ganti dibalikseo yang ditandai dengan feed punya sobat  

Widget News letter


Langkah Ketiga
Silahkan tambahkan kode 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 bisa digunakan aktifkan email feedburner sobat terlebih dahulu.

Baiklah sobat demikian Cara Mudah Membuat Subscribe Box di Blog AMP semoga bermanfaat

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.