Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Responsive Email Subscribe di Footer Blog

Salah satu cara untuk meningkatkan trafik pengunjung adalah dengan Mendaftarkan Blog ke Google Feedburner. Dengan halaman feedburner kita bisa memperoleh pembaca berlangganan sehingga mereka dapat langsung melihat setiap artikel baru yang terbit. Dan itu jelas merupakan sumber trafik tambahan selain dari mesin pencari Google.

Untuk mendapatkan pembaca berlangganan, artikel di dalam blog harus menarik dan sering memberikan manfaat bagi para pembaca sehingga mereka tidak ragu untuk menjadi pembaca berlangganan di blog kita. Selain itu, cara lain yang dapat kita lakukan adalah dengan membujuk para pengunjung blog untuk menjadi pembaca berlangganan menggunakan widget-widget email subscribe.

Namun setelah munculnya template responsive yang dibuat untuk mendukung tampilan gadget-gadget dengan ukuran layar yang beragam, widget yang masih statis menjadi bermasalah. Widget tersebut harus memiliki tampilan yang responsive juga menyesuaikan dengan template. Mungkin bagi widget-widget yang diletakkan di bagian sidebar jarang bermasalah. Tapi beda lagi bagi widget yang akan dijadikan sebagai bagian dari template, saat kamu menggunakan template responsive maka widget tersebut harus menyesuaikan.

Responsive Email Subscribe

Termasuk email subscriber juga sebagian orang lebih suka menempatkan widget ini menyatu di bagian template. Maka kali ini saya akan membagikan responsive email subscribe karena widget-widget dengan tampilan statis yang sudah lama tidak akan cocok jika di terapkan pada template yang sekarang telah responsive.

Selain widget yang satu ini memiliki tampilan yang responsive, juga full costumized. Artinya mudah di personalisasi sehingga memiliki kemungkinan yang besar ketika membuat tampilan widget ini cocok dengan tampilan blog kamu. Silakan lihat terlebih dahulu live demo nya pada link di bawah ini.

Memasang Responsive Email Subscribe di Footer Blog

Widget yang akan saya berikan ini memiliki ukuran lebar satu halaman penuh, sehingga tidak cocok jika ingin meletakkannya di bagian blog yang sempit seperti di dalam posting. Widget ini paling cocok di letakkan di bagian Footer. Namun jika kamu ingin widget berlangganan artikel di bawah posting, silakan kamu bisa coba Email Subscribe Widget Below the Post.

Kemudian sebelum memasang widget yang satu ini, kamu perlu memasang ikon font awesome pada blog. Jika kamu sudah memasang ikon font awesome namun berbeda dengan script yang saya berikan, maka kamu tetap harus memasang script berikut. Karena jika script ikon font awesome berbeda, bisa jadi source ikon font awesome juga berbeda. Maka silakan letakkan script berikut di bawah kode <head>.
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian ada baiknya terlebih dahulu kamu mengamankan template untuk mengantisipasi hal-hal yang tidak diinginkan.

Memasang CSS

