Panduan Cara Praktis Membuat Widget Berlangganan Follow.it Cantik ala BaktiSite di Blogger

Apakah teman teman blogger nyasar di blog ngerapik ini saat sedang mencari cara membuat widget berlangganan mendapatkan artikel terbaru dengan follow.it ?

Berikut ini merupakan cara praktis membuatnya ala blog saya BaktiSite Blogger. Dalam tutorial blogspot ini, kita akan membahas langkah mudah memasang kode script html berlangganan yang tidak hanya SEO friendly tetapi juga memiliki rasio klik (CTR) yang tinggi, semoga.

Sebagai pemilik blog, menjaga agar pengunjung selalu kembali adalah sebuah keharusan. Salah satu cara paling efektif untuk melakukan ini adalah dengan menyediakan fitur berlangganan artikel melalui email. Ketika Feedburner Google resmi menghentikan layanan pengiriman email otomatisnya, banyak blogger kebingungan mencari alternatif terbaik. Di sinilah follow.it hadir sebagai penyelamat dengan fitur yang jauh lebih modern, cepat, dan disukai oleh mesin pencari seperti Google.

Desain widget berlangganan ala BaktiSite tampilannya terlihat simple dan praktis karena minimalis, dan sangat persuasif. Desain yang bersih terbukti secara ilmiah mampu meningkatkan konversi atau CTR hingga dua kali lipat dibanding desain standar yang membosankan. Mari kita bahas secara mendalam bagaimana kita bisa menerapkannya di blog kesayangan kita sekarang juga.

gambar di ambil dari tangkapan layar blog baktisite

Mengapa Memilih Follow.it untuk Blogspot

Sebelum kita masuk ke dalam kode script html, penting untuk memahami mengapa follow.it adalah pilihan terbaik untuk platform blogger saat ini. Platform ini tidak hanya mengirimkan email biasa, tetapi juga memberikan kebebasan kepada pembaca untuk memilih topik yang ingin mereka ikuti dari blog kita. Ini membuat pembaca merasa lebih dihargai dan mengurangi risiko mereka melakukan unsubscribe dan menghilang tanpa jejak.

Dari sisi SEO, follow.it membantu meningkatkan sinyal pengguna yang positif. Ketika pelanggan menerima notifikasi email dan mengkliknya, Google akan mencatat adanya lalu lintas berkualitas tinggi yang kembali ke situs blog kita. Durasi kunjungan yang lama dari pembaca setia ini akan memperkuat otoritas blog kita di halaman hasil pencarian.

Selain itu, integrasi dengan blogger sangat mudah karena hanya membutuhkan penempatan kode script html sederhana. Kita tidak perlu memasang plugin berat yang bisa memperlambat pemuatan halaman blog. Kecepatan loading blog tetap terjaga, yang mana ini merupakan salah satu faktor penting dalam algoritma Google PageSpeed.

Persiapan Sebelum Memasang Kode Script HTML

Langkah pertama yang harus kita lakukan adalah mendaftarkan blog kesayangan kita di situs resmi follow.it. Proses pendaftaran ini sepenuhnya gratis dan hanya membutuhkan waktu kurang dari lima menit. Cukup memasukkan alamat URL feed blog, yang biasanya berformat seperti:

alamatblog.blogspot.com/feeds/posts/default.

Setelah sistem follow.it berhasil mengenali feed blog, kita akan diarahkan ke halaman dasbor. Di sana, kita dapat mengatur preferensi pengiriman email dan melacak statistik pelanggan blog yang masuk. Cari opsi untuk mendapatkan kode formulir berlangganan atau subscription form code.

Sistem akan memberikan kode default, namun kode bawaan tersebut biasanya terlihat sangat standar dan kurang menarik secara estetika blog. Untuk itulah kita akan memodifikasi kode tersebut agar memiliki tampilan premium, responsif, dan elegan seperti template blog saya, BaktiSite. wadauu..

