Tutorial Cara Membuat Widget Subscribe Email Box Blog AMP

Salah satu cara untuk meningkatkan visitor blog dan membuat visitor lama kembali berkunjung dengan menjadi pelanggan setia update konten postingan Blog adalah dengan menyediakan Kotak Langganan (Subscribe Box) via Email. Dengan berlangganan update post melalui email setiap ada pemilik blog membuat dan mempublikasikan konten postingan baru maka secara otomatis pelangganan akan memperoleh notifikasi update konten postingan melalui email tanpa harus mengunjungi blog setiap kali ingin melihat update konten postingan terbaru.



Cara ini merupakan salah satu cara yang tepat untuk mengembalikan visitor lama melalui langganan konten postingan blog dan dapat meningkatkan trafik pengunjung secara signifikan. Semakin banyak visitor baru yang berlangganan maka peluang blog untuk bersaing di halaman depan hasil pencarian pengguna menjadi lebih mudah, karena faktor utama yang membuat konten postingan duduk di halaman page one hasil penelusuran google selain Konten yang berkualitas dengan keyword judul dan keyword turunan yang tepat adalah banyak tidaknya visitor yang melihatnya. Jadi meskipun anda membuat konten postingan baru tanpa riset keyword sekalipun asalkan mendapat banyak kunjungan visitor melalui langganan email sudah dipastikan konten postingan anda akan mudah sekali masuk halaman page one penelusuran google.

Cara Membuat dan Memasang Widget Langganan Post Via Email (Subscribe Email Box) di Blog Template AMP

1. Buka Dasboard Blogger kemudian pilih menu Tema dan pilih EDIT HTML

2. Salin dan tempelkan kode berikut ini di bawah kode style amp-custom

 

  #idnxmus-subox {
   text-align:center;
   padding:10px;
}
#idnxmus-subox p {
   margin:15px 0;
   font-size:16px;
   text-align:center;
   color:#444;
}
.idnxmus-emailbox {
   position:relative;
   display:inline-block;
}
.idnxmus-emailbox input.emails {
   min-width:260px;
   max-width:100%;
   margin:0;
   padding:14px;
   border:none;
   color:#000;
   background:#efefef;
   outline:0;
   -moz-border-radius:50px;
   -webkit-border-radius:50px;
   border-radius:50px;
   box-sizing:border-box;
}
.idnxmus-emailbox button.button-subs {
   padding:9px 10px;
   border:0;
   color:#fff;
   right:6px;
   top:6px;
   position:absolute;
   line-height:1;
   font-weight:600;
   text-transform:uppercase;
   background-color:#70bf6b;
   text-align:center;
   outline:none;
   cursor:pointer;
   border-radius:27px;
}

Kode #70bf6b merupakan kode Warna Background teks Subscribe anda bisa mengubahnya sesuai dengan Selera anda


3. Klick Simpan Tema untuk menerapkan

4. Buka Menu Tata Letak, kemudian pilih Add New Widget (Tambahkan Gadget) pilih HTML/JavaScript

5. Salin dan tempelkan kode berikut ini di area Konten, untuk judul kosongkan saja

 

