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 ]]></b:skin>, 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 </body> dan copy kode dibawah ini, pastekan di atasnya.

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=AakShare' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='AakShare'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

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 <data:post.body/> atau <div class='post-footer'>, lalu copy code diatas dan pastekan di bawahnya.

5. Simpan Template

Sekian saya sampaikan tutorial Cara Membuat Subscription Box Seperti Blog Arlina Design, terima kasih sudah berkunjung dan semoga bermanfaat.

Share this post