Cara Menciptakan Subscription Box Menyerupai 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 mendapat artikel-artikel terbarunya.

Pada Subscription Box ini ibarat mirip Blog Arlina Design yaitu mempunyai fitur warna biru yang lebut, mempunyai pengaruh hover, dan tampilannya cantik.

Terkait:

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

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

Subscription Box Seperti Blog Arlina Design

1. Masuk ke Blogger
2. Pilih Template, Edit HTML
3. Kemudian kau cari kode ]]></b:skin>, copy isyarat 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 kau cari code </body> dan copy isyarat 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 isyarat yang ditandai AakShare dengan id feedburner blog kamu

Terkait : Cara Mendaftar Feedburner Terbaru

Untuk kau yang ingin memasang Subscription Box di bawah postingan, kau cari code <data:post.body/> atau <div class='post-footer'>, kemudian copy code diatas dan pastekan di bawahnya.

5. Simpan Template

Sekian aku sampaikan tutorial Cara Membuat Subscription Box Seperti Blog Arlina Design, terima kasih sudah berkunjung dan biar bermanfaat.
Sumber http://www.websiteedukasi.com/