Cara Memasang Floating Subscription Box Blogger

Usuluddin, S.Kom    Selasa, Februari 04, 2020    TUTORIAL   

Cara Memasang Floating Subscription Box Blogger

GoSEO.id - Pada postingan kali ini GoSEO.id akan membagikan tips "Cara Memasang Floating Subscription Box Blogger" yang seperti kita ketahui bahwa widget ini penting sebagai kotak langganan pengunjung yang berfungsi sebagai langganan update postingan yang diterima pengunjung lewat email.

Dengan adanya Subscription Box, maka kita dapat mendatangkan kembali pengunjung setia ke blog sehingga trafik blog akan tetap ramai.

Kita langsung saja ke coding untuk membuat Floating Subscription Box.

Cara Memasang Floating Subscription Box Blogger

1. Masuk ke akun blogger.com milikmu.
2. Setelah itu masuk ke menu Tema => dan klik button Edit HTML.
3. Masukkan kode CSS dibawah ini dan letakkan tepat diatas </head>.
   

   <style type='text/css'>
   .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 .goseo-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>

Silahkan sesuaikan kode CSS tersebut dengan keinginan kamu.

4. Kemudian tambahkan juga kode dibawah ini dan letakkan kode tersebut diatas </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=GOSEO2019&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
            <div class='goseo-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='GOSEO2019'/>
               <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>

   Silahkan ganti yang ditandai dan sesuaikan dengan blog milikmu.

5. Setelah selesai silahkan klik Simpan dan lihat hasilnya pada blog kamu.

Semoga tutorial "Cara Memasang Floating Subscription Box Blogger" ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak kamu pahami.

---

Apakah kamu sudah membaca :
# Cara Membuat Gradient Efek Button Hover
# Cara Mengatasi Peringatan Indeks Di Search Console
# Cara Membuat Tools Parse HTML Pada Blogger
# Pentingnya Penggunaan Email Profesional Dalam Bisnis
# Cara Daftar Google News Untuk Blogger
# Memasang Widget Recent Post Blogger
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Rekomendasi SEO untuk YouTube
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap