Khung đăng ký bài viết với hiệu ứng đẹp bằng CSS cho Blogspot

khung dang ky bai viet voi hieu ung dep bang css cho blogspot

Khung đăng ký bài viết là một tiện ích rất hay và hữu ích giúp bạn có thể kết nối với người đọc thông qua việc giúp người đọc có thể cập nhật được những bài viết mới của bạn thông qua địa chỉ Email.

Do đó, mình sẽ chia sẻ với các bạn một kiểu khung đăng ký bài viết rất đẹp với hiệu ứng kèm theo vui mắt giúp thu hút ánh nhìn của người đọc.

Bạn có thể xem DEMO ở bên dưới để xem khung đăng ký này trông như thế nào nhé và tiện thể hãy đăng ký để ủng hộ mình nhé!

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Khung đăng ký bài viết đẹp

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>, sau đó nhấn vào nút Lưu chủ đề.

.subscribe-wrapper {border:1px solid #ccc; border-radius:5px; text-align:center; width:400px; margin:0 auto; padding:40px}
.fa-heart {width:100%; color:#d20; font-size:40px; text-align:center; -webkit-animation:2s explode_title infinite; animation:2s explode_title infinite; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
#subscribe-form{width:100%; margin:10px auto}
#subscribe-form input[type="text"] {width:100%; border:none; box-sizing:border-box; -moz-box-sizing:border-box; padding:15px 15px 5px 15px}
#subscribe-form input[type="text"] {background:#fff; margin:0 0 20px 0; border-bottom:1px dashed #d20}
#subscribe-form input[type="text"]:focus {outline:none}
#subscribe-form input[type="submit"] {background:#d20; color:#fff; cursor:pointer; padding:10px; margin:10px 0 0 0; width:100%; border:none; border-radius:5px; font-weight:700}
#subscribe-form input[type="submit"]:hover {background:#fff; color:#d20; border:1px solid #d20}
#subscribe-form input[type="submit"]:active {background:#d74345}
#subscribe-form input[type="submit"]:focus {outline:none}
#subscribe-form [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}
@-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}}
@media only screen and (max-width: 500px){.subscribe-wrapper{width:100%}}

Bước 3. Bây giờ, bạn hãy sao chép đoạn mã HTML hiển thị dưới đây vào vị trí mà bạn mong muốn.

<div class='subscribe-wrapper'>
<i class='fa fa-heart'></i>
<h4>ĐĂNG KÝ NHẬN BÀI VIẾT MỚI QUA EMAIL</h4>
<form action='//feedburner.google.com/fb/a/mailverify' id='subscribe-form' method='post' onsubmit='window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=SocbayBlogs&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 name='email' placeholder='Email của bạn' type='text'/>
<input name='uri' type='hidden' value='SocbayBlogs'/>
<input name='loc' type='hidden' value='en_US'/>
<input type='submit' value='ĐĂNG KÝ'/>
</form>
</div>

(*) Bạn hãy thay SocbayBlogs (có 2 vị trí) trong đoạn mã HTML ở trên thành ID Feedburner của bạn nhé!

Chúc bạn thành công!