Tạo Khung Đăng Ký Nhận Bài Viết Qua Email Có Hiệu Ứng Cho Blogspot

Xin chào các bạn sau một lúc ngồi xem các Blog khác thì mình thấy trên Blog ThnhF.Com có cái khung đăng ký khá đẹp lên mình đã View-Source về Share cho các bạn :))

Tạo Khung Đăng Ký Nhận Bài Viết Qua Email Có Hiệu Ứng Cho Blogspot

Các Bước Thực Hiện
Bước 1: Chèn CSS Sau đây vào trước ]]></b:skin>

.nhantheme{padding:10px;color:#FFEB3B;font-size:16px;font-weight:300;text-align:center}
#subscribe-box{width:100%;max-width:100%;margin:0 auto;height:auto;padding:20px;background:#2ECC71}
#subscribe-box{animation:colorchange 40s;-webkit-animation:colorchange 40s;background:#2ECC71}
@keyframes colorchange{0%{background:#1ABC9C}15%{background:#2ECC71}25%{background:#E74C3C}35%{background:#FF5722}45%{background:#2980B9}55%{background:#9C27B0}65%{background:#00BCD4}100%{background:#2C3E50}}
@-webkit-keyframes colorchange{0%{background:#1ABC9C}15%{background:#2ECC71}25%{background:#E74C3C}35%{background:#FF5722}45%{background:#2980B9}55%{background:#9C27B0}65%{background:#00BCD4}100%{background:#2C3E50}}
.subscribe-text{padding:20px;color:#FFFFFF;font-size:30px;font-weight:600;text-align:center;text-transform:uppercase}
.emailfield{padding:4%;padding-bottom:0}
.nhantheme{padding:10px;color:#FFEB3B;font-size:16px;font-weight:300;text-align:center}
#subscribe-box .emailfield input{background:#FFFFFF;color:#2196F3;padding:10px;margin-top:10px;font-size:16px;border:2px solid #EBEBEB;border-bottom:4px solid #EBEBEB;border-radius:0;width:100%;transition:all 0.4s ease-in-out;text-align:center;text-transform:uppercase}
#subscribe-box .emailfield input:focus{background:#fff;outline:none;color:#888}
#subscribe-box .emailfield .submitbutton{background:#FFEB3B;color:#E74C3C;font-weight:700;font-size:18px;border:none;border-bottom:4px solid #FF9800;outline:none;width:100%;cursor:pointer;transition:all 0.4s ease-in-out;margin-bottom:10px}
#subscribe-box .emailfield .submitbutton:active{outline:none;border:none;background:#D96A5D;color:#fff}
#subscribe-box .emailfield .submitbutton:hover{background:#27AE60;color:#fff}
.subscribe-social,.subscribe-social a{color:#FFFFFF}
.subscribe-social{display:block;text-align:center}
.subscribe-social p{margin-bottom:30px}
.icon-button{padding:10px 15px;color:#fff;text-decoration:none;}
.icon-button i{margin-right:3px}
.user{background:#fb8f3d}
.facebook{background:#578EE8}
.user,.facebook{border: 1px solid #ffffff;}
.subscribe-social a:hover {color: #000;text-decoration: none;}

Bước 2: Chèn Đoạn Code bên dưới vào nơi muốn hiển thị.
<div id="subscribe-box">
<p class='nhantheme'>NHẬN BÀI VIẾT MỚI</p>
<div class="emailfield">
<form action="https://feedburner.google.com/fb/a/mailverify?uri=NguyenLuongDuy" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Thanhfcom, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Tên của bạn&quot;;}" onfocus="if (this.value == &quot;Tên của bạn&quot;) {this.value = &quot;&quot;;}" type="text" value="Tên của bạn" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Địa chỉ email&quot;;}" onfocus="if (this.value == &quot;Địa chỉ email&quot;) {this.value = &quot;&quot;;}" type="text" value="Địa chỉ email" />
<input name="uri" type="hidden" value="thanhfcom" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="ĐĂNG KÝ" />
</form>
</div>
<div class='subscribe-social'>
<p>Subscribe Nguyễn Lương Duy Blog</p>
<a class="icon-button user" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=7928173344458320077" rel="nofollow" target="_blank" title="Follow Blog"><i class="fa fa-user"></i><span>Follow</span></a>
<a class="icon-button facebook" href="https://www.facebook.com/WhoAm1.info" rel="nofollow" target="_blank" title="Facebook Share"><i class="fa fa-facebook"></i><span>Facebook</span></a>
</div>
</div>

Lời Kết

Chắc các bạn đã biết cách sửa HTML lên mình cũng không dài dòng nhé. Bạn nào thắc mắc gì thì cứ Comment mình sẽ trả lời nhé!
Chúc Các Bạn Thành Công!
View-Source: Đinh Công Thành


Cùng tham gia bình luận bài viết này nhé!

Loading...