Sebelum masuk ke tutorial cara pembuatan widget popup berlangganan email, ada baiknya kita bahas terlebih dahulu fungsi dan jenis widget subscibe by email satu persatu.
FUNGSI WIDGET BERLANGGANAN
- Bagi Pemilik Blog 👦
Untuk memberitahu pengunjung melalui email otomatis setiap kali ada update artikel terbaru. Dengan kata lain pengunjung yang sudah berlangganan, akan di recall (dipanggil kembali) untuk berkunjung melihat artikel terupdate. - Bagi Pengunjung 👫
Berfungsi untuk mengefisienkan waktu berkunjung. Jadi mereka tidak perlu khawatir ketinggalan update terbaru. Tidak membuat mereka menunggu dan bertanya-tanya apakah artikel yang mereka inginkan sudah di post atau belum.
Tanpa widget berlangganan via email, mungkin pengunjung harus cek blog secara berkala untuk memastikan artikel yang baru rilis, hal ini berdampak negatif jika kita jarang update artikel. Lambat laut, mereka akan bosan atau capek sendiri karena merasa menunggu terlalu lama.
Sementara jika pakai widget berlangganan, mereka bisa bersantai, karena kalau ada update pasti ada notifikasi masuk dari email.
JENIS WIDGET BERLANGGAN
- Widget Statis 😐
Widget berlangganan jenis Statis biasanya diletakkan di bawah artikel atau di bagian sidebar kiri atau sidebar kanan artikel. Widget subscribe seperti ini langsung kelihatan tanpa perlu menekan tombol apapun. Tampilannya juga sederhana dan terlalu biasa.
- Widget Popup 😍
Widget berlangganan versi Popup biasanya lebih terlihat profesional dan rapi, karena tidak mengganggu pemandangan serta lebih modern. Widget ini biasanya menyediakan tombol pemanggil yang ketika ditekan akan muncul jendela baru.
WIDGET BERLANGGANAN TERBAIK
Menurut Saifullah.id, widget terbaik jatuh kepada Widget Berlangganan Popup. Sebab widget Popup dapat dilihat di semua layar, baik atas maupun bawah. Sehingga pengunjung lebih mudah mengaksesnya.
Selain itu tampilannya juga lebih keren karena dilengkapi tombol sosial media (Facebook, Twitter, Youtube, Instagram, dan Pinterest). Sehingga, selain bisa berlangganan via Email, pengunjung juga bisa follow sosial media kita.
Berbeda dengan Widget Berlangganan Statis, kita baru bisa menemukannya setelah di scroll ke bawah. Jadi, bagi pengunjung baru yang tidak familiar dengan blog kita harus mencari kotak berlangganannya terlebih dahulu ke bawah.
CARA MEMBUAT WIDGET BERLANGGANAN POPUP
Perlu diketahui bahwa widget berlangganan ini tampilannya sama persis dengan widget Igniel. Namun bedanya, Igniel hanya membuat versi Statisnya saja.
Sehingga saya berinisiatif menggabungkan widget dari Igniel dengan kode Live Chat Box yang pernah saya posting pada artikel : Cara Memasang Live Chat Box Messenger Facebook Pada Blogger agar menghasilkan widget berlangganan ala Popup versi Saifullah.id + tombol tersembunyi untuk Follow blog biar makin kece.
Langkah Pemasangan Widget
- Buka Dashboard Blogger
- Pilih menu Tata Letak (Layout)
- Klik Tambahkan Gadget (Add Gadget)
- Lalu pilih HTML/JavaScript
- Salin kode berikut, lalu tempel ke dalam kolom Konten<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button{position:fixed;left:10px;cursor:pointer}.ctrlq.fb-close{position:fixed;left:290px;cursor:pointer}.ctrlq.fb-button{z-index:99999;background:url(z-index:99999;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z' fill='%23fff'/%3E%3C/svg%3E");content:'' no-repeat #0084ff;width:35px;height:35px;text-align:center;bottom:10px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:100%;transition:all .2s ease-in-out}.ctrlq.fb-button:focus,.ctrlq.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:300px;height:240px;overflow:visible;opacity:0;bottom:0;left:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;}.ctrlq.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;right:0;background:rgba(0,0,0,.05);display:none}.ctrlq.fb-close{z-index:4;padding:0 10px;background: #e53434;font-weight:700;font-size:12px;color:#fff;margin:8px 24px 0 0;border-radius:3px}.ctrlq.fb-close::after{content:' X ';font-family:sans-serif}#abt-scroll{position:fixed;z-index:9999;bottom:10px;left:10px}#abt-scroll a{display:block;float:left;width:25px;height:25px;text-indent:-999em; padding: 3px}#abt-scroll a.follow{border:double 3px #fff;background-color:#3498DB;border-radius:50px;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M17,16V15L16,14V11.39C16,10.3 15.73,9.34 15.21,8.53C14.7,7.72 13.96,7.21 13,7V6.5A1,1 0 0,0 12,5.5A1,1 0 0,0 11,6.5V7C10.04,7.21 9.3,7.72 8.79,8.53C8.27,9.34 8,10.3 8,11.39V14L7,15V16H17M13.5,17H10.5A1.5,1.5 0 0,0 12,18.5A1.5,1.5 0 0,0 13.5,17Z' fill='%23fff'/%3E%3C/svg%3E");content:'' no-repeat}#abt-scroll a:hover{background-color:#333333;border-radius:50px}#SaifulSubscribe {width:300px; height:240px; background-color:#eee; border:1px solid #555; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}#SaifulSubscribe .email__ {padding:15px 15px 5px;}#SaifulSubscribe .email {margin:auto; color:#555; text-align:center;}#SaifulSubscribe .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:SaifulRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:SaifulRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:SaifulRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23ff0000'/%3E%3C/svg%3E") center center / 50px no-repeat;}#SaifulSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}#SaifulSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}#SaifulSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}#SaifulSubscribe input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}#SaifulSubscribe button {background-color:#bababa; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}#SaifulSubscribe button:hover, #SaifulSubscribe button:focus {background-color:var(--color-hover);}#SaifulSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23555'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}#SaifulSubscribe .medsos {width:100%; text-align:center;}#SaifulSubscribe .medsos svg {width:20px;height:20px;margin-top:7px}#SaifulSubscribe .medsos svg path {fill:#fff}#SaifulSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}#SaifulSubscribe .medsos a:last-child {margin-right:0px;}#SaifulSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}#SaifulSubscribe .medsos .facebook{background:#3a579a}#SaifulSubscribe .medsos .twitter {background:#00abf0}#SaifulSubscribe .medsos .googleplus {background:#df4a32}#SaifulSubscribe .medsos .youtube {background:#cc181e}#SaifulSubscribe .medsos .instagram {background:#992ebc}#SaifulSubscribe .medsos .pinterest {background:#e60023}@-webkit-keyframes SaifulRing{0% { -webkit-transform: rotateZ(0); }1% { -webkit-transform: rotateZ(30deg); }3% { -webkit-transform: rotateZ(-28deg); }5% { -webkit-transform: rotateZ(34deg); }7% { -webkit-transform: rotateZ(-32deg); }9% { -webkit-transform: rotateZ(30deg); }11% { -webkit-transform: rotateZ(-28deg); }13% { -webkit-transform: rotateZ(26deg); }15% { -webkit-transform: rotateZ(-24deg); }17% { -webkit-transform: rotateZ(22deg); }19% { -webkit-transform: rotateZ(-20deg); }21% { -webkit-transform: rotateZ(18deg); }23% { -webkit-transform: rotateZ(-16deg); }25% { -webkit-transform: rotateZ(14deg); }27% { -webkit-transform: rotateZ(-12deg); }29% { -webkit-transform: rotateZ(10deg); }31% { -webkit-transform: rotateZ(-8deg); }33% { -webkit-transform: rotateZ(6deg); }35% { -webkit-transform: rotateZ(-4deg); }37% { -webkit-transform: rotateZ(2deg); }39% { -webkit-transform: rotateZ(-1deg); }41% { -webkit-transform: rotateZ(1deg); }43% { -webkit-transform: rotateZ(0); }100% { -webkit-transform: rotateZ(0); }}@-moz-keyframes SaifulRing{0% { -moz-transform: rotate(0); }1% { -moz-transform: rotate(30deg); }3% { -moz-transform: rotate(-28deg); }5% { -moz-transform: rotate(34deg); }7% { -moz-transform: rotate(-32deg); }9% { -moz-transform: rotate(30deg); }11% { -moz-transform: rotate(-28deg); }13% { -moz-transform: rotate(26deg); }15% { -moz-transform: rotate(-24deg); }17% { -moz-transform: rotate(22deg); }19% { -moz-transform: rotate(-20deg); }21% { -moz-transform: rotate(18deg); }23% { -moz-transform: rotate(-16deg); }25% { -moz-transform: rotate(14deg); }27% { -moz-transform: rotate(-12deg); }29% { -moz-transform: rotate(10deg); }31% { -moz-transform: rotate(-8deg); }33% { -moz-transform: rotate(6deg); }35% { -moz-transform: rotate(-4deg); }37% { -moz-transform: rotate(2deg); }39% { -moz-transform: rotate(-1deg); }41% { -moz-transform: rotate(1deg); }43% { -moz-transform: rotate(0); }100% { -moz-transform: rotate(0); }}@keyframes SaifulRing{0% { transform: rotate(0); }1% { transform: rotate(30deg); }3% { transform: rotate(-28deg); }5% { transform: rotate(34deg); }7% { transform: rotate(-32deg); }9% { transform: rotate(30deg); }11% { transform: rotate(-28deg); }13% { transform: rotate(26deg); }15% { transform: rotate(-24deg); }17% { transform: rotate(22deg); }19% { transform: rotate(-20deg); }21% { transform: rotate(18deg); }23% { transform: rotate(-16deg); }25% { transform: rotate(14deg); }27% { transform: rotate(-12deg); }29% { transform: rotate(10deg); }31% { transform: rotate(-8deg); }33% { transform: rotate(6deg); }35% { transform: rotate(-4deg); }37% { transform: rotate(2deg); }39% { transform: rotate(-1deg); }41% { transform: rotate(1deg); }43% { transform: rotate(0); }100% { transform: rotate(0); }</style><div class="fb-livechat"><div class="ctrlq fb-overlay"></div><div class="fb-widget"><div class="ctrlq fb-close"></div><div id="SaifulSubscribe"><div class="email__"><div class="email">Dapatkan artikel terbaru setiap hari<form action="https://feedburner.google.com/fb/a/mailverify?uri=saifullahtv" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=saifullahtv', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="email" class="email" placeholder="Contoh: nama@gmail.com"/><input name="uri" type="hidden" value="saifullahtv" /> <input name="loc" type="hidden" value="en_US" /><button type="submit"></button></form></div></div><div class="medsos__"><div class="medsos"><a class="facebook" title="Facebook" href="https://www.facebook.com/www.saifullah.id" 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="Twitter" href="https://www.twitter.com/tvsaifullah" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a><a class="youtube" title="Youtube" href="https://www.youtube.com/c/SaifullahTV" 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://www.instagram.com/saifullahtv" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><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"></path></svg></a><a class="pinterest" title="Pinterest" href="https://www.pinterest.com/saifullahtv" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a></div></div></div></div></div><div id="fb-root"></div><a href="#" title="Dapatkan Artikel Terbaru Gratis" class="ctrlq fb-button"></a><script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},0*t.delay),$(".ctrlq").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},0*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"50px",opacity:1},0*t.delay),t.overlay.fadeIn(t.delay)})})});</script><div id='abt-scroll'><a class='follow' href='https://www.blogger.com/follow-blog.g?blogID=4443779115521399613' rel='nofollow' title='Follow'>Follow</a></div>
- Ganti tulisan yang saya highlight warna merah sesuai keinginan kamu. Tulisan ini untuk mengganti tulisan yang ada di sini
- Ganti tulisan yang di highlight warna kuning dengan id Feedburner kamu. Ada 3 buah ya yang harus diganti
- Ganti tulisan yang di highlight warna hijau dengan username sosial media kamu. Fungsinya agar tombol sosmed (Facebook, Twitter, YouTube, Instagtam, dan Pinterest) mengarah ke akunmu.
- Ganti tulisan yang di highlight warna biru sesuai keinginan. Fungsinya untuk memunculkan tulisan seperti gambar di bawah ketika cursor / mouse di arahkan ke gambar lonceng.
- Simpan dan lihat hasilnya.
Widget ini tidak memperberat kecepatan blog, karena semua logo / icon / gambarnya menggunakan icon SVG.
Demikian Cara Membuat Widget Belangganan Email Popup Disertai Tombol Sosmed yang bisa saya sampaikan.
Semoga bisa menambah loyalitas pengunjung kalian dalam membaca artikel kalian. Sehingga Pageview blog meningkat ke arah yang lebih baik lagi.
