Cara Membuat Widget Ikuti Lewat Email Dengan Efek Bounce

Membuat widget follow by email atau ikuti lewat email itu sangat penting untuk seorang blogger karena jika seorang pengunjung ingin berlangganan dan ingin melihat update artikel terbaru dari blog kalian, mereka hanya perlu memasukkan email mereka ke kotak widget tersebut dan mengkonfirmasi link aktivasi tersebut. Dengan memasang widget ikuti lewat email itu juga sangat bermanfaat kepada blog karena akan meningkat traffic blog. Kalian pasti sering menjumpai situs situs blog menggunakan widget ikuti lewat mail dengan harapan pengunjung akan menjadi pelanggan blog.

Jika seseorang berlangganan kepada blog kalian, kalian harus tetap memberikan informasi kepada subscriber kalian tersebit yaitu dengan membuat update artikel artikel terbaru dari blog kalian. Kali ini saya akan membagikan bagaimana cara membuat widget ikuti lewat email, widget ini sangat sederhana namun menarik, dan tentunya responsive.

Jika  kalian masih tetap ingin membuat widget ikuti lewat email seperti widget blog saya yang anda disebelah kanan dengan efek bounce, kalian ikuti tutorial ini dengan baik dan tentunya jangan hanya diterapin saja, alangkah baiknya kalian juga memahami struktur kodenya karna itu sangat bermanfaat sebagai seorang blogger.

CARA MEMBUAT WIDGET IKUTI LEWAT EMAIL DENGAN EFEK BOUNCE

1. Pertama login dulu ke  Blogger


2. Masuk ke menu Tema Kemudian Pilih Edit HTML


3. Cari Kode Berikut  ]]></b:skin>, Kemudian Copy & Pastekan Kode Script dibawah ini tepat diAtas kode tadi,



/* Newsletter By Anirocksite.com */
#sidebar-subscribe-box{max-width:100%}
 .sidebar-subscribe-box-wrapper{border-top:2px solid #ff69b4;background:#fff;box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);border-radius:4px;color:#111;font-size:13px;line-height:20px;padding:1px 20px 10px;text-align:center;}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGkCoMmjY8yfBE9VUVpd3PYUCmVpVPSEY4YmQ8_mOMPBrJkm8p8jVIO5EqJNBxugPlFzKafrsLHt9B9ia46TNwx960xe0-_oC2biTAavqRDWn7B7mYb8H9-oefqf70jCgUbVQ9hLrls0/s1600/icons.png) no-repeat 0 -29px;border:1px solid #ff69b4;box-shadow: 0 2px 7px rgba(255,255,255,.28), inset 0 2px 7px #FFC0CB;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#ff69b4;border:1px solid #ff69b4;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);width:50%;border-radius:100px}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{color:#ff69b4;background:#fff;box-shadow: 0 2px 7px rgba(255,255,255,.28), inset 0 2px 7px #FFC0CB;}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
h3{padding:15px 0px 1px;font-size:20px;color:#ff69b4}.mobile .blogger-iframe-colorize {display: block !important;}.blogger-iframe-colorize {display: block !important;}.sidebar-subscribe-box-email-button {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@media screen and (max-width:320px){.sidebar-subscribe-box-email-button{}}
@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}

4. Jika Sudah Klik Simpan Tema.


5.  Kembali ke Dashboard blogger, Pilih  Tata Letak, Pilih Posisi Widget Sidebar Kanan, 


6. Kemudian pilih HTML/Javascript, Copy & Pastekan kode dibawah ini dan Simpan,  



<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<h3>Newsletter</h3>
<p>Dapatkan Informasi Update Artikel Terbaru Langsung Melalui Kotak Email Anda.</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri= ID_FEEDBURNER_BLOG" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= ID_FEEDBURNER_BLOG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Contoh : anirock@gmail.com"/>
<input class="sidebar-subscribe-box-email-button" title="Berlangganan" type="submit" value="SUBSCRIBE" /></form>
</div></div></div>

7. Setelah selesai disalin jangan langsung disimpan dulu, kenapa ? Karna kamu harus setting beberapa bagian.

Keterangan :

• ID_FEEDBURNER_BLOG : Ubah menjadi alamat feedburner blog kalian,


• Contoh : Anirock@gmail.com : Ubah kalimat ini sesuai yang kalian inginkan,


• Jika ada kalimat yang ingin diganti Edit yang didalam kode :  <p> & <h3>, 


• Bisa Juga Mengedit Bagian :  Tittle, Value.


• #ff69b4 : Merupakan Warna Dari Border Top, Newsletter, Tombol Subscribe

Untuk demonya kalian dapat melihat diwidget sebelah kanan atas blog ini.

Sekian tutorial Cara Membuat Wodget Ikuti Lewat Email Dengan Efek Bounce, Jika kalian mengikuti cara diatas dengan benar pastinya tidak terjadi kesalahan. Namun, jika ada hal yang lain yang ingin diedit dapat ditanyakan melalui kolom komentar.