Membuat Desain Widget Berlangganan High CTR

Untuk membuat widget yang menarik perhatian pembaca tanpa mengganggu kenyamanan mereka membaca, kita akan menggunakan kombinasi HTML dan CSS modern. Kode ini dirancang agar sepenuhnya responsif, artinya tampilannya akan tetap rapi baik diakses melalui komputer desktop, tablet, maupun ponsel pintar.

Disini saya akan membagi kode menjadi dua versi, Versi Ai Gemini sepenuhnya dan Versi Modifikasi Saya. langsung saja pengaplikasiannya:

VERSI FULL AI GEMINI

Berikut adalah struktur kode script html berlangganan yang sudah dimodifikasi agar memiliki performa CTR blog menjadi tinggi. Kita hanya perlu menyalin kode ini dan menyesuaikan beberapa bagian penting seperti tautan follow.it milik sendiri.

Kode Full Ai Gemini:

</> Full Ai Gemini

<p><div style="background: #f9f9f9; border: 1px solid #ececec; border-radius: 8px; padding: 25px; text-align: center; font-family: sans-serif;"></p>
<p><h3 style="margin-top: 0; color: #333; font-size: 20px;">Dapatkan Artikel Terbaru Langsung di Inbox Anda</h3></p>
<p><p style="color: #666; font-size: 14px; margin-bottom: 20px;">Bergabunglah dengan ribuan pembaca lainnya dan jangan pernah melewatkan pembaruan tips SEO dan tutorial blogspot gratis dari kami.</p></p>
<p><form action="https://follow.it/subscribe" method="post" target="_blank" style="display: block;"></p>
<p><input type="hidden" name="url" value="https://follow.it/username-blog-anda"/></p>
<p><input type="hidden" name="title" value="BaktiSite"/></p>
<p><input type="email" name="email" required="" placeholder="Masukkan alamat email aktif Anda..." style="width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px;"/></p>
<p><button type="submit" style="width: 100%; background: #007bff; color: white; border: none; padding: 12px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 14px; transition: background 0.3s;">LANGGANAN SEKARANG</button></p>
<p></form></p>
<p><p style="font-size: 11px; color: #999; margin-top: 15px;">Kami menghargai privasi Anda. Layanan ini sepenuhnya gratis dan Anda dapat berhenti berlangganan kapan saja dengan sekali klik.</p></p>
<p></div></p>

Pastikan mengganti teks username-blog-anda dengan nama unik yang kita dapatkan dari akun follow.it. Hal ini sangat krusial agar data email pelanggan masuk dengan benar ke database akun email kita.

VERSI FULL MODIFIKASI SAYA

Berikut adalah struktur kode script html berlangganan yang sudah dimodifikasi agar memiliki performa CTR tinggi unutk blog. Teman teman hanya perlu menyalin kode ini dan menyesuaikan beberapa bagian penting seperti tautan follow.it milik sendiri.

Kode Modifikasi Saya:

</> Bagian 1

<div class="widget-content">
  <div id="jagoanSubscribe">
    
    
    <div class="email__">
      <div class="email">
        <h4 class="sub-title">Dapatkan artikel terbaru:</h4>
        
        <div class="follow-info-box">
          Gabung Follow.it? <a href="https://follow.it/s/sh85" target="_blank" rel="nofollow noopener">Klik di sini</a>
        </div>
        
        <form action="https://follow.it" method="post" target="_blank" class="sub-form">
          <input type="hidden" name="url" value="https://follow.it/bakti-site-blogger?pub"/>
          <input type="hidden" name="rss" value="https://baktisite.blogspot.com"/>
          
                    <div class="input-group">
            <input type="email" name="email" id="email-input-field" class="email-input" placeholder="Masukkan alamat email Anda..." required="required" />
            
            <span class="sub-button" onclick="document.getElementById('email-input-field').form.submit();" title="Kirim" style="background: #7c0000 !important; width: 50px !important; height: 36px !important; border-radius: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; transition: all 0.2s ease !important;">
              
              <svg viewBox="0 0 24 24" style="width: 16px !important; height: 16px !important; fill: #ffffff !important; display: inline-block !important;"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path></svg>
            </span>
          </div>
        </form>
      </div>
    </div>

