Memasang Widget Email Subscriber Artikel di Blog

Sebelum kita Memasang Widget Email Subscriber Artikel di Blog, alangkah baiknya kalau kita mengetahui dulu Apa itu subscriber, Subscriber merupakan sebuah istilah yang digunakan untuk merujuk kepada orang yang memiliki kepentingan untuk menerima atau mendapatkan informasi tertentu dengan keinginan mereka. Dengan kata lain, Subscriber adalah pelanggan kontent ter tertentu dalam sebuah web atau blog

Melakukan subscribe pada suatu web atau blog berarti mengikuti setiap update terhadap berita atau info terbaru dari web atau blog tersebut. Untuk melakukan subscribe digunakan sebuah email dan melalui email inilah semua update artikel web tersebut langsung terkirim kedalam email kita. jadi, setiap ada artikel baru update dari blog tersebut, maka postingannya akan segera masuk ke email kita tanpa repot harus sering ke website kesukaan kita untuk melihat postingan terbarunya

Baca juga Cara membuat email di Google

Dalam melakukan subscribe, sebenarnya kita tidak hanya melakukannya pada artikel saja, tapi juga bisa dilakukan untuk mendapatkan info komentar dari setiap konten yang kita ikuti. Misalnya di Facebook
Atau mendapatkan pemberitahaun akan sebuah penawaran produk atau jasa secara online melalui email, dan dalam hal ini disebut sebagai Subscriber Autoresponder

Baca juga tentang Memasang Autoresponder di Blogger

Cara Memasang Widget Email Subscriber Artikel di Blog

Sebelum memasang widget email subscriber ini, alangkah baiknya jika Anda mencoba demonya terlebih dahulu, apakah demo dibawah ini bekerja atau tidak, silahkan masukkan email Anda..

onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="subscribe-form">

Jika demo diatas bekerja, silahkan gunakan kode CSS berikut ini

Masuk kedalam akun blogger Anda
Pilih blog yang akan dipasang widget email subscriber ini
Pilih menu Template >> Edit HTML

Cari kode template ]]></b:skin> dan salin kode berikut sebelum ]]></b:skin>

.subscribe {
  margin: 5px auto;
  padding: 20px;
  width: 300px;
  background: #f9760b;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.subscribe-col {
  padding-left: 120px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-iW0SKF2QL5LIRXmLpw9-vtpLrsyxTWpqH7C3k0Jtr4WblBrPMe6McGY3JxuA93_OjQOEXtnZSXGmY0ASMQoGP_BJZRdi007DyEKYuXlXU95LwcujkTlxbmGYQdSWZSKkDnorfgzK_s/s1600/email-subscriber.png") 5px center no-repeat;
}
.subscribe-col > h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  text-transform: uppercase;
}
.subscribe-col > p {
  line-height: 22px;
  color: #484848;
}
.subscribe-form {
  position: relative;
  margin: 20px -20px -20px;
  padding: 15px;
  background: #fda352;
  border-top: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
  background-image: -webkit-linear-gradient(top, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
  background-image: -moz-linear-gradient(top, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
  background-image: -o-linear-gradient(top, #fda352a, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
  background-image: linear-gradient(to bottom, #fda352, #f8d9be 50%, #fae2cd 51%, #fb8f3d);
  -webkit-box-shadow: inset 0 1px #fae2cd;
  box-shadow: inset 0 1px #fae2cd;
}
.subscribe-input {
  padding: 0 15px;
  width: 90%;
  height: 35px;
  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 15px;
  color: #444;
  background: #fefefe;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #999 #aaa #aaa;
  border-radius: 20px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
}
.subscribe-input:focus {
  outline: 0;
}
.subscribe-submit {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  padding-left: 15px;
  height: 35px;
  width: 60px;
  background: #60e160;
  border: 1px solid;
  border-color: #4c9d50 #4c9d50 #4c9d50 #55af5a;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-image: -webkit-linear-gradient(top, #84f087, #4cd94a);
  background-image: -moz-linear-gradient(top, #84f087, #4cd94a);
  background-image: -o-linear-gradient(top, #84f087, #4cd94a);
  background-image: linear-gradient(to bottom, #84f087, #4cd94a);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}
.subscribe-submit:active {
  background: #4cdf4d;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.subscribe-submit:before {
  content: '';
  display: block;
  margin-top: 1px;
  width: 25px;
  height: 19px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMBwTkBqlf7MlLtUVTj7EZOe8eSyVkIwYNAPJe85KNJgt_1MJfxxB4dNMC2XfwFkyViIso7zynUbkVVptzgFXpz5TmyOr42qvr91VOceYKI1mLXIQJuplc7-SASMGhByBjWKcw25-cno/s1600/tick.png");
}
.lt-ie9 .subscribe-input {
  line-height: 33px;
}

Masukkan kode HTML berikut ini kedalam widget blog,

<div class="subscribe">
<div class="subscribe-col">
<h3>GRATIS update artikel via Email</h3>
<p>Dapatkan kiriman artikel terbaru langsung ke email anda!<p>
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="subscribe-form">
<input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus><input type="hidden" value="PanduanTemplateBlogku" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<button type="submit" class="subscribe-submit">Subscribe</button>
</form>
</div>

Catatan:

Ganti link http://feedburner.google.com/fb/a/mailverify?uri=PanduanTemplateBlogku dengan link feed blog Anda yang ada di email feedburner
Ganti value="PanduanTemplateBlogku" dengan value Anda di email feedburner

Untuk menampilkan email feed verifikasi di feedburner, silahkan baca di Cara membuat email verifikasi di feedburner

Semoga bermanfaat, terimakasih telah membaca artikel memasang widget email subscriber artikel di blog. Jika ada pertanyaan silahkan tinggalkan komentar Anda