Sekilas Isu Trik Menciptakan Subscribe Box Keren Di Blog

Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog,- Sebelumnya saya pernah membagikan cara menciptakan Kotak Subscribe Box di Blog Seperti EVO Magz dan kali ini saya masih akan menawarkan mengenai cara menciptakan subscribe box di blog ibarat template arlina design. dimana subscribe box tersebut sangat anggun dan keren berdasarkan saya makanya disini saya akan membagikanya.

Subscribe BOX atau Kotak berlangganan yakni sebuah kotak dipakai untuk memasukan email yang biasanya terdapat pada sebuah web atau blog yang bertujuan semoga pengunjung sanggup mengetahui update artikel melalui email mereka. ibarat halnya tombol Subscribe pada situs youtube subscribe box juga mempunyai cara yang 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, alasannya yakni sudah banyak blog yangmemasang kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yang memasangnya namun setiap kotak tampilanya berbeda-beda. yah itu juga tergantung modifikasi ang dilakukan oleh pemilik blog.

Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, alasannya yakni jikalau pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu jikalau ada artikel gres dari blog anda dan otomatis juga akan menambah visitor blog. Namun sebelum memasang subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner gres sanggup memasang ID tersebut ke Subscribe Box.

Nah buat tampilan Subscribe Box pada tutorial kali ini ibarat gambar diatas, dan kotak berlangganan tersebut saya pasang pada footer. jikalau anda tertarik dengan Subscribe BOX ibarat gambar diatas sanggup pribadi ikuti cara dibawah ini.

Cara Memasang Subscribe Box keren di Blog

1. Pertama silahkan masuk ke Blogger - Template dan Edit HTML

2. Kemudian Cari kode ]]></b:skin> gunakan (Ctrl+F) untuk mempermudah pencarian, jikalau sudah ketemu silahkan copy instruksi dibawah ini dan paste di atas instruksi tersebut.

/* Subscribe Box */
#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 instruksi CSS dibawah ini kemudian paste ditempat yang anda inginkan semisal jikalau ingin memasang diatas footer paste diatas instruksi <footer>

<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=EspadaBlog' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 instruksi CSS media screen dibawah ini sempurna diatas instruksi </style>

@media screen and (max-width:768px){
#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 dan lihat hasilnya.

Dan itulah cara menciptakan Subscribe Box di blog keren ibarat blog arline design, untuk warna sekaligus tampilanya sanggup anda sesuaikan sendiri. sekian tips blogging yang sanggup saya bagikan dan selamat mencoba.