Salah satu upaya agar blog mendapatkan banyak kunjungan adalah menari langganan pengunjung. Upaya tersebut bisa dilakukan dengan memasang widget Langganan melalui Email atau Email Subscribe. Memang blogger telah menyediakan kotak ini pada template bawaannya. Namun bila ingin tampilan ini lebih menarik dan membuat orang ingin langanan dengan setiap pos yang Anda terbitkan berikut solusinya.
Tampilan kotak ini saya dapatkan dari arlinadzgn.com. Kurang lebih tampilannya seperti berikut,
Anda bisa mengedit warna nantinya. Perhatikan nanti pada script yang saya berikat bagian color. Untuk mendapatka kode warna yang diinginkan bisa browsing di google dengan kata kunci 'HTML Color'. Ok mari kita mulai untuk cara memasang kotak langganan melalui email ini.
1) Seperti biasa masuklah ke akun blogger dan pilih Tema - Edit HTML. Kemudian cari tag ]]><b:/skin>. Tambahkan dibawah tag tersebut kode CSS dibawah ini. Jika kurang sreg dengan warna, silahkan edit warnanya dengan mengubah setiap bagian yang ada 'color'-nya.
2) Simpan template Anda. Kemudian ambil Tata Letak/Layout pada bilah kiri. Akan terbuka format tampilan halaman Anda. Pilih posisi dimana subscription email ini akan diletakkan. Mau di footer ataupun di sidebar kanan. Klik ' Add Widget' lalu ambil Follow by Email atau Ikuti Melalui Email. Nanti tampil sebuah URL simpan URL tersebut. Selanjutnya cancel saja.
3) Lalu klik Add Widget lagi, sekarang pilih HTML/Javascript. Tambahkan kode HTML di bawah ini pada kotak kosong tersebut. untuk URL FEED, Anda ganti dengan URL yang didapat pada langkah 2.
Tampilan kotak ini saya dapatkan dari arlinadzgn.com. Kurang lebih tampilannya seperti berikut,
1) Seperti biasa masuklah ke akun blogger dan pilih Tema - Edit HTML. Kemudian cari tag ]]><b:/skin>. Tambahkan dibawah tag tersebut kode CSS dibawah ini. Jika kurang sreg dengan warna, silahkan edit warnanya dengan mengubah setiap bagian yang ada 'color'-nya.
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.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:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;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:#37b185;}
#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%;}2) Simpan template Anda. Kemudian ambil Tata Letak/Layout pada bilah kiri. Akan terbuka format tampilan halaman Anda. Pilih posisi dimana subscription email ini akan diletakkan. Mau di footer ataupun di sidebar kanan. Klik ' Add Widget' lalu ambil Follow by Email atau Ikuti Melalui Email. Nanti tampil sebuah URL simpan URL tersebut. Selanjutnya cancel saja.
3) Lalu klik Add Widget lagi, sekarang pilih HTML/Javascript. Tambahkan kode HTML di bawah ini pada kotak kosong tersebut. untuk URL FEED, Anda ganti dengan URL yang didapat pada langkah 2.
<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='URLFEED' class='subscribe-form' method='post' onsubmit='window.open ('URLFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Submit'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Masukkan Emailmu'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div> Share Yuk
Related Posts
Loading...
No comments:
Post a Comment