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

Responsive Email Subscribe di Bawah Posting

Untuk mendapatkan pembaca berlangganan melalui feedburner, kita bisa memasang sebuah widget email subscribe. Widget ini bisa kita pasang di posisi mana saja sesuai selera masing-masing. Namun menurut saya pribadi, widget email subscribe akan lebih efektif jika dipasang di bawah posting. Karena para pengunjung akan menemukan widget ini setelah mereka selesai membaca sebuah artikel. Dan jika mereka menyukai artikel yang dibaca, kemungkinan mereka tidak akan ragu untuk langsung mendaftarkan email nya menjadi pembaca berlanggnan di blog kita.

Sebelumnya saya juga telah membagikan Kotak Berlangganan Artikel di bawah posting. Namun widget tersebut tidak responsive, sehingga tidak akan cocok dengan template-template sekarang yang kebanyakan telah memiliki tampilan yang responsive. Oleh karena itu, kali ini saya akan membagikan pengganti widget tersebut, yaitu responsive email subscribe di bawah posting.

Responsive Email Subscribe di Bawah Posting

Widget ini berasal dari Responsive Email Subscribe di Footer Blog. Yang kemudian saya modifikasi lagi sehingga kita dapat memasangnya di bagian posting serta memiliki tampilan yang berbeda. Namun kamu tetap bisa dengan mudah melakukan personalisasi pada widget ini, sehingga memiliki tampilan yang cocok dengan blog yang kamu miliki. Terlebih dahulu silakan cek tampilan widget ini pada link berikut.

Memasang Responsive Email Subscribe di Bawah Posting

Untuk mendukung pemasangan widget ini, terlebih dahulu kamu perlu memasang ikon font awesome pada blog. Jika saat ini blog kamu telah terpasang ikon font awesome, namun script nya berbeda dengan yang akan saya berikan, maka kamu masih harus memasang font awesome yang satu ini. Karena jika script ikon font awesome berbeda, ada kemungkinan memiliki source yang berbeda juga. Maka silakan letakkan script berikut di bawah kode <head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian ada baiknya terlebih dahulu kamu mencadangkan template untuk berjaga-jaga dari hal-hal yang tidak diinginkan.

Memasang CSS

Pada dashboard Blogger silakan masuk ke menu Template kemudian klik Edit HTML. Dengan tombol ctrl + f, carilah kode ]]></b:skin> kemudian letakkan script CSS berikut ini di atas kode ]]></b:skin>.
/*** Tech Kshetra subscribe footer responsive Design Ends - www.techkshetra.com ***/
/*** Modified by B-Tutorial be responsive email widget below the post - www.b-tutorial.com ***/
#subscribe-bpost .container{width:600px;margin:0 auto;}
#subscribe-bpost{width:100%;height:160px;background:#f3f3f3;border:1px solid #DDDDDD;}
#subscribe-bpost i{font-size:90px;margin-top:5px;float:left;margin-right:20px;margin-left:20px;color:#FE0000;}
#subscribe-bpost i:hover{
color:#333333;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-ms-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
}
#subscribe-bpost h3{color:#000000;margin-bottom:2px;font-weight:600}
#subscribe-bpost p{margin:0;line-height:20px;color:#333333;font-weight:300}
#subscribe-bpost form{float:left;margin:10px}
#subscribe-bpost form .inptfld{font-family:Open Sans;outline:none;border:none;font-size:15px;padding:10px;border-radius:3px;width:400px}
#subscribe-bpost form .subscribe-bpostbtn{font-famiy:open sans;outline:none;border:none;padding:10px;border-radius:3px;color:#fff;background:#FE0000;cursor:pointer;margin-left:10px}
#subscribe-bpost form .subscribe-bpostbtn: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-bpost form .inptfld {width: 400px; }
}
@media screen and (max-width : 1100px) {
#subscribe-bpost form .inptfld {width: 400px;}
}
@media screen and (max-width : 1000px) {
#subscribe-bpost form .inptfld {width:400px;}
}
@media screen and (max-width : 900px) {
#subscribe-bpost form .inptfld {width: 350 px;}
}
@media screen and (max-width : 800px) {
#subscribe-bpost p {display:none;}
#subscribe-bpost form .inptfld {width: 300px;}
#subscribe-bpost {height:110px;}
}
@media screen and (max-width : 700px) {
#subscribe-bpost form .inptfld {width: 250px;}
#subscribe-bpost {height:110px;}
}
@media screen and (max-width : 600px) {
#subscribe-bpost form .inptfld {width: 150px;}
}
@media screen and (max-width : 500px) {
#subscribe-bpost form .inptfld {width: 150px;}
#subscribe-bpost h3{margin-left:10px;}
#subscribe-bpost i {display:none!important;}
}
@media screen and (max-width : 400px) {
#subscribe-bpost form .inptfld {width: 95px;}
#subscribe-bpost form .subscribe-bpostbtn {padding:5px;}
#subscribe-bpost i {display:none!important;}
#subscribe-bpost {height:130px;}
}
@media screen and (max-width : 300px) {
#subscribe-bpost {display:none!important;}
#subscribe-bpost .container {width: 250px;}
}
/*** Modified by B-Tutorial be responsive email widget below the post - www.b-tutorial.com ***/
/*** Tech Kshetra subscribe footer responsive Design Ends - www.techkshetra.com ***/

