Cara Saya Membuat Halaman Subscribe By Email Di Blog

Saya menyukai tampilan blog yang simple rapi dan saya juga ingin menyediakan papan email berlangganan untuk orang yang mengunjungi blog saya, jika dia ingin mendapatkan artikel terbaru yang otomatis langsung dikirm ke email

Maka saya membuat sebuah halaman yang isinya kata-kata pendukung dan sebuah papan untuk memasukkan alamat email kemudian menambahkan tombol untuk submit

Bukan sebuah widget yang langsung terlihat jika ada orang mengunjungi blog, melainkan di dalam halaman yang memerlukan sebuah menu untuk membukanya untuk DEMO lihat gambar dibawah, jika kamu ingin membuat widget subscribe email sebelumnya saya sudah membuat tutorialnya bisa di baca pada artikel sebelumnya

Widget subscribe by email keren

Kenapa saya lebih suka halaman ketimbang widget yang bisa langsung terlihat oleh pengunjung ? Alasan saat ini ☺ menurut saya orang-orang jaman sekarang super sibuk membuka internet hanya pada saat mereka ingin membutuhkan sesuatu

Dari itulah hanya beberapa % saja orang yang mau berlangganan artikel dari blog kita. Dan sebuah widget menyangkut responsive dan rapinya tampilan blog, buat apa menampilkan sesuatu yang mungkin saja tidak diinginkan orang lain

Naah berbeda dengan halaman yang membukanya perlu membutuhkan link tautan atau menu di blog ini jauh lebih rapi ketimbang widget, jika memang ada pengunjung yang mengiginkan berlanganan via email pasti mereka akan mencari dan menemukanya dengan mudah jika memasang menunya pada tempat yang tepat

Itu menurut saya aja sih ☺ nyatanya masih banyak juga blog-blog yang memasang widget subscribe by email bahkan situs-situs besarpun, saya kembalikan ke selera dan keinginan pemilik blog

Cara membuat halaman berlangganan atau subscribe by email di blog


Jika kamu tertarik membuatnya di halaman bukan di widget seperti yang saya buat, kamu bisa mengikuti tutorial yang cukup mudah dan sederhana berikut ini.

Yang pertama harus dilakukan buat halaman baru dengan judul Subscribe By Email atau Berlangganan Via Email, pilih mana yang menurut kamu lebih menarik

Kemudian buatlah kata-kata pendukung seperti pada DEMO yang saya sebutkan

Selanjutnya copy paste kode dibawah ini letakkan di tengah kata pendukung yang telah dibuat, diatas dibawah juga bisa pilih yang kamu suka, ingat dalam mode HTML jangan di Compose kemudian publikasikan

<div class="berlangganan-box">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=KetikIde', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<i>Ayo ikuti jejak mereka 100 orang lebih telah mendapatkan artikel terbaru langsung dikirim melalui email</i>
<input class="email-address" name="email" placeholder="Masukan alamat email..." type="text" />
<input class="submit-email" type="submit" value="Subscribe" /></form>
</div>

Langkah selanjutnya pilih menu Tema Edit HTML copy paste kode dibawah ini letakkan diantara kode CSS yang ada di blog kalian

/* Statis Subscribe */
.berlangganan-box {background:#0099ff;border-radius:2px;border:1px solid #ddd;color: #fff;padding: 15px;margin: 20px 0;text-align: center;font-size:12px;}
.berlangganan-box p {margin:15px 0;}
.berlangganan-box input.email-address[type="text"] {width: 60%;padding: 10px;text-align: center;border-radius: 2px;border: none;outline: none;}
.berlangganan-box input.submit-email[type="submit"] {background: #F57224;padding: 10px 20px;border-radius: 2px;color: #fff;border: none;outline: none;}
.berlangganan-box input.submit-email[type="submit"]:hover {background: #e00;color: #fff;cursor: pointer;}
.berlangganan-box input.email-address[type="text"]:focus {background:rgba(0, 28, 33, 0.38);}

Kemudian simpan dan selesai, cukup mudah bukan. Dan cara untuk membukanya perlu menyedikan menu didalam blog terserah mau diletakkan di mana tergantung selera masing-masing

Udah begitu aja dan selesai cara membuat halaman berlangganan/subscribe by email di blog, cukup sederhana tidak membebani loading blog dan tampilan blog tetap simple dan rapi

Jika ada yang ingin ditanyakan silahkan tingalkan dikolom komentar, semoga sukses.

Read also

2 komentar

  1. Kode HTML yg pertama sdh berhasil muncul, tapi tampilannya tidak sebagus yg ada di demo. Kenapa ya?
    Kode HTML yg kedua, yg utk mengirim artikel ke email, saya bingung harus ditempatkan dimana.
    Walaupun sudah dikatakan bhw kode HTML nya di "letakkan diantara kode CSS yang ada di blog kalian", tapi saya tidak tau kode CSS itu yg mana.
    Bisa bantu saya lebih lanjut?
    • Mas Uki
      Jika tampilanya tidak sama kemungkinan salah dalam peletakan kode css mas, coba kode cssnya letakkan di bawah kode : style type='text/css'>