Cara Memasang Widget Subscribe Box dengan Animasi

Halo semua, bagaimana kabar hari ini? Semoga tetap selalu sehat dan diberikan kemudahan dalam setiap aktivitasnya ya, amin. Hari ini saya akan bagikan kepada Anda semua sebuah artikel tentang Cara Memasang Widget Subscribe Box dengan Animasi.

Widget Subscribe Box atau mudahnya kita kenal sebagai kotak berlangganan di blogger adalah sebuah fitur yang sangat berguna bagi pembaca blog untuk belangganan update artikel yang kemudian akan di kirimkan langsung via email mereka secara gratis.

Tidak hanya berpotensi positif bagi pengunjung saja, Subscribe Box ini juga memiliki dampak positif kita sebagai seorang blogger untuk mendapatkan pelanggan setia nantinya di kemudian hari.

Nah dalam artikel ini Panduanajib akan berikan Anda Cara Memasang Widget Subscribe Box dengan Animasi seperti yang sudah di terapkan oleh blog Masakan Cici yang menggunakan template In SEO Spesial Ramadhan.

Baiklah tanpa basa-basi lagi, bagi Anda yang ingin menerapkan kotak berlangganan keren ini, bisa langsung lihat tutorialnya dibawah ini.

Pertama, buka Blogger > Tema > Edit HTML

Kemudian silahkan Anda tambahkan kode CSS dibawah 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.

Lalu silahkan Anda tambahkan kode dibawah pada Wigdet baru di menu Tata Letak

Letakan script di bawah ini pada widget yang baru saja Anda buat.

<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=Panduanajib' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Panduanajib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Panduanajib" />
<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 (Panduanajib), 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.

Setelah itu klik tombol Simpan.

Kembali lagi ke menu Tema > Edit HTML dan cari kode dibawah ini.

<div class="rainbow">

Ganti kode widget dengan HTML99, misalnya kode widget yang Anda buat tadi adalah HTML1 maka silahkan ganti dengan HTML99.

Klik tombol Simpan Tema, selesai.

Untu hasilnya bisa melihat demo di bawah ini.

Demikian artikel dari kali ini. Semoga bermanfaat ya. Salam Blogger Indonesia.