<div id='idnxmus-subox'>
<svg style='height: 50px; display: block; margin: auto;' viewbox='0 0 60 60'>
   <path fill='#666' d='M28.5 4.75c-6.548 0-11.875 5.327-11.875 11.875S21.952 28.5 28.5 28.5c2.422 0 4.743-.715 6.712-2.066a1.186 1.186 0 1 0-1.345-1.957 9.441 9.441 0 0 1-5.367 1.648c-5.24 0-9.5-4.26-9.5-9.5 0-5.237 4.26-9.5 9.5-9.5s9.5 4.263 9.5 9.5v.931a2.067 2.067 0 0 1-2.064 2.064 2.067 2.067 0 0 1-2.066-2.064v-.931c0-2.96-2.408-5.37-5.37-5.37a5.377 5.377 0 0 0-5.37 5.37 5.375 5.375 0 0 0 5.37 5.37 5.329 5.329 0 0 0 3.933-1.743c.812 1.054 2.073 1.743 3.503 1.743a4.443 4.443 0 0 0 4.439-4.439v-.931c0-6.548-5.327-11.875-11.875-11.875zm0 14.87a3 3 0 0 1-2.995-2.995A3 3 0 0 1 28.5 13.63a3 3 0 0 1 2.995 2.995A3 3 0 0 1 28.5 19.62z'/>
   <path fill='#666' d='M42.22 37.8a1.184 1.184 0 0 1-1.646-.33 1.187 1.187 0 0 1 .33-1.645l14.918-9.945-8.322-5.723V1.187C47.5.532 46.968 0 46.312 0H10.688C10.031 0 9.5.532 9.5 1.188v18.969L1.178 25.88l14.917 9.945A1.187 1.187 0 1 1 14.78 37.8L0 27.95V52.25C0 54.87 2.13 57 4.75 57h47.5c2.62 0 4.75-2.13 4.75-4.75V27.949L42.22 37.8zM11.875 2.376h33.25v28.5h-33.25v-28.5zm37.741 47.056c-.235.292-.58.444-.928.444-.262 0-.523-.083-.744-.259l-11.547-9.241H20.603L9.056 49.616a1.193 1.193 0 0 1-1.672-.185 1.188 1.188 0 0 1 .188-1.67l11.875-9.5a1.18 1.18 0 0 1 .74-.261h16.625c.271 0 .532.093.744.261l11.875 9.5a1.19 1.19 0 0 1 .185 1.67z'/>
</svg>
<p>Yuk langganan artikel gratis</p>
<div class='idnxmus-emailbox'>
 <form action='//feedburner.google.com/fb/a/mailverify' method='get' novalidate='' target='_blank'>
   <input name='uri' type='hidden' value='idnxmus'/>
   <input name='loc' type='hidden' value='en_US'/>
   <input class='emails user-valid valid' aria-label='Masukkan Email' autocomplete='off' name='email' placeholder='yourmail@gmail.com' required='required' type='email'/>
   <button class='button-subs' aria-label='Subscribe' type='submit' value='Subscribe'>Subscribe</button>
 </form>
</div>
</div>

Ganti ID Feedburner value='idnxmus'/> sesuai dengan kode Feedburner blog Anda.
Kode #666 merupakan kode warna Icon Email anda bisa mengubahnya sesuai dengan warna yang anda suka



6. Klick Simpan, kemudian Klick Simpan Setelan untuk menerapkan

7. Lihat hasilnya dengan membuka halamam home page atau salah satu halaman konten postingan anda



Cara Mengatasi Invalid Halaman AMP setelah memasang Widget Baru melalui Tata Letak

1. Buka Dasboard Blogger kemudian pilih menu tema dan pilih menu Tata Letak

2. Klick Widget yang sebelumnya anda buat yang menyebabkan Invalid halaman AMP

3. Lihat ID Widget melalui URL atau alamat Widget di Adress Bar bagian ujung



4. Close Jendela Widget kemudian cari dan temukan menu Tema di Dasboard Blogger

5. Klick Menu Tema, pilih EDIT HTML kemudian pada menu Lompat ke Widget cari dan temukan Widget sesuai ID target

6. Cari dan temukan kode Quick Edit (<b:include name='quickedit'/>), setelah anda temukan hapus kode tersebut dan klick Simpan Tema untuk menerapkan

7. Kunjungi halaman home page atau salah satu konten postingan blog anda yang sudah dipublikasikan.



Jika prosedurnya benar maka halaman Home Page dan halaman konten postingan blog anda akan valid AMP setelah menghapus kode <b:include name='quickedit'/> Widget.

Demikianlah Tutorial Cara Membuat dan Memasang Widget Kotak Langganan Post Via Email (Subscribe Email Box) Valid AMP. Terima kasih telah berkunjung dan jangan lupa untuk meninggalkan jejak dengan cara Like FansPage, Subscribe dan share ke media sosial.