Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger

Tujuan kita dalam membuat sebuah blog tentu tidak lepas dengan pengunjung (visitor), baik visitor bertarget maupun tidak, visitor yang datang melalui Search Engine maupun hasil Blogwalking. Nah, biasanya ada suatu visitor yang menganggap blog anda selalu berguna untuknya, selalu dianggap menarik dalam segi isi dan cara penulisannya. Maka dari itu dibutuhkan widget seperti Artikel Berlangganan agar memudahkan visitor mengakses artikel anda apabila suatu saat anda meng-update.

Kali ini saya akan posting tentang Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger, memang sudah banyak artikel tentang cara mendisain widget Email Subscribe namun desain kali ini cukup sederhana menarik dan responsive.

Lihat DEMO

Catatan : Disini Anda harus memiliki ID Feedburner sebelum memasang Widget Subscribe dengan Ripple Animasi di atas. Untuk mendaftarkan Blog Anda di Feedburner terlebih dahulu untuk mendapatkan ID Feedburner yang nantinya akan diletakkan pada script yang akan saya terangkan lebih lengkap seperti dibawah ini.

Silahkan baca “ CaraLengkap Mendaftarkan Blog ke Feedburner Google ”

Ikuti langkah-langkahnya berikut ini :

1. Masuk ke akun Blogger Anda

2. Masuk ke Dashboard >> Templete >> Edit HTML

3. Cari kode berikut ini ]]</b:skin> jika sudak ketemu, letakkan kode dibawah ini sebelum kode ]]</b:skin>

CCS - Bloggingpasuruan.blogspot.co.id

/* CSS Subscribe email by bloggingpasuruan.blogspot.co.id */

@import url(https://fonts.googleapis.com/css?family=Oswald);

.subscribe-box { background: #00ACF5;color: #FFF;width:86%;letter-spacing: 1px;text-align: center;padding: 20px;font-family:'Open Sans'box-shadow: 1px 1px 2px;}

.text-subscribe {text-transform: uppercase;}

.bigger-text {font-size: 50px;font-weight: 900;}

.text2-subscribe {text-align: justify;font-family:'Open Sans'margin-top: 3px;line-height: 1.5em;margin-bottom: 20px;font-size: 12px;}

input.newsletter-address {width: 80%;padding: 24px;background: #008BC5;color: #FFFFFF;font-family: Oswald;border: 0;}

.newsletter-address::-webkit-input-placeholder {color: #00ACF5;}

input.newsletter-submit {color: #FFF;transition: ease .3s all;font-family:'Oswald'cursor: pointer;background: #005D84;border: 0;width: 100%;padding: 10px;font-size: 15px;margin-top: 10px;text-align: center;}

.attention-subscribe { font-size: 11px;margin-top: 7px;font-family:'Open Sans'

}

input.newsletter-submit:hover {box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);}

input.ripple-effect.newsletter-submit:focus {box-shadow: 0px 5px 10px 2px rgba(0, 78, 111, 0.43);}

4. Setelah itu silahkan cari kode </head> jika sudah ketemu silahkan letakkan kode dibawah ini sebelum kode </head>

jQuery - Bloggingpasuruan.blogspot.co.id

//<![CDATA[

jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});

//]]>

</script>

5. Setelah itu tekan Save ( simpan )

6. Kemudian silahkan masuk ke Dashboad >> Tata Letak >> Add Gadget (tambah gadget).Pada kotak yang di sediakan, silahkan masukan kode HTML dibawah ini ke dalam kotak tersebut.

HTML - Bloggingpasuruan.blogspot.co.id

<div class="subscribe-box"><div class="text-subscribe">Dapatkan Update Artikel Terbaru<div class="bigger-text">GRATIS !</div><div class="text2-subscribe"> Hanya dengan memasukkan id email Anda di bawah ini dan kemudian tekan tombol "Berlangganan" maka secara otomatis Anda akan menerima update artikel terbaru dari blog ini langsung di inbox email Anda!</div></div>

<div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=ID-FEEDBURNER-ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return

true" id="bg-embedded-subscribe-form" name="bg-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div>

</div>

</form>

</div>

<div class="attention-subscribe"> Kami tidak akan pernah spam Anda.</div></div>

7. Simpan, Selesai dan lihat hasilnya….

Jika Anda menemui masalah terkait desain dari Widget Email Subcribe dengan Ripple Animasi, silahklan tinggalkan pesan pada kotak komentar dibawah ini. Sebelumnya Admin mengucapkan terima kasih atas kunjungannya..

Anda suka artikel di atas ? Jangan lupa share ya…….

Wong Pasuruan

Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger

CCS - Bloggingpasuruan.blogspot.co.id

jQuery - Bloggingpasuruan.blogspot.co.id

HTML - Bloggingpasuruan.blogspot.co.id

1 comment: