Cara Membuat Widget Newsletter di blog atau web

Hi Web Developers! kali ini guru design akan memberi tahu kamu cara membuat widget newsletter atau bisa juga di sebut widget suscribe yang simpel enak dipandang gak ngebosenin pastinya.

Oh iya buat kamu yang ingin tahu cara membuat halaman profile card klik disini ya

Yuk kita mulai tutorial-nya ikutin sampai habis ya pertama-tama siapkan komputer kamu atau smartphone kamu dan satu gelas air kopi yang masih hangat untuk menemani mu ngoding nantinya.

jika bahan bahan sudah siap semua kita lanjut ketutorialnya:

Pertama

Biasanya widget newsletter ini berada di samping alias sidebar jadi yang pertama adalah buka tata letak blogger kalian atau yang menggunakan cms lain silahkan di sesuaikan sendiri sama saja intinya.

Kedua

kemudian klik tambah gadget pilih HTML/JavaScript

Ketiga

Tambah semua code di bawah ini kedalamnya.

<style>
/* Newsletter Boxby Www.gurudzgn.com  */
#container-newsletter{max-width: 100%;position: relative;margin: 10px;border:10px double #fafbfd;border-radius:18px;padding:0 20px 25px 20px;background-image: linear-gradient(39deg, #2DCAD2 44%, #3283D4 0%);}
#container-newsletter h2,#container-newsletter h3{color:#fff;margin-bottom:15px}#container-newsletter h2:after,#container-newsletter h3:after{display:none}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 15px;padding:0;line-height:normal}
#subscribe-box .emailfield{margin:auto}
input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#fff;border:1px solid #ddd;color:#5a5a5a;font-weight:300;padding:10px 12px;width:100%}
#subscribe-box .emailfield input{padding:13px 20px;color:#aaa;border:0;font-size:14px;margin-bottom:16px;border-radius:99em;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);transition-delay:0.2s}
#subscribe-box .emailfield input:focus{color:#222;outline:none;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05);transition-delay:0s}
#subscribe-box .emailfield .submitbutton{background:rgba(255,255,255,.25);color:#fff;width:100%;font-size:15px;font-weight:bold;border:0;margin:auto;cursor:pointer;box-shadow:0 2px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.13);transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(255,255,255,.35);color:#fff;box-shadow:0 3px 3px rgba(0,0,0,0.1), 0 3px 4px rgba(0,0,0,0.13)}
#subscribe-box .emailfield input:focus.submitbutton{color:#fff}
</style>

<div id='container-newsletter'>
 <h3 class='title'>Newsletter</h3>
 <div id='subscribe-box'>
  <p>
   Dapatkan update tutorial gratis dari Guru Design
  </p>
  <div class='emailfield'>
   <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Gurudzgn&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email Address&quot;;}' onfocus='if (this.value == &quot;Email Address&quot;) {this.value = &quot;&quot;;}' value='Email Address'/>
    <input name='uri' type='hidden' value='Gurudzgn'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='submitbutton' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>

Ket

Saya disini menggunakan feedburner jadi silahkan ubah link dan value nya yang saya blok warna hijau dengan link kalian masing-masing.

Dan kamu juga bisa menyesuaikan sendiri jarak margin-nya yang saya blok warna merah

Terakhir
Save dan lihat demonya berikut ini:
Result

Jika ada yang kurang jelas silahkan tulis di komentar.

Sekian dan terimakasih, semoga bermanfaat