Cara Membuat Kotak Email Berlangganan di Blog

Cara Membuat Kotak Email Berlangganan di Blog

Salah satu widget blog yang menjadi sumber visitor adalah email berlangganan (subscribe email). Mengapa? karena widget ini memungkinkan pengunjung untuk dapat berlangganan artikel terbaru melalui email tanpa harus membuka halaman blog tersebut. Dengan cara memasukan alamat email dan password pada kotak "Email berlangganan" kemudian submit.

Jadi setiap blog melakukan update artikel baru, pelanggan akan mendapatkan pemberitahuan melalui email submitnya. Apalagi jika yang berlangganan banyak tentu trafik blog akan meningkat.

Selain fungsi di atas, widget ini juga akan menambah daya tarik sendiri buat pengunjung. Nah, buat sobat yang tertarik dengan widget ini, boleh ikuti langka-langkah berikut.

Cara Membuat Kotak Email Berlangganan di Blog


1. Masuk dasbor blogger pilih Tema klik Edit HTML, kemudian letakan kode CSS berikut sebelum kode ]]><b:skin> atau </style>

#nubz-two {background:#4d9fd6;color:#fff;padding:20px;margin:0}

#nubz-two h4 {background:transparent;color:#fff;padding:0;border:0;margin:0 0 20px 0}

#nubz-two form {margin:0;}

#nubz-two input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#fff;border:2px solid #fff;color:#333;padding:9px 11px;width:100%}

#nubz-two input[type="submit"]{background:rgba(255,255,255,.2);color:#fafafa;margin:0;width:100%;border:none;cursor:pointer;font-size:15px;padding:12px 20px;font-weight:700;transition:all .3s;}

#nubz-two input[type="submit"]:hover{background:#79beed}

2. Masukan kode berikut pada widget HTML/JavaScript baru Anda.

<div class="widget nubz-widget" id="nubz-two">

<div class="widget-wrap">

<div class="nubz">

<h4 class="widget-title widgettitle">Email Berlangganan</h4>

<form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=nubietheme/KZPo','.popupwindow','scroollbars=yes,width=550,height=520');return true">

<p>Berlangganan artikel terbaru dari blog ini langsung via email</p>

<input type="text" name="email" placeholder="Alamat Email"/> 

<input type="hidden" value="nubietheme/KZPo" name="uri"/> 

<input name='loc' type='hidden' value='en _US'/>

<input type='submit' value='Subscribe'/>

</form></div></div></div> 


3. Silahkan ganti dengan ID feedburner blog Anda, untuk tulisan yang di blok warna biru.
4. Simpan template dan lihat hasilnya.

Baca juga : Cara mendaftarkan Blog pada Feedburner

Untuk sementara proses pembuatan kotak email berlangganan selesai, namun untuk mengaktifkanya Anda masih butuh kode ID feedburner yang bisa di dapatkan di Google Feedburner.

Cara Mendapatkan Kode ID Feedburner dan Mengaktifkan Email Berlangganan.


1. Masuk pada feedburner.google.com, kemudian klik nama feed blog Anda atau daftarkan dengan cara isikan nama url blog pada kolom yang tersedia, kemudian klik tombol Next dan ikuti langkahnya.

Cara Membuat Kotak Email Berlangganan di Blog

2. Selanjutnya klik tab Publicize kemudian pilih menu Email Subscription.
  
 Cara Membuat Kotak Email Berlangganan di Blog

Selanjutnya akan terlihat kode form subscription yang ada di samping menu dan tulisan yang bercetak biru adalah ID feedburner blog Anda.

Copy dan paste kode tersebut pada form HTML kotak email berlangganan Anda. Silahkan baca kembali langkah ke-3 di atas.

3. Jika sudah klik tombol ACTIVE yang ada di bawahnya untuk mengaktifkan.

NB : Anda juga bisa langsung memasukan semua kode form di atas ke dalam widget HTML/JavaScript tanpa CSS style seperti di atas. Hanya saja tampilanya masih biasa atau default, namun dengan fungsi sama.

#Hasil kotak email berlangganan dengan style CSS.

Cara Membuat Kotak Email Berlangganan

#Hasil kotak email berlangganan tanpa style atau default blogger.

Cara Membuat Kotak Email Berlangganan

4. Untuk mengetahui apakah kotak email berlangganan sudah aktif atau terintegrasi oleh ID feedburner, Anda dapat mengeceknya dengan cara memasukan URL feed pada Browser. URL tersebut ada di kode form (lihat gambar pada langkah ke-2 di atas). Sebagai contoh http://feedburner.google.com/fb/a/mailverify?uri=nubietheme/KZPo. Jika berhasil akan terlihat seperti gambar berikut.

Cara Membuat Kotak Email Berlangganan

Dan sebaliknya jika email belum aktif akan tampak seperti gambar berikut.

Cara Membuat Kotak Email Berlangganan

Sekian dulu sobat artikel dari saya "cara membuat kotak email berlangganan di blog" dan semoga dapat bermanfaat, apabila ada kekeliruan dan kesalahan penulis mohon maaf.

Penulis

1 komentar so far

cukup menarik gan, patut di coba


EmoticonEmoticon