Membuat Subscribe Blog Keren Valid HTML5 Dan CSS3

Widget

Posted by: Admin On: 03/07/14

Membuat Subscribe Blog Keren Valid HTML5 Dan CSS3 sangatlah mudah untuk diterapkan, subscribe berguna untuk memfasilitasi para pengunjung untuk mendapatkan update terbaru blog anda kedalam email para pengunjung. Untuk yang tertarik widget ini silahkan anda ikuti langkah-langkah dibawah ini.

Yang pertama, untuk yang belum punya akun Feedburner silahkan daftar dulu di feedburner (gratis).
Setelah punya akun feedburner, lanjut ke tahap berikutnya.

• Masuk/login blogger.com
• Template lalu Edit HTML
• Lalu masukan CSS dibawah tepat diatas kode ]]></b:skin> atau </style>

/* Subscribe By Email */
#subscribe-css{padding:3px 0;background:#007EA8;}
.subscribe-wrapper{color:#fff;font-size:14px;line-height:20px;padding:1px
 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{clear:both;display:block;margin:10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#eee 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ElRECjD5xoj4PD63m_E3qAvDpKVP15SDqDDc2Fc7R6Rmsh5BQg71CSiIUhRKEdH9Na4dYbVVv9eA3-JVLxutqOCX5mknaQzGXJpNtXmLQs_76XGwzeEi3JWSW5gcdj-Hv82tQakqKoRe/s1600/sprites.png)
 no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 
40px;width:100%;border:none}
.subscribe-css-email-button{background:#4D4D4D;color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
.subscribe-css-email-button:hover{transition:all .3s ease-in;background:#666;border:none}

Lalu klik Simpan. Selanjutnya..

• Masih di Dashboard - Tata Letak
• Tambahkan Gadget
• Cari HTML/Javascript
• Lalu copy paste kode dibawah ini kedalam kotak html/javascript

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>Masukan email pada kolom di bawah ini, untuk mendapatkan update artikel dari <b>Template Tangerang</b> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=TangerangTemplate" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=TangerangTemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="TangerangTemplate"/><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="subscribe-css-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

Terakhir Simpan dan lihat hasilnya.

Ganti tulisan yang sudah saya blok dengan warna PINK ganti dengan nama blog dan untuk warna KUNING ganti dengan ID FEEDBURNER anda.

Kurang lebih seperti ini demonya.

Masukan email pada kolom di bawah ini, untuk mendapatkan update artikel dari Template Tangerang secara gratis.