Cara Membuat Subscribe Box dengan Animasi di Blogger

Cara Membuat Subscribe Box dengan Animasi di Blogger

AdityaTekno.com - Kali ini saya akan berbagi Cara Memasang atau Membuat Subscribe Box Keren dengan Animasi di Blogger. Widget Kotak Langganan artikel atau Subscribe Box bagi blogger memiliki banyak fungsi.
Cara Membuat Kotak Langganan atau Subscribe Box dengan Animasi di Blogger

Selain memiliki banyak fungsi, Widget Kotak Langganan atau Subscribe Box juga bermanfaat bagi 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.

Baca Juga: Cara Memasang Recent Comment Disqus di Blogger

Tampilan Subscribe Box yang akan saya bagikan ini diberi animasi warna dengan tujuannya agar pengunjung lebih tertarik sehingga interaksi antara pengunjung dan blog yang dia kunjungi akan terbentuk dengan baik.

Baca JugaCara Terbaru Memasang Komentar Disqus di Blog

Nah, untuk anda yang mau mencoba menerapkananya di blog. Berikut langkah-langkahnya.

Cara Membuat Subscribe Box Keren dengan Animasi di Blogger


Pertama, buka Blogger >> Tema >> Edit HTML.

Kemudian tambahkan kode CSS ini tepat sebelum kode </head>
<style type='text/css'>
/* Subscribe Box with Animation */
@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:#1181d1;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:#2c699e}
</style>

Klik Simpan Tema.

Baca Juga: Cara Membuat Tombol Chat WhatsApp Melayang di Blogger

Selanjutnya ke menu Tata Letak >> Tambahkan Gadget >> HTML/JavaScript.

Tambahkan kode berikut di Gadget yang baru saja dibuat.
<div class="rainbow">
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>Newsletter</h2>
<p>Jika anda ingin mendapatkan artikel gratis lainnya, silahkan subscribe lewat email.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=XXXXX' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=XXXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="XXXXX" />
<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="Subscribe" />
</form>
</div>
</div></div></div>

Perhatikan kode yang ditandai XXXXX, 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.

Kemudian klik tombol Simpan.

Selanjutnya, kembali lagi ke menu Tema >> 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

Baca JugaCara Membuat Komentar Disqus dengan Tombol Onclick Load

Klik tombol Simpan dan sekarang bisa dilihat hasilnya di blog anda.

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


Demikian Cara Membuat Subscribe Box dengan Animasi di Blogger. Semoga tutorial ini bisa bermanfaat untuk anda. Sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

sumber:
https://www.blogooblok.com/2015/01/cara-membuat-kotak-subscribe-keren-di.html
https://www.naminakiky.com/2019/10/cara-memasang-subscribe-box-dengan-animasi.html