Cara Membuat Subscription Box Seperti Blog Arlina Design

Cara Membuat Subscription Box Seperti Blog Arlina Design

Cara Membuat Subscription Box Seperti Blog Arlina Design

Cara Membuat Kotak Berlangganan (Subscription Box) Ala Arlina Design – Kotak Berlangganan atau bahasa inggrisnya Subscription Box merupakan widget berlangganan artikel Blog kepada admin Blog untuk mendapatkan artikel-artikel terbarunya.

Pada Subscription Box ini mirip seperti Blog Arlina Design yakni memiliki fitur warna biru yang lebut, memiliki efek hover, dan tampilannya cantik.

Terkait:

  • Cara Membuat Widget Subscribe Keren
  • Cara Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Masalah warna kamu bisa ubah dan sesuaikan dengan keinginan. Dalam pemasangan kamu ikuti langkah demi langkah di bawah ini.

Subscription Box Seperti Blog Arlina Design

1. Masuk ke Blogger
2. Pilih Template, Edit HTML
3. Kemudian kamu cari kode ]]>, copy kode di bawah ini dan pastekan diatasnya.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

4. Selanjutnya kamu cari code dan copy kode dibawah ini, pastekan di atasnya.

SUBSCRIBE TO OUR NEWSLETTER

AakShare' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
AakShare'/>

Note : Silahkan ganti semua kode yang ditandai AakShare dengan id feedburner blog kamu

Terkait : Cara Mendaftar Feedburner Terbaru

Untuk kamu yang ingin memasang Subscription Box di bawah postingan, kamu cari code  atau 

Post Comment