Cara Memasang Subscribe Box di Blog - Kali ini, saya akan berbagi tutorial kembali tentang cara membuat dan memasang subscribe box di blog. Bagi yang belum tahu, fitur ini berguna untuk menampilkan kotak berlangganan secara melayang.
Ada banyak keuntungan menggunakan subscribe box, salah satunya yaitu lebih mudah dalam menginformasikan postingan terbaru. Setelah berlangganan, pelanggan akan mendapatkan notifikasi di email mereka secara realtime.
Sebelumnya, Blogger menyediakan layanan berlangganan dengan menggunakan FeedBurner. Namun dikarenakan FeedBurner yang berhenti beroperasi, layanan ini otomatis juga tidak tersedia.
Oleh karena itu, diperlukan alternatif lain agar audiens tetap terjangkau. Adapun layanan email marketing yang digunakan untuk subscribe box kali ini adalah FollowIt. Silahkan melakukan pendaftaran terlebih dahulu jika belum memiliki akun.
Cara Memasang Subscribe Box di Blog
- Masuk ke BLOGGER
- Pilih menu TEMA
- Pilih EDIT HTML
- Tempel di atas </body>:
- Tempel di atas ]]></b:skin>:
- Pilih SIMPAN
- Setelah disimpan, pilih menu POSTINGAN dan tentukan tulisan yang akan diberikan tombol subscribe box. Gunakan skrip berikut:
- Selesai.
<div class="followContainer" id="followEmailId">
<div class="FollowByEmail">
<div class="followInner">
<label class="followText" for="email-input">
<span><b>SUBSCRIBE</b></span>
<br/>
<span class="titleInfo">Get notifications directly in your email</span>
</label>
<form action="https://api.follow.it/subscription-form/RzZKemdoU1J0R0xsU0JrTWQ1UkFhVnErejNEWEsrRTFqYVphcEdORG0zb25JMDVxTm5SYkhpamtKR3R4UithWFlWRWVDRUtZOHhpbHlrV0czQXg3b3NVdmEzU1NYZ3BoTTkzdGFlMDlJVHB5QWowSFB4SlJVTlFUM1RtTXVWaFB8NXdXOUR6S0NBTG1tdjJBVlkrQTV3WStpbWl1QU91MWNQcjFITlYrbVRvRT0=/8" method="post" target="_blank">
<input autocomplete="on" class="follow-address" id="email-input" name="email" placeholder="Your email here..." type="email"/>
<input class="followSubmit" id="emailSubmit" type="submit" value="Continue"/>
<div class="followAlternative">
Or <a href="https://www.blogger.com/follow.g?blogID=335298076286807963" target="_blank">subscribe via Blogger</a>
</div>
<label class="followLabel" for="emailSubmit"><svg viewBox="0 0 24 24"><path class="c-2" d="M105.28537,261.7035v6a5.00181,5.00181,0,0,1-5,5h-10a4.99541,4.99541,0,0,1-5-5v-6a4.99541,4.99541,0,0,1,5-5h10A5.00181,5.00181,0,0,1,105.28537,261.7035Z" transform="translate(-83.28537 -252.7035)"/><path class="c-1" d="M100.85128,262.43132l-1.02.79a7.418,7.418,0,0,1-9.05,0l-1.08-.83a.76187.76187,0,0,1-.13995-1.06.74707.74707,0,0,1,1.05-.13l1.08.83a5.91258,5.91258,0,0,0,7.22,0l1.03-.79a.73992.73992,0,0,1,1.05.14A.751.751,0,0,1,100.85128,262.43132Z" transform="translate(-83.28537 -252.7035)"/></svg></label>
<input name="uri" type="hidden" value=""/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
</div>
<div class="followClose">x</div>
</div>
<script>
function followEmailVariable(){var x=document.getElementById("followEmailId");if(x.style.display==="none"||x.style.display===""){x.style.display="block"}else{x.style.display="none"}}var closeButton=document.getElementsByClassName("followClose");var i;for(i=0;i<closeButton.length;i++){closeButton[i].addEventListener("click",function(){this.parentElement.style.display="none"})}
</script>/* Subscribe Box by www.ferisp.com */
.followContainer{position:fixed;display:none;width:100%;height:100%;background:rgba(0,0,0,.5);font-family:"Noto Sans",sans-serif;top:0;left:0;right:0;bottom:0;z-index:999}
.FollowByEmail{position:relative;width:50%;height:auto;background:#fff;font-size:90%;top:50%;left:50%;transform:translate(-50%,-50%);padding:18px 20px 25px;border-radius:3px;overflow:hidden}
.FollowByEmail .followText{display:block;margin-bottom:18px}
.FollowByEmail .followText .titleInfo{font-size:12px;opacity:.7}
.FollowByEmail .followLabel{position:absolute;display:flex;height:54px;align-items:center;top:0;right:0;padding:0 15px;cursor:pointer}
.FollowByEmail .followLabel svg{height:19px}
.FollowByEmail .followLabel svg .c-2{fill:#e8e8e8;opacity:1}
.FollowByEmail .followLabel svg .c-1{fill:#999}
.FollowByEmail form,.FollowByEmail>*{position:relative;z-index:1}
.FollowByEmail input[type=email]{background:#fafafa;padding:15px;border-radius:3px}
.FollowByEmail input[type=submit]{width:100%;margin-top:20px;padding:15px;border-radius:3px}
.FollowByEmail input[type=submit]:hover{background:#009dd0}
.followAlternative{font-size:12px;margin:18px auto -10px 0}
.followAlternative a:hover{color:#009dd0}
.followClose{position:absolute;color:#bbb;font-size:30px;top:85%;left:50%;transform:translate(-50%,-50%);cursor:pointer}
.followClose:hover{color:#aaa}
.mainButton{display:flex;flex-wrap:wrap;justify-content:center;margin:12px 0 0}
.mainButton>*{margin:0 12px 12px 0}
.mainButton>*:last-child{margin-right:0}
.subButton{display:inline-flex;background:#d00;color:#fff;font-size:13px;line-height:22px;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;border-radius:3px}
.subButton:hover{background:#c00;color:#fff}
.mainIcon{display:inline-block;width:18px;height:18px;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center center}
.mainIcon.subscribeIcon{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><g transform='translate(4.614552, 2.514190)'><path d='M7.38163814,2.84217094e-14 C2.94735243,2.84217094e-14 1.02068576,4.0152381 1.02068576,6.66952381 C1.02068576,8.65333333 1.30830481,8.06952381 0.210209572,10.4895238 C-1.13074281,13.9380952 4.26163814,15.347619 7.38163814,15.347619 C10.5006858,15.347619 15.8930667,13.9380952 14.5530667,10.4895238 C13.4549715,8.06952381 13.7425905,8.65333333 13.7425905,6.66952381 C13.7425905,4.0152381 11.8149715,2.84217094e-14 7.38163814,2.84217094e-14 Z'></path><path d='M9.691448,17.998 C8.39716229,19.4437143 6.37811467,19.4608571 5.071448,17.998'></path></g></svg>")}
@media screen and (max-width:700px){.FollowByEmail{width:95%}}
/* Dark Mode */
.drK .FollowByEmail{background:#252526}
.drK .FollowByEmail input[type=email]{background:#2d2d30}
.drK .subButton{color:#fff}<div class="mainButton">
<a class="subButton" href="javascript:void(0)" onclick="followEmailVariable()"><i class="mainIcon subscribeIcon"></i>SUBSCRIBE</a>
</div>Catatan
Ganti kode API di atas dengan id FollowIt Anda.
Ganti 335298076286807963 dengan id Blogger Anda.
Jika ingin ditampilkan pada link atau menu, ikuti format penulisan berikut:
<a href="javascript:void(0)" onclick="followEmailVariable()">SUBSCRIBE</a>Penutup
Jika diterapkan dengan benar dan dalam kondisi yang tepat, widget ini tentu dapat membantu Anda dalam menjangkau setiap pengunjung untuk kembali. Selain itu, pemasangannya juga mudah, jadi tunggu apa lagi?
Rekomendasi:
Cukup sekian artikel tentang Cara Memasang Subscribe Box di Blog ini, Terima kasih.