Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog,- Sebelumnya saya pernah membagikan cara menciptakan Kotak Subscribe Box di Blog Seperti EVO Magz serta kali ini saya masih akan memperlihatkan mengenai cara menciptakan subscribe box di blog menyerupai template arlina design. dimana subscribe box tersebut sangat anggun serta anggun berdasarkan saya makanya disini saya akan membagikanya.
Subscribe BOX atau Kotak berlangganan yakni sebuah kotak dipakai untuk memasukan email yg biasanya terdapat pada sebuah web atau blog yg bertujuan semoga pengunjung sanggup mengetahui update artikel melalui email mereka. menyerupai halnya tombol Subscribe pada situs youtube subscribe box pun mempunyai cara yg sama namun disini kita perlu memasukan email kemudian submit untuk berlanggan artikel dari sebuah web/blog.
Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, sebab sudah banyak blog ygmenempatkan kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yg menempatkannya namun setiap kotak tampilanya berbeda-beda. yah itu pun tergantung modifikasi ang dilakukan oleh pemilik blog.
Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, sebab bila pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu bila ada artikel gres dari blog anda serta otomatis pun akan menambah visitor blog. Namun sebelum menempatkan subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner gres sanggup menempatkan ID tersebut ke Subscribe Box.
Nah buat tampilan Subscribe Box pada tutorial kali ini menyerupai gambar diatas, serta kotak berlangganan tersebut saya pasang pada footer. bila anda tertarik dengan Subscribe BOX menyerupai gambar diatas sanggup pribadi ikuti cara dibawah ini.
Cara Memasang Subscribe Box anggun di Blog
1. Pertama silahkan masuk ke Blogger - Template serta Edit HTML
2. Kemudian Cari kode ]]></b:skin> gunakan (Ctrl+F) untuk mempermudah pencarian, bila sudah ketemu silahkan copy isyarat dibawah ini serta paste di atas isyarat tersebut.
#subscribe-css{position:relative;padding:20px 0;background:#444;overflow:hidden;border-top:4px solid #eee:none}
.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:#555;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#E73037;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:#E73037;}
#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%;}
3. Selanjutnya silahkan copy isyarat CSS dibawah ini kemudian paste ditempat yg anda inginkan semisal bila ingin menempatkan diatas footer paste diatas isyarat <footer>
<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=EspadaBlog' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='EspadaBlog'/><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>
Note: Silahkan ganti EspadaBlog dengan ID feedburner blog anda.
4. Dan terakhir supaya subscribe box lebih responsive pada tampilan mobile silahkan tambahkan isyarat CSS media screen dibawah ini sempurna diatas isyarat </style>
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}
5. Terakhir tinggal simpan template serta lihat hasilnya.
Dan itulah cara menciptakan Subscribe Box di blog anggun menyerupai blog arline design, untuk warna sekaligus tampilanya sanggup anda sesuaikan sendiri. sekian tips blogging yg sanggup saya bagikan serta selamat mencoba.