Silakan ubah kode berlatar biru untuk menyesuaikan ukuran lebar widget dengan ukuran lebar bagian posting blog. Kemudian kode berlatar merah adalah untuk warna background widget, dan kode berlatar hijau adalah untuk warna border widget. Sedangkan kode berlatar kuning adalah warna tombol subscribe beserta hover nya, dan kode berlatar ungu adalah warna ikon mail beserta hover nya.

Untuk kode berlatar orange sendiri adalah untuk mengatur warna teks pada kata-kata pembujuk pengunjung untuk menjadi pembaca berlanggnan. Selebihnya kamu bisa melakukan personalisasi lain dengan lebih menuangkan kreatifitas pada script ini.

Memasang HTML

Setelah selesai memasang CSS dan melakukan personalisasinya, kemudian kita pasang script HTML di posisi widget ini akan di pasang. Kali ini kita akan memasang Responsive Email Subscribe di bagian Posting, tepatnya di bagian bawah posting. Maka hal pertama yang harus dilakukan adalah memahami elemen-elemen yang ada di bagian posting blog kamu.

Silakan buka salah satu artikel pada blog yang kamu miliki. Kemudian coba perhatikan ada tools apa di bagian bawah posting. Misalnya jika ada tools share (facebook, twitter, google+) button, maka kita harus mencari elemen share button tersebut.

Pada dasboard blogger silakan masuk ke menu Template kemudian klik Edit HTML. Dengan tombol ctrl + f silakan cari kode <data:post.body/>. Jika terdapat banyak kode tersebut, coba gunakan yang paling bawah. Kemudian cari elemen share button di bawah kode <data:post.body/>. Jika kamu telah menemukan elemen share button, maka kamu bisa memasang html Responsive Email Subscribe di atas elemen tersebut.

Namun jika kamu masih bingung dengan elemen apa yang terdapat di bagian bawah posting, pilihan terakhir coba kamu letakkan script berikut di bawah kode <data:post.body/> (yang paling bawah).
<!-- EmailSubscribe -->
<div id='subscribe-bpost'>
<i class='fa fa-envelope'/>
<h3>Berlangganan Artikel Melalui Email!</h3>
<p>Suka dengan artikel kami? Daftarkan email anda sekarang untuk mendapatkan artikel terbaru dari B-Tutorial</p>
<div class='container'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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-bpostbtn' type='submit' value='Subscribe Now!'/>
</form>
</div>
</div>
<!-- EmailSubscribe -->

Kemudian silakan ubah teks berlatar biru dengan kata-kata pembujuk untuk pengunjung blog agar menjadi pembaca berlanggnan di blog kamu. Sedangkan kode berlatar kuning silakan ubah dengan id feedburner blog kamu. Dan langkah terakhir klik Simpan template kemudian silakan lihat hasilnya.

Artikel terkait : Responsive Email Subscribe di Bawah Posting

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

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