Cara Membuat Widget Subscribe Box Sederhana di Blogger

Cara Membuat Widget Subscribe Box Sederhana di Blogger

Cara Membuat Widget Subscribe Box Sederhana di Blogger | Sebelumnya, Saya pernah membahas cara membuat widget subscribe box di blog (dilengkapi tombol follow media sosial). Kalau kali ini, Saya akan membahas versi sederhananya.

Penjelasan Singkat tentang Widget Subscribe Box

Widget subscribe box atau berlangganan e-mail merupakan salah satu bagian terpenting dari sebuah blog. Widget ini dapat mendatangkan blog kalian pengunjung yang banyak. Karena, setiap pengunjung yang mengisikan e-mail mereka pada kotak subscribe ini, otomatis mereka akan selalu mendapatkan informasi terbaru dari blog kalian.

Tentunya, widget ini telah dirancang dengan responsive dan cocok untuk segala jenis template blog kalian.

Untuk tutorial membuat dan pemasangan widget subscribe box, kalian simak saja pembahasan berikut ini.

Cara Membuat Widget Subscribe Box Sederhana di Blog [Blogger]

#subscribe-box {background-color:#c0d420;color: #fff;padding-top:20px;font-size: 20px;font-weight:700}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding-bottom:2px;margin:10px}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:100%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
  • Ketiga, kalian buka Tata Letak => klik Tambahkan Gagdet (Bebas dimana saja) => pilih HTML / Javascript => pastekan kode dibawah ini di bagian Konten.
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div> 

Konfigurasi
  • Ubah semua tulisan YOUR-USER-NAME dengan nama Feedburner blog kalian.

Akhir Kata …..

Semoga, kalian senang dengan tampilan widget subscribe box diatas. Apabila kalian menemukan kesulitan, kalian bisa menanyakan masalah tersebut di komentar. Sekian artikel tentang cara membuat widget berlangganan email sederhana di blog dan Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel