Cara Membuat Kotak Subscribe Blogger Modern dan Responsive
Kotak subscribe merupakan salah satu elemen yang cukup berguna pada sebuah blog karena memberikan jalan bagi pembaca yang tertarik dengan konten kita untuk kembali mengikuti artikel berikutnya. Bentuknya bisa berupa langganan melalui email, RSS Feed, layanan pembaca feed, maupun sistem notifikasi dari layanan pihak ketiga.
Pada Blogger, konsep subscribe sebenarnya sedikit berbeda dibandingkan website yang memiliki server dan database sendiri. Blogger menyediakan feed artikel secara otomatis, tetapi pengelolaan alamat email pelanggan membutuhkan layanan tambahan jika kita ingin mengirimkan notifikasi artikel baru melalui email.
Kode subscribe Blogger lama yang menggunakan FeedBurner Email Subscription sudah tidak digunakan lagi karena fitur pengiriman email FeedBurner telah dihentikan Google. Kita akan menggunakan pendekatan yang lebih relevan dengan RSS Blogger dan layanan subscribe eksternal.
Apa Itu Subscribe pada Blogger?
Subscribe secara sederhana berarti memberikan pilihan kepada pembaca untuk mengikuti pembaruan sebuah website. Saat artikel baru diterbitkan, pengguna dapat mengetahui adanya konten baru tanpa harus membuka blog secara manual setiap hari.
Pada Blogger terdapat beberapa metode yang dapat digunakan. Salah satu yang paling sederhana adalah RSS Feed karena feed sudah dibuat secara otomatis oleh Blogger ketika sebuah blog aktif dan mengizinkan feed situs.
Pembaca mengikuti artikel menggunakan aplikasi atau layanan RSS Reader.
Pembaca mendapatkan informasi artikel baru melalui layanan email subscription.
Pembaca dapat mengikuti blog melalui layanan pihak ketiga atau ekosistem Blogger.
Layanan tertentu juga dapat menyediakan kanal pemberitahuan selain email.
Bagaimana dengan FeedBurner?
Jika Anda pernah mengikuti tutorial Blogger lama, kemungkinan besar Anda pernah menemukan form dengan alamat feedburner.google.com/fb/a/mailverify. Form tersebut dahulu digunakan untuk mendaftarkan alamat email pembaca ke FeedBurner.
Masalahnya, Google telah menghentikan fitur Email Subscriptions FeedBurner. Dampaknya, widget Blogger yang dahulu dikenal sebagai FollowByEmail juga berhenti berfungsi untuk mengirimkan artikel melalui email.
Jika menemukan kode dengan URL feedburner.google.com/fb/a/mailverify, sebaiknya jangan digunakan sebagai sistem email subscription baru karena layanan tersebut sudah tidak lagi menjalankan fungsi email subscription seperti dahulu.
Feed Blogger sendiri berbeda dengan layanan Email Subscription tersebut. Blogger masih memiliki feed yang dapat digunakan sebagai sumber artikel untuk RSS Reader maupun layanan pihak ketiga.
Informasi resmi mengenai perubahan FeedBurner dapat dilihat pada halaman Google berikut:
Mengenal RSS Feed Blogger
Setiap blog Blogger pada dasarnya memiliki feed artikel. Feed ini berisi informasi mengenai posting terbaru dan dapat dibaca oleh aplikasi RSS Reader maupun digunakan sebagai sumber data oleh layanan tertentu.
Salah satu format feed Blogger yang umum digunakan adalah:
https://NAMABLOG.blogspot.com/feeds/posts/default?alt=rss
Jika sudah menggunakan custom domain, Anda juga dapat menggunakan alamat domain blog sendiri.
https://www.domainanda.com/feeds/posts/default?alt=rss
Untuk widget yang dipasang langsung di blog, kita bahkan dapat menggunakan URL relatif seperti berikut sehingga kode tidak perlu mengetahui alamat domain pengguna.
/feeds/posts/default?alt=rss
Bagaimana Membuat Subscribe Email Sekarang?
Karena Blogger tidak lagi menyediakan FollowByEmail seperti dahulu, pengiriman artikel melalui email dapat menggunakan layanan newsletter atau feed subscription pihak ketiga.
Salah satu layanan yang dapat digunakan adalah follow.it. Layanan ini dapat membaca RSS Feed website kemudian menyediakan sistem follow sehingga pembaca dapat mengikuti pembaruan konten.
Anda menerbitkan artikel baru di Blogger.
Blogger memperbarui feed artikel.
Layanan membaca pembaruan dari feed.
Pembaca menerima pembaruan sesuai layanan yang dipilih.
Cara Menghubungkan Blogger dengan follow.it
Proses dasarnya tidak terlalu rumit. Blog tetap menggunakan RSS Blogger sebagai sumber konten, sedangkan follow.it bertugas mengelola sistem pengikut dan distribusi pembaruannya.
Kunjungi website follow.it kemudian buat akun publisher.
Masukkan URL blog atau alamat RSS Feed Blogger Anda.
Ikuti proses yang diberikan sampai blog berhasil terhubung dengan layanan tersebut.
Jika diminta, lakukan verifikasi kepemilikan blog menggunakan metode yang disediakan follow.it.
Setelah feed aktif, Anda akan memiliki alamat follow yang nantinya dapat dipasang pada tombol subscribe.
Dengan metode ini desain kotak subscribe tetap dapat kita buat sendiri. Hanya proses pendaftaran dan pengiriman notifikasi yang diserahkan kepada penyedia layanan subscription.
Live Preview Kotak Subscribe Blogger
Berikut contoh desain subscribe yang akan kita buat. Widget dibuat responsive sehingga dapat ditempatkan pada sidebar maupun bagian artikel.
Tampilan tersebut sengaja tidak menggunakan input email palsu. Saat tombol Subscribe ditekan, pengguna akan diarahkan ke halaman subscription milik feed yang sudah kita buat.
Metode seperti ini lebih aman daripada membuat input email sendiri tetapi sebenarnya tidak mempunyai sistem backend untuk menyimpan dan memproses alamat email tersebut.
Cara Memasang Kotak Subscribe di Blogger
Setelah akun subscription selesai disiapkan, pemasangan widget dapat dilakukan langsung melalui menu Tata Letak Blogger.
Masuk ke dashboard Blogger.
Buka menu Layout / Tata Letak.
Tambahkan gadget baru pada area yang diinginkan.
Pilih gadget HTML/JavaScript.
Masukkan kode widget yang tersedia di bawah.
Simpan kemudian lihat hasilnya pada blog.
Kode Kotak Subscribe Blogger
Salin kode berikut kemudian pasang pada gadget HTML/JavaScript Blogger.
<div class="cfSubscribeWidget">
<div class="cfSWGlow"></div>
<div class="cfSWIcon">
<i class="fa fa-paper-plane"></i>
</div>
<div class="cfSWLabel">
STAY CONNECTED
</div>
<div class="cfSWTitle">
Jangan Lewatkan Artikel Terbaru
</div>
<div class="cfSWDesc">
Ikuti update blog dan dapatkan informasi ketika artikel baru diterbitkan.
</div>
<div class="cfSWActions">
<a class="cfSWButton cfSWPrimary"
href="https://follow.it/YOUR-FOLLOWIT-FEED"
rel="nofollow noopener"
target="_blank">
<i class="fa fa-envelope"></i>
<span>Subscribe</span>
</a>
<a class="cfSWButton cfSWRss"
href="/feeds/posts/default?alt=rss"
target="_blank">
<i class="fa fa-rss"></i>
<span>RSS Feed</span>
</a>
</div>
<div class="cfSWFoot">
<i class="fa fa-shield"></i>
No spam • Unsubscribe anytime
</div>
</div>
<style>
.cfSubscribeWidget{
--cfSWPrimary:#0083da;
--cfSWDark:#172033;
--cfSWText:#303746;
--cfSWSoft:#eef7fd;
position:relative;
width:100%;
max-width:380px;
margin:0 auto;
padding:30px 22px 22px;
box-sizing:border-box;
overflow:hidden;
text-align:center;
background:#f7fbff;
color:var(--cfSWText);
border:1px solid #dce7f5;
border-radius:18px;
box-shadow:0 12px 35px rgba(25,73,120,.13);
}
.cfSubscribeWidget *{
box-sizing:border-box;
}
.cfSubscribeWidget .cfSWGlow{
position:absolute;
width:180px;
height:180px;
top:-100px;
right:-70px;
border-radius:50%;
background:rgba(0,131,218,.12);
pointer-events:none;
animation:cfSWPulse 4s ease-in-out infinite;
}
.cfSubscribeWidget .cfSWIcon{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
margin:0 auto 13px;
background:linear-gradient(135deg,#0083da,#00a9e8);
color:#fff;
border-radius:18px;
font-size:23px;
transform:rotate(-6deg);
box-shadow:0 9px 20px rgba(0,131,218,.25);
}
.cfSubscribeWidget .cfSWIcon i{
transform:rotate(6deg);
animation:cfSWFly 3s ease-in-out infinite;
}
.cfSubscribeWidget .cfSWLabel{
position:relative;
margin-bottom:7px;
color:#0083da;
font-size:13px;
font-weight:800;
letter-spacing:2px;
}
.cfSubscribeWidget .cfSWTitle{
position:relative;
margin-bottom:9px;
color:#172033;
font-size:20px;
line-height:1.35;
font-weight:800;
}
.cfSubscribeWidget .cfSWDesc{
position:relative;
margin:0 auto 18px;
max-width:300px;
color:#5e6979;
font-size:15px;
line-height:1.65;
}
.cfSubscribeWidget .cfSWActions{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}
.cfSubscribeWidget .cfSWButton{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:43px;
padding:10px 12px;
border-radius:10px;
text-decoration:none!important;
font-size:14px;
font-weight:700;
transition:transform .25s ease,box-shadow .25s ease;
}
.cfSubscribeWidget .cfSWButton:hover{
transform:translateY(-2px);
}
.cfSubscribeWidget .cfSWPrimary{
background:#0083da;
color:#fff!important;
box-shadow:0 7px 16px rgba(0,131,218,.2);
}
.cfSubscribeWidget .cfSWRss{
background:#edf7ff;
color:#006fae!important;
border:1px solid #cce9f8;
}
.cfSubscribeWidget .cfSWFoot{
position:relative;
margin-top:16px;
padding-top:13px;
border-top:1px dashed #dce4ed;
color:#768193;
font-size:13px;
}
.cfSubscribeWidget .cfSWFoot i{
margin-right:4px;
color:#22a06b;
}
@keyframes cfSWPulse{
0%,100%{transform:scale(1);opacity:.7}
50%{transform:scale(1.15);opacity:1}
}
@keyframes cfSWFly{
0%,100%{transform:translate(0,0) rotate(6deg)}
50%{transform:translate(3px,-3px) rotate(6deg)}
}
@media(max-width:350px){
.cfSubscribeWidget{
padding-left:16px;
padding-right:16px;
}
.cfSubscribeWidget .cfSWActions{
grid-template-columns:1fr;
}
}
</style>
Cari tulisan YOUR-FOLLOWIT-FEED kemudian ganti dengan nama atau alamat feed follow.it milik Anda.
Contohnya apabila alamat subscription yang diberikan adalah:
https://follow.it/nama-feed-anda
Maka bagian berikut:
https://follow.it/YOUR-FOLLOWIT-FEED
diubah menjadi:
https://follow.it/nama-feed-anda
Bisa Dipasang di Sidebar?
Bisa. Widget sengaja menggunakan width:100% dengan max-width:380px. Artinya ukuran widget akan mengikuti ruang yang tersedia dan tidak memaksa sidebar menjadi lebih lebar.
Pada layar yang sangat kecil, kedua tombol juga akan otomatis berubah menjadi satu kolom supaya teks dan ikon tidak bertumpuk.
Mengubah Warna Widget
Warna utama widget menggunakan kode #0083da. Jika warna tersebut tidak sesuai dengan template blog, cukup ubah nilai warna pada bagian berikut.
--cfSWPrimary:#0083da;
Walaupun demikian, beberapa elemen menggunakan warna langsung agar tampilan widget tetap konsisten. Jika ingin melakukan perubahan total, cari kode #0083da pada CSS kemudian ganti dengan warna utama template Anda.
Pertanyaan yang Sering Ditanyakan
Fitur Email Subscriptions FeedBurner yang dahulu digunakan pada banyak tutorial Blogger telah dihentikan Google. Karena itu form lama yang mengandalkan layanan mail verification FeedBurner sebaiknya tidak digunakan untuk membuat sistem email subscription baru.
Ya. RSS atau Atom Feed tetap berguna untuk mendistribusikan daftar artikel kepada RSS Reader dan dapat digunakan sebagai sumber data oleh layanan lain yang mendukung feed.
Tidak. Widget ini hanya menjadi tampilan dan pintu masuk menuju layanan subscription. Pengelolaan follower dilakukan oleh layanan yang Anda hubungkan.
Tidak harus. Tombol subscribe pada widget pada dasarnya menggunakan sebuah URL sehingga dapat diarahkan ke layanan newsletter lain selama layanan tersebut menyediakan halaman pendaftaran atau subscription URL.
Ya. Style widget menggunakan class lokal cfSubscribeWidget sehingga pengaruh CSS terhadap elemen template lainnya dibuat seminimal mungkin. Lebarnya juga responsive mengikuti ukuran container tempat widget dipasang.
Tips Supaya Pengunjung Mau Subscribe
Memasang kotak subscribe saja belum tentu langsung menghasilkan banyak follower. Posisi dan alasan yang diberikan kepada pembaca juga mempunyai pengaruh cukup besar.
Sidebar, bagian akhir artikel, atau area setelah konten utama merupakan beberapa lokasi yang dapat dicoba.
Beritahu pembaca manfaat yang mereka dapatkan ketika mengikuti blog.
Popup berlebihan justru dapat mengganggu pembaca ketika sedang menikmati artikel.
Alasan terbesar seseorang mengikuti blog tetap karena mereka merasa konten di dalamnya berguna.
Kotak subscribe pada akhirnya hanyalah sebuah penghubung. Bagian terpenting tetap bagaimana sebuah blog mampu membuat pembaca merasa bahwa artikel berikutnya layak untuk ditunggu.
Dengan memanfaatkan RSS Blogger dan layanan subscription yang masih aktif, kita tidak perlu lagi mempertahankan kode FeedBurner Email lama yang sudah kehilangan fungsi utamanya. Desain kotak subscribe juga tetap bebas dimodifikasi sehingga dapat dibuat menyatu dengan karakter template Blogger yang digunakan.
Ingin membuat widget Blogger dengan desain dan fungsi khusus? CodeFlare menerima pembuatan custom widget, perbaikan template, halaman khusus hingga pengembangan website Blogger.
About CodeFlare
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net