<div class="medsos">
      
    
  <a class="blogspot" title="Blogger" href="https://www.blogger.com/follow-blog.g?blogID=7677976685399926665" rel="nofollow noopener" target="_blank" style="background: #f57c00 !important; box-shadow: 0 0 10px rgba(245, 124, 0, 0.2) !important;">
    <svg viewBox="0 0 24 24" style="width: 20px !important; height: 20px !important; fill: #ffffff !important; display: inline-block !important;">
      
      <path d="M4 3h9.5c2.48 0 4.5 2.02 4.5 4.5 0 1.62-1 3-2.33 3.75C17 12 18 13.38 18 15c0 2.48-2.02 4.5-4.5 4.5H4V3zm4 3.5v3h5a1.5 1.5 0 0 0 0-3H8zm0 6.5v3.5h5.5a1.75 1.75 0 0 0 0-3.5H8z" style="fill: #ffffff !important;"/>
    </svg>
  </a>

<a class="facebook" title="Facebook" href="https://facebook.com/aulia.tiloeagusta" rel="nofollow noopener" target="_blank">
    <svg viewBox="0 0 24 24"><path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg>
  </a>

<a class="twitter" title="X" href="https://x.com/agustaaulia" rel="nofollow noopener" target="_blank" style="background: #000000 !important;">
    <svg viewBox="0 0 24 24" style="width: 18px !important; height: 18px !important; fill: #ffffff !important; display: inline-block !important;">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" style="fill: #ffffff !important;"></path>
    </svg>
  </a>

<a class="youtube" title="Youtube" href="https://youtube.com" rel="nofollow noopener" target="_blank">
    <svg viewBox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg>
  </a>

<a class="instagram" title="Instagram" href="https://instagram.com/auliatiloe" rel="nofollow noopener" target="_blank" style="background: #ff69b4 !important;">
    <svg viewBox="0 0 24 24" style="width: 18px !important; height: 18px !important; fill: #ffffff !important; display: inline-block !important;">
      <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" style="fill: #ffffff !important;"></path>
    </svg>
  </a>

</div>
</div>
<a href="https://follow.it/s/sh85" class="powered-by-line">Powered by <img src="https://follow.it/images/colored-logo.svg" alt="follow.it" height="15px"/></a>

<style type='text/css'>
/*<![CDATA[*/
#jagoanSubscribe {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 100%;
  box-sizing: border-box;
}

