Hộp Theo Dõi Phong Cách Phẳng Cho Blogger

How to add a Awesome Flat Style Feedburner box For Blogger

Tính năng

- Phong cách thiết kế phẳng (Flat UI) hiện đại.
- Được xây dựng trên mã nguồn feedburner gốc, linh hoạt trong việc sử dụng.
- Responsive design có thể tương thích dễ dàng với chiều rộng các sidebar khác nhau của mỗi blog.
- Dễ dàng thay đổi màu sắc.
- Sử dụng hiệu ứng bundle gây thu hút với người đọc.

Thêm vào Blogger của bạn

Vào Bố cục >> Thêm tiện ích HTML/Javascript và thêm vào đoạn code sau

 <div class="bxperts-style"><div class="bxperts-strip"><form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=IrisTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br/><div class="bxperts-text"><b>Subscribe to our newsletter</b></div><br/><div class="info">Always free ! We hate spam as much as you do.</div><p><input type="hidden"type="text" style="width:140px" name="email"/></p><input type="hidden" value="bxperts" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="newsletter-bxperts" type="text" style="width:60%" name="email"/><br/><input type="submit" value="Subscribe" /></form></div><div style="float:right;font-size:12px;text-transform:uppercase;"><a href="http://goo.gl/KrQwNV">Get This</a></div><style>.bxperts-style{background: #FAFAFA;box-shadow: 0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */ 0 10px 0 -5px #eee, /* The second layer */ 0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */ 0 20px 0 -10px #eee, /* The third layer */ 0 20px 1px -9px rgba(0,0,0,0.15);width:90%;height:280px !important;}.bxperts-strip{width:100%;height: 10px;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgi-Nuup9ALvmxMga6oqlDKc1-sENMQPKpcUarw7wMrNWp3Ttqs3foZyurFYp_EeqLz6ShEp08bdesYaZphzyWh8f2DFSlJWZ9uFQMgCkUCp0tPTjnswgk_LxAfcwMN7qA9mhftgbSxud/s1600/subscribe-pattern.png") repeat-x;}.bxperts-text{font-size:20px !important;line-height:1.5em!important;text-transform:uppercase!important;color:#666666!important;text-transform: uppercase!important;font-family: 'Open Sans', sans-serif!important;}.newsletter-bxperts{border: none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw73P4l14kls1I2H6BkSuwgZTuxVcqCTua4r6jVnyuUWHe8-keQVatVGU0IQwDSJ9Gy5BvR7o2pRQfLCwdGG9RJ8Q83rt3nKQWDZvWECC7uFu5Y4CWO5iMYBJaaEe2Gf6y0ZR1yae-z09I/s1600/news-img.png) no-repeat left center #fff;width: 80%;height: 45px;font-family: 'Open Sans', sans-serif;font-size: 15px;font-weight: normal;color: #d4dadf;border-radius: 5px;outline: none;padding-left: 60px;margin-left: auto;margin-right: auto;border-style:solid;border-width:1px;}.newsletter-bxperts:focus {border-color:#333 !important; }input[type=submit] {background:#85C15D;padding-top:16px;padding-bottom:16px;padding-left:12px;padding-right:12px;color:#fff !important; border:0 none;border-radius: 5px;text-transform:uppercase;font-size:15px;margin-top:15px;}.info{font-size: 15px;font-family: 'Open Sans', sans-serif;color: #333;text-align: center;width: 80%;clear: both;margin-left: auto;margin-right: auto;margin-bottom:10px;}</style> 

Chỉnh sửa: IrisTips thành ID Feedburner của bạn.

• DEMO

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 mbx/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm