Tutorial blog yang akan saya bagikan kali ini adalah Cara Memasang Subscription Box Ala Arlina Design . Kotak ini berfungsi sebagai widget...
Tutorial blog yang akan saya bagikan kali ini adalah Cara Memasang Subscription Box Ala Arlina Design. Kotak ini berfungsi sebagai widget yang mempermudah pengunjung Blog untuk memperoleh informasi artikel terbaru dari blog Anda. Caranya pengunjung hanya mendaftarkan alamat E-mailnya yang masih aktif dan secara otomatis pengunjung akan mendapatkan informasi artikel terbaru Anda melaluli E-mailnya secara mudah dan gratis.
Cara Memasang Subscription Box Ala Arlina Design
Langsung saja, di sini Anda hanya perlu mengikuti langkah-langkah sederhana berikut ini.
1. Buka Blogger > Template > Edit HTML
2. Tambahkan kode di bawah ini di atas kode ]]></b:skin> atau </style>
/* 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%;}Untuk warna dan sebagainya bisa Anda edit kembali sesuai selera
3. Selanjutnya tambahkan markup di bawah ini bebas diantara tag pembuka <body> dan tag penutup </body>. Misalnya seperti blog ini saya tambahkan di bagian Footer-wrapper
<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=BloggerQwords' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=BloggerQwords', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='BloggerQwords'/><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>
</div>Ganti semua kode yang ditandai BloggerQwords dengan id feedburner blog Anda
4. Setelah itu simpan template dan lihat hasilnya.
Demikian tutorial tentang Cara Memasang Subscription Box Ala Arlina Design. Terima kasih dan semoga bermanfaat.