Pada dashboard Blogger silakan masuk ke menu Template dan klik Edit HTML. Dengan menggunakan tombol ctrl + F carilah kode ]]></b:skin> kemudian letakkan script CSS berikut tepat di atas kode
]]></b:skin>.
/*** Tech Kshetra subscribe footer CSS Starts - www.techkshetra.com ***/ 
#subscribe-footer .container{width:1000px;margin:0 auto}
#subscribe-footer{width:100%;height:100px;background:#3498db}
#subscribe-footer i{font-size:90px;margin-top:5px;float:left;margin-right:20px;color:#2980b9}
#subscribe-footer i:hover{
color:white;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-ms-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
}
#subscribe-footer .left{float:left;text-align:left;width:50%}
#subscribe-footer h3{color:#fff;margin-bottom:2px;font-weight:600}
#subscribe-footer p{margin:0;line-height:20px;color:#fff;font-weight:300}
#subscribe-footer form{float:right;margin:28px}
#subscribe-footer form .inptfld{font-family:Open Sans;outline:none;border:none;font-size:15px;padding:10px;border-radius:3px;width:250px}
#subscribe-footer form .subscribe-footerbtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;background:#34495e;cursor:pointer;margin-left:10px}
#subscribe-footer form .subscribe-footerbtn:hover{
background:#233140;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
/*** Tech Kshetra subscribe footer CSS Ends - www.techkshetra.com ***/
/*** Tech Kshetra subscribe footer responsive Design Starts - www.techkshetra.com ***/
@media screen and (max-width : 1200px) {
#subscribe-footer .container {width: 1050px; }
}
@media screen and (max-width : 1100px) {
#subscribe-footer .left {width: 52%;}
#subscribe-footer .container {width: 950px;}
}
@media screen and (max-width : 1000px) {
#subscribe-footer .left {width:55%;}
#subscribe-footer form .inptfld {width:168px;}
#subscribe-footer .container{width: 850px;}
}
@media screen and (max-width : 900px) {
#subscribe-footer .left {width:12%;}
#subscribe-footer p, #subscribe-footer h3 {display:none;}
#subscribe-footer form .inptfld {width: 458px;}
#subscribe-footer .container {width: 750px;}
}
@media screen and (max-width : 800px) {
#subscribe-footer form .inptfld {width: 368px;}
#subscribe-footer .container{width:650px}
}
@media screen and (max-width : 700px) {
#subscribe-footer form .inptfld {width: 268px;}
#subscribe-footer .container {width: 550px;}
}
@media screen and (max-width : 600px) {
#subscribe-footer form .inptfld {width: 168px;}
#subscribe-footer .container {width: 450px;}
}
@media screen and (max-width : 500px) {
#subscribe-footer form .inptfld {width: 145px;}
#subscribe-footer i {display:none!important;}
#subscribe-footer .container {width: 350px;}
}
@media screen and (max-width : 400px) {
#subscribe-footer form .inptfld {width: 95px;}
#subscribe-footer i {display:none!important;}
#subscribe-footer .container {width: 300px;}
}
@media screen and (max-width : 300px) {
#subscribe-footer {display:none!important;}
#subscribe-footer .container {width: 250px;}
}
/*** Tech Kshetra subscribe footer responsive Design Ends - www.techkshetra.com ***/

Beberapa personalisasi dasar yang dapat kita lakukan adalah pada kode berlatar biru untuk mengatur ukuran lebar widget, dan kode berlatar merah adalah untuk mengatur warna background widget. Kemudian kode berlatar kuning untuk mengatur warna tombol subscribe beserta hover nya (perubahan warna). Sedangkan kode berlatar hijau untuk mengatur warna tulisan sepatah kata untuk membujuk pengunjung menjadi pembaca berlangganan. Dan kode berlatar ungu adalah untuk mengatur warna icon mail beserta hover nya (perubahan warna).

Selain itu masih banyak personalisasi yang dapat kamu lakukan jika kamu dapat lebih menuangkan kreatifitas pada script di atas.

Memasang HTML

Setelah memasang CSS maka selanjutnya adalah memasang script html di mana widget ini akan ditempatkan. Coba lihat elemen apa yang terdapat di bagian paling bawah pada blog. Biasanya terdapat sebuah credit ("copyright 2016 NAMABLOG bla bla bla"). Sebut saja itu adalah elemen "footer". Kemudian silakan masuk ke Dasboard Blogger >> Template dan klik Edit HTML. Gulir ke bagian paling bawah di halaman edit template tersebut, kemudian kenali elemen "footer". Setelah elemen tersebut ditemukan, maka letakkan script HTML berikut di atas elemen footer.

Namun jika kamu belum mengerti script-script pada halaman tersebut, coba letakkan script berikut di atas kode </body> dulu saja, dengan ini mudah-mudahan nanti kamu akan mengerti. Namun dengan meletakkan di posisi ini, maka widget email subscribe akan berada di paling bawah blog kamu.
<!-- Email Subscribe -->
<div id='subscribe-footer'>
<div class='container'>
<div class='left'>
<i class='icon-envelope-alt'></i>
<h3>Berlangganan Artikel Melalui Email!</h3>
<p>Suka dengan artikel kami? Daftarkan email anda sekarang untuk mendapatkan artikel terbaru tentang Blogger, Tips SEO, hingga Monetize Blog</p>
</div>
<div id='right'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial &#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input class='inptfld' name='email' placeholder=' Your Email' style='font-family:Open Sans' type='text'/>
<input name='uri' type='hidden' value='b-tutorial'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='subscribe-footerbtn' type='submit' value='Subscribe Now!'/>
</form>
</div>
</div>
</div>
<!-- Email Subscribe -->

Untuk personalisasi pada script ini, cukup ubah tulisan berlatar biru dengan sepatah kata untuk membujuk pengunjung agar menjadi pembaca berlangganan. Dan tulisan berlatar merah ubah dengan alamat feedburner blog kamu.

Artikel terkait : Responsive Email Subscribe di Footer Blog

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved