Hộp Theo dõi với hiệu ứng Explode cho Blogger

Subscribe box with Explode Effect for Blogger

Hộp Theo dõi hay Subscribe box là một tiện rất hữu ích nhằm giúp độc giả theo dõi và cập nhật được các tin tức, bài viết mới trên website của bạn qua email đã đăng ký. Hôm nay Iris Tips xin chia sẻ cho các bạn một Hộp Theo dõi với hiệu ứng Explode khá đẹp mắt. Các bạn theo dõi bài viết bên dưới nhé.

• DEMO

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

/* Feedform by Iris Tips*/
#feedform{width:100%;margin:10px auto 30px;}
#feedform input[type="text"],#subscribefeedform input[type="submit"]{font-family:Open Sans;font-size:14px;width:80%;padding:15px;box-sizing:border-box;-moz-box-sizing:border-box;border:none;-moz-border-radius:3px;border-radius:3px}
#feedform input[type="text"]{background:white;margin:0 0 10px;border-bottom:1px solid #FF0202}
#feedform input[type="text"]:focus{outline:none}
#feedform input[type="submit"]{background:#FF022D;color:white;cursor:pointer;padding:17px;width:80%;border:none}
#feedform input[type="submit"]:hover{background:#D74345}
#feedform input[type="submit"]:active{background:#D74345}
#feedform input[type="submit"]:focus{outline:none}
#feedform [placeholder]:focus::-webkit-input-placeholder{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transform:translate(300px,0);-moz-transform:translate(300px,0);-ms-transform:translate(300px,0);-o-transform:translate(300px,0);transform:translate(300px,0);opacity:0}
.subscribe-content{text-align:center;width:100%}
.subscribe-content h4{-webkit-animation:2s explode_title infinite;animation:2s explode_title infinite;font-size:40px;font-weight:400;text-align:center;text-transform:uppercase;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);width:100%;color:#FF022D;line-height:70px}
@-webkit-keyframes explode_title{10%{-webkit-transform:scaleY(0.2);transform:scaleY(0.2);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}20%{-webkit-transform:scaleY(1.3);transform:scaleY(1.3);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}30%{-webkit-transform:scaleY(0.7);transform:scaleY(0.7);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}40%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}}
@keyframes explode_title{10%{-webkit-transform:scaleY(0.2);transform:scaleY(0.2);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}20%{-webkit-transform:scaleY(1.3);transform:scaleY(1.3);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}30%{-webkit-transform:scaleY(0.7);transform:scaleY(0.7);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}40%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 bottom 0;transform-origin:0 bottom 0}}
.box-shadow{box-shadow:0 0 0 1px rgba(0,0,0,.1)}

2Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn HMTL bên dưới vào

<div class='box-shadow'>
<div class='subscribe-content'>
<h4 class='fa fa-angle-double-down'></h4>
NHẬN THÔNG BÁO BÀI VIẾT MỚI QUA EMAIL
<form action='//feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=IrisTips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input placeholder='Tên của bạn' type='text'/>
<input class='textarea' name='email' placeholder='Địa chỉ email' type='text'/>
<input name='uri' type='hidden' value='IrisTips'/><input name='loc' type='hidden' value='en_US'/>
<input class='hl-emailsubmit' type='submit' value='Đăng ký'/>
  </form><br/>
</div>
</div>

3Lưu ý:
- Để hiện được biểu tượng với hiệu ứng Explode bạn phải chèn thêm Font Awesome vào blog của mình
- Thay IrisTips trong đoạn code trên thành ID Feedburner của bạn

Xem thêm: Hướng dẫn sử dụng thư viện Font Awesome

Xem thêm: Cách tạo Feedburner ID

Xem thêm: Thiết lập Feedburner để nhận Đăng ký bài viết qua Email

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm