Cara Membuat Widget Berlangganan Via Email

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Blog Mas Rifky - Selamat siang sobat? Kali ini saya akan post tutorial Cara Membuat Widget Berlangganan Via Email yang super keren nih. Sebelum kalian memulai bacalah doa agar tidak terjadi kesalahan. Inilah gambar contoh widget yang akan saya praktekan sobat:

Nah bagaimana?? Tertarikan?? Langsung aja ke tahapnya:

TUTORIAL

• Login ke blog sobat.
• Masuk ke Template >> Edit HTML kemudian cari kode ]]></b;skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* 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/AVvXsEiho24QozPA-XsPV2Yki9UBHYmoAQTMibJCJl2FpmCYBMPTa3fMPx1KEJNWbbQPRtowbe1sj8fh42Gixq545k5XKRmuOdTSFRT5ne5cF7USpCfaeu4Z1an-WcdxkBtOvXmnewciEI2oCFM/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;
}

• Save Template setelah meletakkan kode tersebut.
• Kemudian pergi ke Tata Letak >> Add Gadget >> HTML/JavaScript
• Lalu tambahkan 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>
        Blog Mas Rifky
      </i>
    </p>
    <div class="subscribe-form">
      <form action="http://feedburner.google.com/fb/a/mailverify?uri=BlogMasRifky" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=BlogMasRifky', '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>

• Setelah itu Save 

Ganti kode yang berwarna Merah dengan ID FEEDBURNER kalian.