Blogger

Tạo Khung SUBSCRIBE Đẹp Cho Blogspot

Hôm nay Hùng Coder Blog chia sẽ cho mọi người một tiện ích mới cho mọi người. Thủ thuật này khá đơn giản cho mọi người lại có bố cục đơn giản đẹp :D Qua hình ảnh bên trên các bạn cũng thấy nó đơn giả…

Hung.Pro.VN

Developer Windows

---

• 15/03/2018
• Views

• #Blogger
• #CSS
• #HTML
• #Javascript

Hôm nay Hùng Coder Blog chia sẽ cho mọi người một tiện ích mới cho mọi người. Thủ thuật này khá đơn giản cho mọi người lại có bố cục đơn giản đẹp :D

Qua hình ảnh bên trên các bạn cũng thấy nó đơn giản như thế nào rồi chứ :v. Không cầu kỳ phức tạp
như những khung đăng ký theo dõi khác :D. Và bên dưới là full đoạn code cho ai muốn sữ dụng

<style>
#wp-subscribe { padding:15px; background: #ffffff; }
#wp-subscribe h4.title { font-size:18px; color:#e8503c; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 0;margin: 10px;}
#wp-subscribe h4.title span {display: inline-block; font-size: 35px; margin-top: 10px;}
#wp-subscribe p { color: #000000; margin: 0; text-align: center; }
#wp-subscribe p.text { margin: 15px 0; opacity: 0.8;font-size: 16px; }
#wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height:60px; }
#wp-subscribe .email-field {}
#wp-subscribe input.email-field {color: #000000;background: #ffffff;border-style: solid;border-color:#e8503c;border-width: 3px;}
#wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::input-placeholder { color: transparent !important }
#wp-subscribe input.submit {background:#e8503c; color: #fff; margin-top:10px; font-size: 20px; font-weight: 900; cursor: pointer;}
#wp-subscribe p.footer-text { margin-top: 10px; font-size: 12px; }
</style>

<div class="wp-subscribe no-name-field" id="wp-subscribe">
<h4 class="title">Get more nice stuff <br /> <span>in your inbox</span></h4>
<p class="text">instantly by Subscribing to us. So you will get email everytime we post something new here</p>

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=USER_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1"> <input class="email-field" type="text" value="" placeholder="Enter email id here..." name="email" /> <input type="hidden" value="USER_NAME" name="uri" /><input type="hidden" name="loc" value="en_US" /> <input class="submit" name="submit" type="submit" value="Subscribe Now" /></form>

<div class="clear"></div>
<p class="footer-text">We guarantee you won't get any other SPAM</p>
</div>
</div>

Các bạn chỉ cần bỏ đoạn code vào phần bạn muốn nó hiển thị thế là xong :D và bạn chỉ cần thay đỗi những phần mình bôi đỏ trên code thành tên FEED của các bạn vậy là xong :D
Đơn giản quá phải không mọi người :v ai cần thì sữ dụng nhé.

DEMO BÊN PHÍA TAY TRÁI CỦA MỌI NGƯỜI

Previous post

Tạo Khung SUBSCRIBE Đẹp Cho Blogspot

Next post

Tạo Khung SUBSCRIBE Đẹp Cho Blogspot

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article