.sub-title {
  margin: 0 0 6px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.follow-info-box {
  font-size: 12px;
  margin-bottom: 18px;
  color: #64748b;
}

.follow-info-box a {
  color: #7c0000; /* Maroon khas senada */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.follow-info-box a:hover {
  text-decoration: underline;
  color: #b91c1c;
}

/* Input Group Desain Melayang */
.input-group {
  display: flex;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-group:focus-within {
  border-color: #7c0000; /* Fokus Maroon */
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(124, 0, 0, 0.15);
}

.email-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #334155;
  outline: none;
  width: 100%;
}

.email-input::placeholder {
  color: #94a3b8;
}

/* Tombol Kirim Bundar Premium */
.sub-button {
  background: #7c0000; /* Warna dasar Maroon */
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sub-button svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
  transition: transform 0.3s ease;
}

.sub-button:hover {
  background: #991b1b;
  transform: scale(1.03);
}

.sub-button:hover svg {
  transform: translate(2px, -2px) scale(0.9); /* Efek pesawat mau terbang */
}

/* Penataan Baris Media Sosial */
.medsos__ {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #e2e8f0;
}

.medsos {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Tombol Ikon Sosial Minimalis Ringan */
.medsos a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  background: #f1f5f9;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.medsos a svg {
  width: 20px;
  height: 20px;
  transition: fill 0.3s ease;
}

/* Warna Hover Otentik Masing-Masing Sosmed */
.medsos a.blogspot svg { fill: #f57c00; }
.medsos a.facebook svg { fill: #1877f2; }
.medsos a.twitter svg { fill: #0f1419; }
.medsos a.youtube svg { fill: #ff0000; }
.medsos a.instagram svg { fill: #e1306c; }

/* Efek Hover Mewah Ganti Latar Belakang */
.medsos a:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.medsos a.blogspot:hover { background: #fff3e0; }
.medsos a.facebook:hover { background: #e7f3ff; }
.medsos a.twitter:hover { background: #f1f1f1; }
.medsos a.youtube:hover { background: #ffebee; }
.medsos a.instagram:hover { background: #fce4ec; }

/* Garis Kredit Bawah */
.powered-by-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: #94a3b8;
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.2s;
}
.powered-by-line:hover {
  color: #64748b;
}

/* Responsif Mobile Sempurna */
@media (max-width: 480px) {
  #jagoanSubscribe { padding: 16px; }
  .medsos { gap: 6px; }
  .medsos a { height: 36px; }
  .medsos a svg { width: 18px; height: 18px; }
}
/*]]>*/
</style>

Pastikan teman teman, mengganti teks username-blog-anda dengan nama unik yang diapatkan dari akun follow.it. Hal ini sangat krusial agar data email pelanggan masuk dengan benar ke database akun email kita. Dan selanjutnya mengganti URL Bagian Media Sosial sesuai dengan Media Sosial teman teman blogger.

Langkah Memasang Widget di Layout Blogger

Setelah menyalin kode di atas, kini saatnya memasangnya ke dalam tata letak Blogger kesayangan kita. Langkahnya sangat sederhana dan tidak memerlukan keahlian coding yang rumit.

Pertama, masuk ke dasbor Blogger terlebih dahulu menggunakan akun Google yang terdaftar. Setelah masuk, pilih menu Tata Letak atau Layout yang berada di bilah menu sebelah kanan.
Kedua, cari bagian Sidebar atau Footer tempat teman teman ingin menampilkan widget berlangganan ini. Klik tombol Tambahkan Gadget atau Add a Gadget pada area yang dipilih.
Ketiga, sebuah jendela pop-up akan muncul menampilkan berbagai pilihan widget. Cari dan pilih opsi HTML/JavaScript dari daftar tersebut.
Keempat, biarkan kolom judul kosong jika ingin tampilan yang lebih bersih, atau isi dengan judul menarik seperti Berlangganan Gratis. Kemudian, tempelkan kode script html yang sudah kita persiapkan tadi ke dalam kolom konten.
Kelima, klik tombol Simpan untuk menerapkan perubahan. Jangan lupa untuk menekan ikon simpan utama di pojok kanan bawah halaman Tata Letak Blogger kita untuk memastikan semua perubahan tersimpan secara permanen di sistem.

Strategi Meningkatkan CTR Widget Berlangganan

Memiliki widget berlangganan yang indah barulah langkah awal. Agar widget tersebut menghasilkan banyak konversi, kita harus menerapkan strategi psikologi tulisan atau copywriting yang tepat.

Hindari menggunakan kata-kata standar seperti Kirim atau Submit pada tombol tindakan. Gunakan kata kerja yang berorientasi pada nilai atau manfaat bagi pembaca, seperti Dapatkan Tips Gratis atau Gabung Sekarang. Kata-kata ini secara psikologis memicu keinginan pembaca untuk bertindak dengan cepat. kalau gak ada yanhh gunakan saja kata yang sesuai, basinglah, sesuka hati.

Posisikan widget ini di tempat yang strategis. Area sidebar kanan atas adalah lokasi paling populer karena langsung terlihat saat halaman dimuat. Selain itu, menempatkan widget ini di akhir setiap artikel juga sangat efektif, karena pembaca yang baru saja menyelesaikan membaca artikel berkualitas cenderung sangat tertarik untuk mendapatkan artikel serupa di masa mendatang.

Kita juga dapat menyesuaikan warna latar belakang dan tombol agar selaras dengan tema blog kita. Pastikan warna tombol berlangganan kontras dengan warna latar belakang blog agar langsung menarik perhatian mata pembaca saat mereka melakukan scrolling.

Manfaat Jangka Panjang Memiliki Daftar Pelanggan Email

Banyak blogger pemula mengabaikan pentingnya mengumpulkan daftar email karena terlalu fokus pada pencarian trafik instan dari media sosial. Padahal, algoritma media sosial dan mesin pencari bisa berubah sewaktu-waktu dan berisiko menurunkan trafik blog secara drastis dalam semalam. Apalagi kontent artikel yang kita sajikan semua dari Ai,, waahh parahh!

Dengan memiliki daftar pelanggan aktif melalui follow.it, kita memiliki kendali penuh atas audiens. Kapan pun kita menerbitkan artikel baru yang penting, kita secara otomatis dapat langsung mengabarkannya kepada ratusan atau ribuan orang yang benar-benar peduli dengan konten yang kita buat.

Lalu lintas dari pelanggan email juga memiliki rasio pentalan atau bounce rate yang sangat rendah. Mereka cenderung membaca artikel menjadi lebih lama, meninggalkan komentar, dan membagikan tulisan blog kita ke jejaring sosial mereka secara sukarela. Ini adalah sinyal SEO yang sangat kuat di mata Google.

Pertanyaan yang Sering Diajukan Mengenai Widget Follow.it

Apakah layanan berlangganan platform follow.it ini sepenuhnya gratis untuk digunakan selamanya?

Ya, follow.it menawarkan paket gratis yang sudah sangat mumpuni untuk blogger pemula hingga tingkat menengah dengan fitur pengiriman email otomatis tanpa batas.

Apakah widget ini akan memperlambat loading blog Blogger saya?

Tidak, kode script html yang kita gunakan sangat ringan karena tidak memanggil pustaka javascript eksternal yang berat. Widget ini murni menggunakan HTML dan CSS bawaan browser yang sangat cepat dimuat.

Bisakah saya memindahkan pelanggan lama saya dari Feedburner ke follow.it?

Tentu saja bisa. Follow.it menyediakan fitur impor kontak yang sangat mudah. Kita hanya perlu mengunduh file CSV berisi daftar pelanggan dari Feedburner lama kita, lalu mengunggahnya ke dasbor follow.it.

Apakah widget ini aman dari serangan spammer?

Ya, sistem follow.it sudah dilengkapi dengan sistem verifikasi email ganda atau double opt-in. Setiap pelanggan baru harus mengonfirmasi tautan yang dikirim ke email mereka sebelum mereka resmi masuk ke dalam daftar pengiriman artikel terbaru kita.

Kesimpulan Penting untuk Blogger

Memasang widget berlangganan mendapatkan artikel terbaru dengan follow.it ala Blog BaktiSite adalah investasi terbaik yang bisa kita lakukan untuk masa depan blog kesayangan kita. Dengan tampilan yang profesional dan posisi penempatan yang tepat, kita dapat meningkatkan interaksi pembaca dan performa SEO secara bersamaan.

Mulailah menerapkan tutorial blogspot ini sekarang juga untuk membangun aset digital berupa daftar pembaca setia yang siap mendukung kesuksesan blog kita di masa kini dan masa depan. Selamat mencoba dan semoga blog teman teman semakin ramai dikunjungi! Akhir kata, saya ucapkan Salam Ngerapik Blog

Meta Hastags: #TutorialBlogger #Blogspot #FollowIt #WidgetBerlangganan #SEO #TipsBlogger #HTMLScript #NgerapikBlog #BaktiSite