Cara Membuat Widget Newsletter Modern Responsive

 

    Hiirotaku - Jika bisa di artikan newsletter adalah sebagai surat yang berisikan berita, Jika kalian sering memeriksa email pasti sangat sering menerima email dari beberapa website contohnya seperti ada promo, berita, atau yang lainnya.

Apa itu Newsletter?

Newsletter adalah suatu email yang berisi pemberitahuan ataupun update terbaru dari perusahaan untuk setiap pelanggannya. Isi dari email tersebut bisa berupa fitur terbaru dari aplikasi, artikel rekomendasi yang di kelola oleh perusahaan, dan media lainnya.

Strategi ini adalah salah satu metode email marketing yang sudah sering digunakan oleh berbagai perusahaan besar di dunia. Jika pada umumnya email marketing ini dikirim pada target yang lebih luas agar banyak orang yang tertarik untuk membeli, maka pada newsletter umumnya dikirim pada daftar orang tertentu saja.

Apakah Perlu Memasang Newsletter?

Jawabannya pasti perlu, karena kalian bisa menjangkau pelanggan yang suka berkunjung dan membaca artikel kalian, dan itu juga menguntungkan kedua belah pihak, kalian mendapatkan pengunjung dan pelanggan tetap dan bagi pelanggan mendapatkan info atau news terupdate dari blog kalian.

Langkah Pemasangan Widget Newsletter

1. Buka halaman blogger

2. Copy dan pastekan kode CSS dibawah ini tepat di atas kode ]]></b:skin> atau <style>

.darkmode .teler p {
    color: white;
}
.teler {
  width: 100%;
  margin: 35px auto;
  transform: rotate(-3deg);  
}
.teler strong {
  display: block;
  text-transform: uppercase;
  font-size: 23px;
  letter-spacing: 1px;
  color: #FF6C54
}
.teler span {
  border-bottom: 2px dotted #FF6C54
}
.teler p {
  margin: 5px 0 10px
}

.infoteler {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.imel,.teleryuh {
  height: 40px!important;
  display: flex!important;
  align-items: center!important;
  margin: 0!important;
  padding: 0!important;
  border: none!important;
  outline: none!important;
}
.imel {
  padding: 0 20px!important;
  border-left: 3px solid #FF6C54!important;
  width: calc(100% - 100px)!important;
}
.imel::placeholder {
  font-weight: 700!important;
  color: #777!important
}
.teleryuh {
  justify-content: center!important;
  width: 250px!important;
  border-radius: 0 5px 5px 0!important;
  font-weight: 700!important;
  color: #fff!important;
  background: linear-gradient(45deg, #FF6C54, #FFA754)!important;
} 

3. Setelah itu ada 2 pilihan untuk memasang widget newsletter ini yaitu di pasang ke widget blog atau dibawah artikel atau postingan blog

4. Memasang di widget blog, ke menu tata letak dan add widget > pilih html dan javascript > copy dan pastekan kode ini.

 <form class="teler" action="https://api.follow.it/subscribe?pub=CQoJCcEXztieMrPUAQYKlNRPCjlhk9FW" method="post" target="_blank">
  <strong>🍺 News`<span>teler</span>`</strong>
  <p>Yuk! Gabung bareng SausPedia yang lagi `teler` gara-gara Terjaga nunggu updatean kita lewat email.</p>
  <div class="infoteler">
    <input class="imel" type="email" placeholder="sauspedia@email">
    <input class="teleryuh" type="submit" value="Teler Aja Deh!">
  </div>
</form> 

5. Memasang di bawah artikel blog, Copy dan pastekan kode yang ada di langkah nomer 4 dan setelah itu letakkan kodenya di bawah <data:post.body/> 

6. Simpan

Catatan : biasanya <data:post.body/> memiliki 2 atau 3 kode, kalian letakkan pada kode ke 2 atau yang ke 3

Note : ganti kode yang di tandai dengan feedburner kalian, jika kalian tidak tau cara membuat id feedburner bisa langsung berkomentar saja nanti saya bantu.

DEMO

Terima kasih Semoga Bermanfaat.

sc : masihterjaga.id / glints / accurate