Sunday, February 28, 2016

Tips Blogger: Customize Form Email Berlangganan Mailchimp Pada Blog


Setiap orang yang memiliki form pendaftaran email menginginkan satu hal yaitu "subscribers"! Anda dapat mempromosikannya di media sosial, mengirimkan email kepada Follower lama Anda, atau menulis post tentang hal tersebut, tapi salah satu cara yang paling efektif dan permanen untuk mempromosikan daftar email Anda adalah dengan memasang formulir pendaftaran pada blog Anda. Formulir ini akan memungkinkan setiap pembaca untuk mengisi beberapa informasi diri dan langsung dapat berlangganan dalam beberapa detik saja, dan dapat ditampilkan di mana saja pada situs Anda.

MailChimp adalah layanan email
yang dapat anda pertimbangkan sebagai pilihan, Jadi tutorial ini secara khusus akan didasarkan pada form layanan tersebut. Jika Anda menggunakan layanan email yang berbeda, Anda masih dapat mengikuti dan mendapatkan gambaran umum bagaimana kode tersebut dapat bekerja!

Cara Customize Form Email Berlangganan Mailchimp Pada Blog Anda


Mengapa MailChimp?

Sangat mudah untuk membuatnya, hanya butuhwaktu kurang dari 30 menit untuk mendaftar, membuat bentuk form, dan mulai mempromosikan daftar saya, Jadi ini adalah pilihan yang bagus untuk blogger pemula.

MailChimp benar-benar GRATIS untuk kuota 2.000 pelanggan, dan pada saat Anda melebihi kuota, Anda akan dikenakan biaya!
Merancang newsletter Anda dengan super sederhana melalui antarmuka drag & drop. Tidak ada coding yang diperlukan! 

Baca Juga:
Cara Tepat dan Mudah Membuat menu Navigasi Drop Down Pada Blogger 
Cara Mendesain Footer Blog Secara Efektif + Bonus Footer 4 Kolom 
Cara Membuat Tombol Back To Top Tanpa Ribet

Memilih Lokasi Untuk Form Anda

Saya melihat pada blog-blog favorit saya untuk mendapatkan beberapa inspirasi, dan pada umumnya form tersebut ditempatkan pada 3 lokasi utama yaitu:

Di atas Konten / Sidebar

Jika Anda baru saja meluncurkan newsletter atau menawarkan update konten terbaru, lokasi ini pasti akan menangkap mata pembaca Anda. Namun berhati-hatilah dalam merancang formulir di sini, karena posisi ini adalah posisi krusial dari keseluruhan antarmuka blog Anda, tentunya Anda tidak ingin mengalihkan perhatian pembaca dari sisa isi konten utama.

Di dalam Sidebar

Alasan paling tepat untuk pilihan ini, sidebar Anda adalah ruang iklan gratis untuk blog Anda sendiri, dan ini adalah lokasi yang tepat untuk sebuah mini form. Tergantung pada lebar sidebar Anda, Anda bahkan mungkin menginginkan hanya menempatkan sebuah link tombol khusus menuju form Anda. Anda bisa membuat sebuah grafis sendiri dan menambahkan deskripsi yang cukup untuk mengantarkan pembaca agar berlangganan pada artikel blog Anda.

Di bawah Posting Blog

Selama pengunjung menyelesaikan membaca artikel posting Anda (mudah-mudahan saja! hehe), Mereka semua akan melewati lokasi ini dalam perjalanan nya menuju kolom komentar. Posisi yang kurang "mengena" dibandingkan opsi sebelumnya, namun masih cukup jelas, ini adalah lokasi favorit saya untuk menempatkan formulir email berlangganan. Anda dapat menambahkan baris tambahan info sehingga pembaca tahu persis apa yang mereka dapatkan ketika mereka mendaftar, dan pilih warna cerah sehingga lebih menonjol dari komentar dan tombol share.
Baca Juga:
Cara Membuat Efek Hover Dalam Gambar Pada Blog 
Cara Merubah Permalink Pada Postingan Setelah Di Publikasikan

Membuat Custom Signup Form

Dapatkan kode

Buka MailChimp dan pergi ke Lists > Your Newsletter > Signup Forms > Embedded Forms dan pilih Naked. Ini adalah pilihan terbaik untuk menyesuaikan formulir Anda karena Anda hanya diberi HTML (tidak ada CSS). Saya centang sebagian besar pilihan, dan memastikan semua field input yang saya ingin disertakan.

Dapatkan kode

Tempatkan kode dalam widget teks, dan buat beberapa perubahan berikut

Tambahkan widget (HTML/JavaScript pada Blogger) di lokasi mana yang Anda pilih (Anda boleh membuat area widget baru, namun jika Anda tidak tahu bagaimana melakukan hal tersebut, Anda mungkin tetap harus memilih pada daerah widget yang sudah ada). Kemudian, lakukan perubahan ini:

Menghapus label

Membuang baris yang terlihat seperti ini:

<label for="mce_EMAIL">Email Address</label>

Ini akan menghapus kalimat di atas masing-masing kotak input. Jangan khawatir, kita akan menambahkan nya lagi nanti di lokasi yang berbeda.


Mengedit input

Dimanapun Anda melihat input tag, tambahkan placeholder = "APA YANG HARUS DI INPUT". Dan akan terlihat seperti ini:

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address">


Tambahkan beberapa CSS untuk form Anda

Form Anda sekarang mungkin terlihat cukup membosankan. Untuk mendapatkan tampilan form yang lebih menarik, kita akan menambahkan beberapa CSS. Copy dan paste kode ini ke dalam file CSS Anda, pada blogger biasanya pergi ke Template>Edit HTML dan letakkan  diatas kode ]]></b:skin> atau dapat melalui Template > Tingkat Lanjut > dan tambahkan CSS (untuk pengguna Wordpress, pergi ke Appearance>Editor):

/* Mengubah gaya keseluruhan bentuk */
#mc_embed_signup {
    background: #f8f8f8;
    color: #000000;
    padding: 20px;
        text-align: center;
}

/* Styles judul teks di atas input */
#mc_embed_signup h2 {
    font-size: 18px;
    margin: 0 0 20px;
    color: #000000;
    text-align: center;
}

/* Menambahkan ruang ekstra di sekitar kotak masukan */
#mc_embed_signup .mc-field-group {
    padding: 10px 0;
}

/* Styles kotak masukan input box */
#mc_embed_signup  input {
    width: 200px;
}

/* Styles tombol berlangganan */
#mc_embed_signup .button {
    background-color: #000000;
    color: #ffffff;
    margin: 0 auto;
}
 
Setelah styling form Anda, seharusnya terlihat seperti contoh di bawah. Mungkin tidak tampak persis seperti ini karena saya merubah beberapa kode! Jika beberapa style Anda tidak muncul, coba ubah beberapa penyesuaian dan sesuaikan menurut keinginan Anda sebelum titik koma. Ini bisa berarti Anda telah memiliki css lain dalam kode Anda yang menumpuk di atas kode baru Anda.



Contoh hasil

Anda akan sedikit dipusingkan untuk mendapatkan gaya yang tepat yang sesuai dengan blog dan keinginan Anda, namun Anda akan puas setelah melihat apa yang dapat Anda buat!
_Eof_


Emoticon Emoticon