Cara Memasang Subscription Box Melayang di Blogger

Arsipbiru.com - Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara memasang subscription box melayang di Blogger. Subscription box atau biasa disebut dengan kotak berlangganan merupakan salah satu widget yang penting dalam sebuah website atau blog. Sebab dengan adanya widget tersebut dapat meningkatkan jumlah pengunjung secara tidak langsung. Hal ini dikarenakan pengunjung yang telah berlangganan pada blog atau website tersebut akan mendapatkan kiriman lewat email terkait postingan terbaru dari website atau blog tersebut.

Dengan begitu, trafik website atau blog tersebut akan mengalami peningkatan secara signifikan. Hal ini tentunya sangat bagus guna mendongkrak kredibilitas website atau blog itu sendiri. Tentunya juga bagus untuk meningkatkan AdSense.

Subscription box yang akan saya bagikan ini dapat melayang ketika halaman blog digulir ke bawah dan tentunya juga memiliki tampilan yang user interface. Sehingga dapat mempercantik tampilan website atau blog.

Nah, jika Anda tertarik ingin memasang subscription box melayang di Blogger, silahkan simak langkah-langkahnya dengan seksama.

Cara Memasang Subscription Box Melayang di Blogger

1. Pertama, masuk ke akun Blogger masing-masing.

2. Lalu, pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.

3. Cari kode </body> dan masukkan kode berikut ini di atas kode </body>.

<div class='subscribebar'>

   <div class='container text-center'>

      Dapatkan update artikel terbaru dari Arsipbiru via email secara gratis!

      <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Arsipbiru&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

         <div class='arlina-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='Arsipbiru'/>

            <input name='loc' type='hidden' value='en_US'/>

         </div>

      </form>

   </div>

 <button class='closeme' title='Tutup pesan ini'>&#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>

Floating Subscription Box Light

/* 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 .arlina-form-fields p{display:inline-block;margin-bottom:0}

.subscribebar input[type="email"]{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="email"]:hover{background:rgba(0,0,0,0.01);color:#333}

.subscribebar input[type="submit"]{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="submit"]:hover,.subscribebar input[type="submit"]: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}}

Floating Subscription Box Night

/* 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 .arlina-form-fields p{display:inline-block;margin-bottom:0}

.subscribebar input[type="email"]{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="email"]:hover{background:rgba(255,255,255,.3);color:#fff}

.subscribebar input[type="submit"]{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="submit"]:hover,.subscribebar input[type="submit"]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}

.subscribebar input[type="email"]::placeholder{color:#fff;opacity:1}

.subscribebar input[type="email"]:-ms-input-placeholder{color:#fff}

.subscribebar input[type="email"]::-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}}

Floating Subscription Box Gradient

/* 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 .ab-form-fields p{display:inline-block;margin-bottom:0}

.subscribebar input[type="email"]{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="email"]:hover{background:rgba(255,255,255,.3);color:#fff}

.subscribebar input[type="submit"]{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="submit"]:hover,.subscribebar input[type="submit"]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}

.subscribebar input[type="email"]::placeholder{color:#fff;opacity:1}

.subscribebar input[type="email"]:-ms-input-placeholder{color:#fff}

.subscribebar input[type="email"]::-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}}