Membuat Widget Box Berlangganan Artikel

Pastinya setiap orang yang menemukan sebuah web yang artikel nya sangat dinanti-nanti update-an nya dia akan selalu menunggu akan artikel terbarunya setiap saat namun jika menunggu itu sangat tidak nyaman terutama bagi saya. Nah saya akan memberikan trik agar kita bisa standby menunggu artikel tanpa ribet! Caranya bagaimana? Yuk simak artikel ini.

Contoh Widget Box Subscribe

Nah caranya dengan kita mendaftar, lbih tepatnya bergabung untuk bisa mendapatkan artikel artikel terbaru dengan meng-klik panel subcribe pada bagian web yang disediakan tapi jika suatu web tidak menyediakan mungkin bisa dengan melayangkan komentar di web nya.

Bagi para blogger/penulis web untuk dapat memasangkan widget box nya pada blogger ikuti cara dibawah ini.

1. Masuk ke dashboard blogger
2. Lalu pilih bagian Tema (Disamping kiri) - Edit HTML - Lalu cari ]]></b:skin> kemudian letakan kode dibawah ini tepat di atas kode ]]></b:skin> itu.

/* Subscribe */
#subscribe {
  padding:3px 0;
  background:#00c69e;
  margin-bottom:7%;
  position:relative;
}
.subscribe-wrapper {
  color:#fff;
  font-size:12px;
  line-height:20px;
  padding:1px 20px 10px;
  text-align:center;
  text-transform:none;
  font-weight:500;
}
.subscribe-form {
  clear:both;
  display:block;
  margin:10px 0;
  overflow:hidden;
}
form.subscribe-form {
  clear:both;
  display:block;
  margin:10px 0 0;
  width:auto;
  overflow:hidden;
}
.subscribe-field {
  background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0to1VvnsF1JeRcB9d6kntY9QkTQ0UtOqjn9ANPp76gUvTRWeWBySFJwtHjbKUfnQBJF07fTvB2sCZkQU5DCeml0uXgtip1ShdJsJ-wMVX3UnBVzxVskIacVHZ2la7KnpdAkl0gEsby3s/s1600/mail.png) 10px no-repeat;
  color:#444;
  margin:0 0 15px;
  padding:12px 40px;
  width:100%;
  border:none;
}
.subscribe-button {
  transition:all .3s ease-in;
  background:#008f72;
  color:#fff;
  cursor:pointer;
  font-weight:700;
  padding:10px;
  text-transform:none;
  width:100%;
  border:none;
  font-size:16px;
}
.subscribe-button:hover {
  background:#00735C;
  border:none;
}

Yang diberi tanda biru itu bisa diganti dengan warna yang kalian sukai. Dan yang diberi warna putih bisa diganti dengan gambar yang anda sukai yang penting cocok dengan maksud aja ya, kemudian untuk text Subcribe Wrapper bisa diganti warnanya disesuaikan dengan background warna web kalian.

Jika sudah maka tinggal Simpan.
4. Kemudian masuk ke bagian Tata Letak - Tambahkan Widget - Tambah HTML/Javascript. Lalu masukan kode dibawah ini

<div id="subscribe">
  <div class="subscribe-wrapper">
    <p>
      Dengan memasukkan email pada kolom di bawah ini, anda akan mendapatkan update artikel dari
      <i>
        Yuk berbagi Ilmu & Informasi
      </i>
    </p>
    <div class="subscribe-form">
      <form action="http://feedburner.google.com/fb/a/mailverify?uri=URL FEED BLOG ANDA" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=URL FEED BLOG ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
  <input name="uri" type="hidden" value="DataUploadku" />
  <input name="loc" type="hidden" value="en_US" />
  <input class="subscribe-field" name="email" autocomplete="off" placeholder="Enter your email address "/>
  <input class="subscribe-button" title="" type="submit" value="Subscribe Now !" />
  </form>
  </div>
  </div>
  </div>
</div>

Jika sudah. Simpan dan lihat hasilnya akan seperti ini

DEMO

Terima kasih anda telah membaca artikel Membuat Widget Box Berlangganan Artikel. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: