Hướng dẫn tạo box đăng ký nhận bài viết mới HTML5 và CSS3

Box nhận bài mới là widget cực kỳ cần thiết cho Web Master nó giúp tăng lượng độc giả trung thành với blog của bạn và tăng lượng visit tới blog của bạn nhiều hơn khi có bài viết mới ra lò, và Widget trên là HTML5 và CSS3 nên cực tốt cho SEO

Thêm Box nhận bài viết mới cho Blog/ Website

Thêm mã CSS sau vào trước thẻ ]]></b:skin>

/* Subscribe By Email By Tips24h.net */
#subscribe-css{padding:3px 0}
.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/AVvXsEjJlXiG5HoWG_kBiNxtaO6CXuFW6gl1jjlHv9Tf4jU9NvI0uTvLK_AnmqW4tyvVJj2XjbLo0-zMeJYogmEBkwEoePbVl49mGl1F7mvRMQBl5Gt6b0YR1qKp9o7u_NRLyX09_GGV71LT4aLX/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:#febdaf;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:#d12300;border:none}

Tiếp tục thêm mã HTML sau vào vị trí bạn muốn hiểu thị Box này

<div id="subscribe-css">
<div class="subscribe-wrapper">
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=tips24hdotnet" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=tips24hdotnet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="tips24hdotnet" /><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>

• Demo tại đây 
• Chú ý: Thay tips24hdotnet thành Feed mà bạn đã đăng ký trước đó.

nguồn:tips24h.net