Subscribe box phong cách Wordpress cho Blogger

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ước 1: Đăng nhập vào Blogger -> Bố cục ( Layout) -> 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

<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> #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/AVvXsEjfEKULvfSswLTRf4578vd_rpl1LWCp_2OItA86_Ove4oUG-WDAygrOTh7BnGr8H535b_83a2qYhh_tKlPTAfO5OdjzUgMfN8ynssy2y3g7u9zJ4resrBp5Jt3lHkvov80gsVbOs5VF60Xv/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/AVvXsEjkty5L1_KNfpUXcjZ4N3likShWEvvKvOdGGxjjouSXfR0WU7aWyW990Ny05q53PJJrjCCWcJuK0p4tmpMUhvEpese4YT4-usD_1SFgVytSKAJHRcDdOcPO-TLIPP2dCZZfaarryusiRdqn/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>

- Chỉnh sửa những chỗ màu đỏ thành ID Feedburner của bạn.

- Có thể sửa những chỗ màu xanh theo ý thích của bạn.