Bagaimana cara menambahkan formulir pendaftaran Mailchimp di Blogger?

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan formulir pendaftaran email ke situs web Blogger Anda.

Di sini, saya akan menunjukkan kepada Anda proses langkah demi langkah untuk menambahkan formulir pendaftaran Mailchimp di bilah sisi situs web Blogger. Formulir pelanggan ini akan dirancang menggunakan HTML, CSS & Javascript.

Jadi, mari kita mulai artikelnya.

Apa itu Pemasaran Email?

Pemasaran email adalah proses mengirim pembaruan email tentang produk dan layanan dan membangun hubungan yang solid dengan pelanggan atau klien.

Anda dapat menggunakannya untuk mengirim pembaruan tentang blog Anda atau mengirim ebook gratis, mengundang pengguna untuk bergabung dengan webinar, atau mengirim kupon diskon dan meningkatkan penjualan Afiliasi.

Karena Feedburner dimatikan oleh Google, tidak ada cara bawaan untuk mengumpulkan email di platform Blogger. Itu sebabnya Anda memerlukan alat pemasaran email seperti Mailchimp yang memungkinkan kami membuat daftar email dan mengirim email secara gratis.

Di Mailchimp, Anda dapat menambahkan hingga 2000 pelanggan secara gratis dan mengirim 10.000 email per bulan. Dan jika Anda ingin menambahkan lebih banyak pelanggan maka Anda dapat meningkatkan ke paket premium.

Formulir pendaftaran yang disertakan dengan Mailchimp sangat mendasar dan tidak terlihat bagus. Itu sebabnya kita perlu mendesain ulang formulir ini menggunakan kode CSS.

Jadi, mari kita periksa bagaimana Anda dapat mengumpulkan email pengunjung Anda menggunakan formulir pendaftaran Mailchimp di Blogger.

Langkah-langkah untuk Menambahkan formulir pendaftaran Mailchimp di Blogger

Langkah-1 : Untuk menambahkan formulir pendaftaran email di Blogger, Anda harus mengikuti langkah-langkah di bawah ini.

Langkah-2 : Buka dasbor Blogger dan klik pada bagian Tata Letak. Sekarang tambahkan widget HTML/Javascript di sidebar.

Langkah-3 : Sekarang salin kode HTML di bawah ini dan tempelkan ke bagian widget.

 <div class="container"> <!-- Begin Mailchimp Signup Form --> <div> <form action="ADD-YOUR-MAILCHIMP-URL-HERE" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" /> </div> <div class="mc-field-group"> <label for="mce-NAME">Name <span class="asterisk">*</span> </label> <input type="text" value="" name="NAME" class="required" /> </div> <div class="clear"> <div class="response"></div> <div class="response"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div aria-hidden="true"><input type="text" name="b_ac52e8b1ce2a06907e0091d7c_63bf572981" tabindex="-1" value="" /></div> <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" class="subscribe" /></div> </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='NAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup--> </div>

Langkah-4 : Sekarang Login ke dashboard Mailchimp Anda dan salin dan ganti URL MailChimp pada kode di atas.

Langkah-5 : Sekarang Buka editor tema blogger dan rekatkan kode CSS di bawah ini tepat di atas ]]></b:kulit> tandai atau </ gaya> menandai.

 form { background: #004369; border-radius: 30px; padding: 50px 20px 50px 20px; margin: 10px 0 10px; font-size: 22px; position: relative; box-shadow: 0 40px 50px -50px #89fcf3; } form input { display: block; width: 100%; border-radius: 12px; border: none; height: 50px; padding: 15px; background: FFFFFF; color: black; transition: 0.5s; } form input:focus { outline: none; box-shadow: 0px 10px 30px -20px #89fcf3; filter: contrast(85%) } form label { color: #CCCDCF; font-weight: bold; display: inline-block; margin-bottom: 15px; font-size: 22px; } form .subscribe { max-width: 300px; height: auto; background: #DB1F48; border: #E5DDC8 2px solid; border-radius: 45px; font-weight: bold; line-height: normal; margin: 0 auto -80px; } form .subscribe:hover { background: #01949A; color: #151515; cursor: pointer; } /* Mailchimp CSS */ form .mc-field-group { margin-bottom: 20px; } form .indicates-required { color: #CCCDCF; font-size: 0.5em; margin: 35px 0; text-align: center; } form input + .mce_inline_error { display: inline-block; font-size: 0.5em; position: relative; } form input + .mce_inline_error:before { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #6B0505; position: absolute; top: -10px; }

Langkah-6 : Sekarang simpan kode dan formulir pendaftaran email Mailchimp ditambahkan ke situs web blogger Anda.

Jika Anda menghadapi masalah selama proses ini, Anda dapat mengambil bantuan dari panduan video di bawah ini.

Catatan: Jika Anda dapat menambahkan formulir pendaftaran di sidebar dan area footer, mana saja yang cocok untuk Anda.

Anda selanjutnya dapat menyesuaikan pelanggan email ini di Blogger dengan memodifikasi kode CSS. Dalam video di atas, saya telah menjelaskan bagaimana Anda bisa melakukannya.

Baca Juga : Penjawab Otomatis Terbaik untuk Pemasaran Afiliasi

Saya harap setelah mengikuti tutorial ini, Anda telah berhasil menambahkan formulir pendaftaran Mailchimp ke situs web Blogger Anda. Jika Anda masih memiliki keraguan, jangan ragu untuk bertanya kepada saya di bagian komentar.

Anda dapat mengatur lebih lanjut otomatisasi di Mailchimp, jadi setiap kali pelanggan pengguna baru bergabung dengan daftar email Anda, pesan selamat datang akan dikirim secara otomatis ke alamat email mereka. Anda juga dapat mengotomatiskan email yang akan dikirim secara otomatis setelah interval tertentu seperti hari atau minggu.

Jika Anda ingin saya membuat tutorial tentang ini, beri tahu saya di bagian komentar.

Untuk pembaruan menarik lainnya, bergabunglah dengan buletin Mingguan kami di bawah ini. Terima kasih.

Jadilah yang Pertama Mendapatkan Pembaruan

Bergabunglah dengan Newsletter mingguan kami untuk mendapatkan Berita SEO terbaru, tren pemasaran, tips dan trik Blogging eksklusif, langsung ke kotak surat Anda.

Kirim