Cara Memasang Subscribe Box di Blog

GEMA.MY.ID

Friday, August 27, 2021

Subscribe Box 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.

Rekomendasi: Cara Memasang Sitemap / Daftar Isi di Blog

Cara Memasang Subscribe Box di Blog

Masuk ke BLOGGER
Pilih menu TEMA
Pilih EDIT HTML
Tempel di atas </body>:

<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=3931672134983184918" 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>

Tempel di atas ]]></b:skin>:

.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-color:#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=submit]{width:100%;margin-top:20px;border-radius:4px}
.FollowByEmail input[type=submit]:hover{background-color:#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-color:#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-color:#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%}}

Pilih SIMPAN
Setelah disimpan, pilih menu POSTINGAN dan tentukan tulisan yang akan diberikan tombol subscribe box. Gunakan skrip berikut:

<div class="mainButton">
  <a class="subButton" href="javascript:void(0)" onclick="followEmailVariable()"><i class="mainIcon subscribeIcon"></i>SUBSCRIBE</a>
</div>

Selesai.

Rekomendasi: Cara Memasang Widget WhatsApp di Blog

Catatan

Ganti https://api.follow.it/subscription-form/RzZKemdoU1J0R0xsU0JrTWQ1UkFhVnErejNEWEsrRTFqYVphcEdORG0zb25JMDVxTm5SYkhpamtKR3R4UithWFlWRWVDRUtZOHhpbHlrV0czQXg3b3NVdmEzU1NYZ3BoTTkzdGFlMDlJVHB5QWowSFB4SlJVTlFUM1RtTXVWaFB8NXdXOUR6S0NBTG1tdjJBVlkrQTV3WStpbWl1QU91MWNQcjFITlYrbVRvRT0=/8 dengan id FollowIt Anda.

Ganti 3931672134983184918 dengan id Blogger Anda.

Jika ingin ditampilkan pada link atau menu, ikuti format penulisan berikut:

<a href="javascript:void(0)" onclick="followEmailVariable()">SUBSCRIBE</a>

Demo

Penutup

Jika diterapkan dengan benar dan dalam kondisi yang tepat, wijet ini tentu dapat membantu Anda dalam menjangkau setiap pengunjung untuk kembali. Selain itu, pemasangannya juga mudah, jadi tunggu apa lagi?

Rekomendasi: Daftar 10 Font Terbaik untuk Blog

Cukup sekian artikel tentang Cara Memasang Subscribe Box di Blog ini, Terima kasih.

Cancel