October 5, 2019

Cara Memasang Subscribe Box dengan Animasi

Cara Memasang Subscribe Box dengan Animasi

Subscribe Box atau kotak berlangganan di Blogger menjadi salah satu fitur yang bermanfaat bagi pembaca blog untuk berlangganan update artikel yang akan langsung dikirim via email dan juga manfaat bagi pemilik blog yaitu meningkatkan jumlah pembaca blog yang merupakan hal positif bagi perkembangan blog.

Cara Memasang Subscribe Box dengan Animasi

Di sini Namina akan memberikan tips Cara Memasang Subscribe Box dengan Animasi seperti pada template In SEO Spesial Ramadhan. Tampilan Subscribe Box ini diberi animasi warna ini tujuannya agar pengunjung lebih tertarik sehingga interaksi antara pengunjung dan blog yang ia kunjungi akan terbentuk dengan baik.

Oke, bagi Anda yang tertarik silakan ikuti langkah-langkah di bawah ini.

Cara Memasang Subscribe Box dengan Animasi


Pertama, buka halaman Blogger > Pilih menu Tema dan klik tombol Edit HTML

Cara Memasang Subscribe Box dengan Animasi

Kemudian tambahkan kode CSS ini tepat sebelum kode </head>

<style type='text/css'>
/* Subscribe Box */
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}.rainbow::before{content:&#39;&#39;;position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);animation:rotate 8s linear infinite}.rainbow::after{content:&#39;&#39;;position:absolute;z-index:-1;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}#HTML99{padding:0}#HTML99 h2{color:#222;padding:0}#HTML99 h2:before{display:none}.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}.subscribe-wrapper p{margin:0;font-size:14px}form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:14px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}.subscribe-css-button{background:#2c3e50;color:#fff;cursor:pointer;font-weight:500;padding:7px;text-transform:none;width:100%;border:none;font-size:16px;border-radius:3px;transition:all .3s}.subscribe-css-button:hover{background:#34495e}
</style>

Klik Simpan tema.

Langkah selanjutnya, tambahkan kode ini di dalam widget baru di menu Tata Letak blog

Cara Memasang Subscribe Box dengan Animasi

Tambahkan kode Subscribe Box ini di dalam widget yang baru saja dibuat

<div class="rainbow">
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>Newsletter</h2>
<p>If you like articles on this blog, please subscribe for free via email.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="InSEOFree" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div></div>

Perhatikan kode yang ditandai, ganti semua dengan alamat feedburner blog Anda. Jika belum memiliki alamat feedburner Anda bisa kunjungi link ini https://feedburner.google.com/fb/a/myfeeds dan tambahkan blog Anda.

Cara Memasang Subscribe Box dengan Animasi

Setelah itu klik tombol Simpan.

Selanjutnya, kembali lagi ke menu Tema > Klik tombol Edit HTML dan cari kode ini

&lt;div class=&quot;rainbow&quot;&gt;

Ganti kode id widget dengan HTML99, misalnya kode id widget tersebut adalah HTML1 kemudian ganti ke HTML99

Cara Memasang Subscribe Box dengan Animasi

Klik tombol Simpan tema dan selesai.

Untuk melihat hasilnya klik contoh tampilan Subscribe Box ini dari Codepen.



Oke, sekian dari Namina untuk Cara Memasang Subscribe Box dengan Animasi. Terima kasih sudah berkunjung dan semoga bermanfaat.
Cara Memasang Subscribe Box dengan Animasi
4/ 5
Oleh