Cara Membuat Subscribe Box Keren di Blog

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

Subscribe BOX atau Kotak berlangganan adalah sebuah kotak digunakan untuk memasukan email yang biasanya terdapat pada sebuah web atau blog yang bertujuan agar pengunjung dapat mengetahui update artikel melalui email mereka. seperti halnya tombol Subscribe pada situs youtube subscribe box juga memiliki cara yang sama namun disini kita perlu memasukan email lalu submit untuk berlanggan artikel dari sebuah web/blog.

Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, karena 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, karena jika pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu jika ada artikel baru 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 baru bisa memasang ID tersebut ke Subscribe Box.

Cara Membuat Subscribe Box Keren di Blog

Nah buat tampilan Subscribe Box pada tutorial kali ini seperti gambar diatas, dan kotak berlangganan tersebut saya pasang pada footer. jika anda tertarik dengan Subscribe BOX seperti gambar diatas bisa langsung 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, jika sudah ketemu silahkan copy kode dibawah ini dan paste di atas kode 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 kode CSS dibawah ini lalu paste ditempat yang anda inginkan semisal jika ingin memasang diatas footer paste diatas kode <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 kode CSS media screen dibawah ini tepat diatas kode </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 membuat Subscribe Box di blog keren seperti blog arline design, untuk warna sekaligus tampilanya bisa anda sesuaikan sendiri. sekian tips blogging yang dapat saya bagikan dan selamat mencoba.
Cara Membuat Subscribe Box Keren di Blog

Tweet

Subscribe to receive free email updates: