Cara Membuat Widget Berlangganan yang Responsif ala Kode Jarwo
Cara Membuat Widget Berlangganan di Footer yang Responsif ala Bang Jarwo

Sekarang Bang Jarwo buat widget berlangganan via Email yang sangat responsif, bisa dipakai di sidebar dan footer, tidak mengganggu SEO, dan ringan.

Untuk penampakan widgetnya sendiri bisa dilihat gambar diatas. Sesuai dengan namanya, widget ini responsif, jadi mau ditaruh di header, sidebar, postingan, footer, atau dimanapun itu widget ini akan menyesuaikan ukuran dengan sendirinya.

Oke tanpa basa basi lagi lanjut ke cara pembuatannya.

  • Pertama, cari tempat yang ingin anda taruh widgetnya. Biasanya ditaruh di sidebar atau footer.
  • Lalu klik tambahkan widget > HTML/Javascript > masukkan kode dibawah ini kedalamnya.

<style>
#berlangganan-jarwo {box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);background-color:#515151;padding:10px 0}
#berlangganan-jarwo p {font-size: 18px;color: #FFF;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;padding-bottom: 5px;display: -webkit-inline-box;}
#berlangganan-jarwo .email-jarwo {padding:0px 20px 10px;}
#berlangganan-jarwo .email-jarwo input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:16px;width:96.5%;border:0;transition:all 0.4s ease-in-out;}
#berlangganan-jarwo .email-jarwo input:focus {background:#fff;outline:none;color:#888;}
#berlangganan-jarwo .email-jarwo .tombol-jarwo {background:#29CE3D;color:#eee;text-transform:uppercase;font-weight:normal;font-size: 20px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#berlangganan-jarwo .email-jarwo .tombol-jarwo:hover{background:#107D1D;color:#eee;}
</style>

<div id='berlangganan-jarwo'>
<center><p>Masukkan Email Anda untuk Tips Lainnya dari Bang Jarwo!</p></center>
<div class='email-jarwo'><center>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=KodeJarwo' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=KodeJarwo, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='naiyori'/><input name='loc' type='hidden' value='en_US'/>
<input class='tombol-jarwo' type='submit' value='Berlangganan'/>
</form></center></div></div>

  1. Ganti tulisan KodeJarwo yang ditandai dengan warna biru muda dengan url feed anda.
  2. Ganti tulisan Masukkan Email Anda untuk Tips Lainnya dari Bang Jarwo!  dengan kata-kata yang anda inginkan.

  • Simpan, lalu cek blog anda.

Bagaimana? Apakah widget sudah terpasang sempurna di blog anda? Atau ingin widget dengan tampilan lain? Bisa bilang ke saya lewat komentar disini.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 21 Juni 2018 18.43

Silakan mas...

Balas
Warman Channel Kode Jarwo
Warman Channel
# 21 Juni 2018 15.39

Keren dilihat dari gambar oke kalo begitu saya coba ya Bang Jarwo

Balas