Cara membuat box subcribe melalui layout tata letak di Blogger

Cara membuat box subscribe melalui layout tata letak di Blogger mudah dan cepat.

Box subscribe adalah alat yang digunakan sebuah web untuk memudahkan pembaca berlangganan konten atau artikel.dengan menggunakan box subcribe pembaca dapat mendaftarkan email mereka agar mendapatkan pemberitahuan apabila web sedang melakukan update konten, ini akan di kirimkan secara otomatis ke email yang telah terdaftar.

Jika anda ingin berlangganan konten dari web silahkan daftar melalui box subscribe di bawah.

Setelah melihat contoh box subscribe di atas dan anda tertarik untuk menggunakannya, dapat anda copy code script di bawah ini dan tempelkan ke tambahkan widget/gadget.

Tips.
Untuk yang masih baru atau belum pernah menambahkan widget melalui layout tata letak dapat anda membaca keterangan yang berada di bawah code script ini.

Script subscribe MCQ Box

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
/* Subscribe MCQ Box */
#subscribe-css
{ position:relative;
padding:20px 0;
background:#333333;
overflow:hidden;
border-top:5px solid #E73138;
box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 2px 3px rgba(0,0,0,0.24);
border:1px 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:#E73138;
color:#fff;
cursor:pointer;
font-weight:700;
padding:14px 30px;
margin-left:15px;
text-transform:none;
font-size:16px;
border:0;
border-radius:0px;
transition:all .6s
}
.subscribe-css-email-button:hover
{ background:#222;
border-top:5px solid #E73138;
}
#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:&#39;&#39;;
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%;
}
</style>
<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=mcqcollection' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=mcqcollection&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='mcqcollection'/><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>
</div>

Live Preview

Informasi:
Gantikan alamat (url) http://feedburner.google.com/fb/a/mailverify?uri=mcqcollection dan semua input mcqcollection.dengan alamat feed anda.

Sebelum menambahkan widget melalui layout tata letak pastikan anda sudah membuat salinan/copy code script di atas.

• Masuk situs blogger, sentuh atau menemukannya fitur tata letak.
• Dalam tab baru yang terbuka, sentuh tambahkan gadget.Tips, Gunakan gadget yang berada di header atau footer, ini dapat membuat penampilan box subscribe lebih menarik.
• Selanjutnya cari fitur "HTML/JavaScript" kemudian sentuh pada ikon tambah yang berada di samping kanan fitur tersebut.
• Lengkapi judul, sentuh dan tahan pada area menulis konten lalu tempelkan.
• Sentuh pada tombol oranye "selesai".

Apabila semua dilakukan dengan benar maka akan ditampilkan seperti contoh box subscribe di atas.

Untuk memastikan apakah script sudah terpasang dengan benar, dapat anda lakukan pratinjau dari homepage/beranda web Anda.