Tutorial Cara Memasang Floating Subscription box di Blogger

Untuk tips Blogger kali ini Wiki Blog Ku! akan berbagi Cara Memasang Floating Subscription box di Blogger. Seperti yang kita ketahui Subscription box atau widget berlangganan lewat email merupakan salah satu bagian yang penting di dalam sebuah blog, karena akan meningkatkan jumlah pengunjung selain itu dari sisi lain pelanggan postingan akan mengetahui secara langsung update yang diterima lewat email.

Sebelumnya saya juga sudah berbagi tips Cara Membuat Push Notifications di Blog dengan OneSignal yang memiliki fungsi serta manfaat yang kurang lebih sama. Baiklah, berikut ini adalah langkah-langkahnya.

Cara Memasang Floating Subscription box di Blogger

Pertama buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode ini sebelum kode </body>

<div class='subscribebar'>
   <div class='container text-center'>
      Get the latest article updates from this site via email for free!
      <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=WikibLogKu&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
         <div class='wikiblogku-form-fields'>
            <p>
               <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address...&quot;;}' onfocus='if (this.value == &quot;Email address...&quot;) {this.value = &quot;&quot;;}' placeholder='Email address...' required='' type='email'/>
            </p>
            <p><input type='submit' value='Submit'/></p>
            <input name='uri' type='hidden' value='WikibLogKu'/>
            <input name='loc' type='hidden' value='en_US'/>
         </div>
      </form>
   </div>
 <button class='closeme' title='Close this message'>&#10005;</button>
</div>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>

Edit bagian yang ditandai dan sesuaikan dengan blog sobat

Kemudian pilih salah satu kode CSS di bawah ini sesuai dengan kebutuhan dan tambahkan kode tersebut sebelum kode </head>



1. Subscription box Light

<style type='text/css'>
/* Floating Subscribe Box Light */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .wikiblogku-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;color:#999;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:1px solid rgba(0,0,0,0.1);border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(0,0,0,0.01);color:#333}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.closeme{background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:#ccc;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:#aaa}
@media (max-width:767px){
.closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#34495e;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3)}
.subscribebar .closeme:hover{background:#2c3e50;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

1. Subscription box Night

<style type='text/css'>
/* Floating Subscribe Box Night */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .wiiblogku-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.3)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

1. Subscription box Gradient

<style type='text/css'>
/* Floating Subscribe Box Gradient */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:#FF5722;background-image:linear-gradient(50deg,#ff4169,#8b41f6);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .wikibogku-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.4)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog sobat.



Sekian dari Wiki Blog Ku! tentang Cara Memasang Floating Subscription box di Blogger. Semoga bermanfaat dan wassalam.