Vabrose: subcribe

Showing posts with label subcribe. Show all posts

Saturday, February 18, 2017

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 Feedburnersebelum 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…….

Available link for download

Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share

Salam Blogger, Kali ini Bloggingpasuruan akan berbagi Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share plus tombol share berputar di blog, Widget ini penting bagi pengunjung agar mereka lebih mudah mendapatkan informasi terupdate dari postingan Anda terbaru, dan para pengunjung blog mau untuk berlangganan dan share artikel blog anda tentunya. Dan penambahan tombol share perputar hanya sebuah aksesoris agar bisa menarik perhatian mata pengunjung. Untuk melakukan hal ini tidaklah sulit karena sudah saya sediakan pada postingan ini dengan modifikasi sehingga tampilan kotak feedburner menjadi lebih menarik dan dilengkapi dengan tombol share yang bisa berputar. Sehingga pengunjung bisa menikmati blog anda yang rapi dan teratur. Langsung saja menuju ke TKP hehehehehe

1. Login Blogger kemudian klik Tata Letak > Tambah Widget > pilih HTML/Java Script.

2. Kemudian masukan kode berikut ini :

Keterangan:

Ganti tulisan warna merahdengan ID Feedburner anda.

Ganti tulisan warna orangedengan ID Facebook anda.

Ganti tulisan warna hitam dengan ID Twitter anda.

Ganti tulisan warna biru dengan ID Google+ anda.

3. Simpan ( Save ) dan lihat hasilnya.

Available link for download

Saturday, February 18, 2017

Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger

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

Tuesday, February 7, 2017

Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share

Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share