Subscribe box theo phong cách Wordpress cho blog

Bài viết này mình sẽ chia sẻ một style nữa của Email Subscribe Box cho Blogger mang phong cách của Wordpress. Với thủ thuật này bạn sẽ có một khung đăng ký nhận bài mới miễn phí qua email đẹp giống như những blog trên nền tảng worpress. Các bạn có thể xem hình ảnh minh họa ở bên dưới:

Bạn cũng có thể xem demo trực tiếp theo link bên dưới:

» VIEW DEMO


Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts tại vị trí muốn hiển thị widget.
Bước 2: Dán đoạn code sau vào phần nội dung:

<!--WP Subscribe Box by kjmagic.blogspot.com-->
<div align="center" id="kjmagic">
<div id="kjsubscription" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="kjmagic-title-text" style="color: 000; font-size: 20px;">
Đăng ký nhận tin mới qua Email của bạn</h4>
<div id="kjmagic-sub-title-txt" style="color: 000; font-size: 14px;">
Đăng ký ngay để nhận bài mới hoàn toàn miễn phí qua Email của bạn</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KjMagic', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="kjmagic-subscriber-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Tên của bạn" /><br />
<input class="email" id="kjmagic_subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Email của bạn" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="KjMagic" /><input name="loc" type="hidden" value="en_US" /> <input id="kjmagic-submit-text" style="height: auto; padding: 5px 0;" type="submit" value="Đăng ký ngay hôm nay !" /></form>
</div>
</div>
<style type="text/css">>
#kjsubscription {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#kjsubscription p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#kjsubscription input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMkOS0M8uKcAXk8lvG8WuYlBan8Jo74PqXv8wz8vlVJnyAe8Zfmiok3RGnwx55CL70EDVYgZbOTBUvPwoDoq-UCXKBdCIZba6efB2dWf3clLejDZgVcMPs9wJFwSrodTP-HeuTdTJBKps/s1600/subscribe-name.png) no-repeat center right;}
#kjsubscription input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#kjsubscription input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqYD2gdotrQSAvWkN3EjhosSLlOcYvBv4d8B8OqqCU7YMc4HFU0voe7uvavsicFX9Wwx_4zin40XdCqBX9MKsFxu7XDZTQ2ggh9Vruo13J8OWQITBmFZ38teyR1gigvs9sINAtBcFk6qg/s1600/subscribe-email.png) no-repeat center right;}#kjsubscription input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#kjsubscription h4 {margin-bottom: 8px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#kjsubscription input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#kjsubscription input[type="submit"]:hover {color: #FFFC00;}</style>
<!--/WP Subscribe Box by kjmagic.blogspot.com-->

» Tùy chỉnh code:

• Chỉnh sửa những chỗ màu xanh thành ID Feedburner của bạn. Nếu trang của bạn chưa đăng ký feed bạn có thể xem hướng dẫn cài đặt và đăng ký miễn phí Tại đây.
• Có thể sửa những nội dung màu hồng theo ý thích sao cho phù hợp nhất với phong cách blog của bạn.

Chúc thành công !