Tạo hộp theo dõi qua Email với hiệu ứng EXPLODE cho Blogger

Chào các bạn :D
Hôm nay Mạnh Cường Blog xin gửi tới các bạn một thủ thuật làm sao để có một widget nhận thông báo với hiệu ứng đẹp mắt cho Blogger

Vậy hộp đăng kí nhận tin có tác dụng gì với Blogger ?

Hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger là một thủ thuật blog nâng cao và cực kỳ chuyên nghiệp. Ấn tượng đậm nét cho blog của bạn khi người dùng nhìn vào, mang dáng dấp mạnh mẽ và cực ký quý phải, nổi bật lên hẵn toàn trang web, và đó chính là điều gây chú ý với người dùng internet để họ nhập email nhận bản tin.

Sau đây là cách thực hiện.

B1. Vào Blogger -> Mẫu -> Chỉnh sửa HTML và chèn CSS sau 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)}

B2. Vào Bố Cục -> Thêm tiện ích -> HTML và dán đoạn code sau vào trong đó.

 <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>

Lưu lại là xong :D

Tổng kết.

Các bạn thấy thế nào ? hiệu ứng của nó đẹp chứ nếu đẹp Share cho mình nhé ^^

Công Cụ TEST Thử CODE JS CSS HTML Trước Khi Coppy

Công Cụ TEST CODE