Widget Theo Dõi Qua Email Flat UI Cho Blogger

Theo dõi qua email là một trong những tính năng rất quan trọng giúp bạn giữ được rất nhiều lượng khách truy cập. Công dụng của nó là tự động báo tin cho khách đã đăng ký khi có bài đăng mới, từ đó khách truy cập sẽ trở lại website của chúng ta. Trước đây mình có chia sẻ tiện ích theo dõi qua email kèm theo và các mạng xã hội thông dụng mà mình đang sử dụng, và hôm nay xin tiếp tục chia sẻ với các bạn một tiện ích theo dõi qua email với thiết kế flat ui và cấu trúc đơn giản trông rất chi là đẹp.

Widget Theo Dõi Qua Email Flat UI Cho Blogger

Widget Theo Dõi Qua Email Flat UI Cho Blogger

Đăng nhập vào Blogger >> Bố cục >> Thêm tiện ích HTML

Widget Theo Dõi Qua Email Flat UI Cho Blogger

dán đoạn mã sau đây vào phần nội dung
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='kslz-emailsubsocial'>
              <div class='heading'>
               Theo dõi qua email
              </div>
                 <p>Đăng ký bằng email của bạn để nhận được tin mới nhất từ chúng tôi.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kslzonevn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Tên của bạn' />
               <input type='text' name='email' placeholder='Email của bạn' />
               <input type="hidden" value="kslzonevn" name="uri"/>
               <input type="hidden" name="loc" value="vi_VN"/>
                        <input value="Đăng ký ngay!" class="button" type="submit" />
              </form>
             </div>
             </div>

 <style type='text/css'>
 #kslz-emailsubsocial {
 width: 300px;
 height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#kslz-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#kslz-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#kslz-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#kslz-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#kslz-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#kslz-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#kslz-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
</style>
tới đây các bạn thay thế đoạn bộ thay kslzonevn thành id feedburner của bạn và lưu lại.

Đây là một tiện ích được làm bằng CSS3 rất đơn giản và đẹp, với phong cách flat design thì trông rất dễ nhìn và có phần nào đó khá là sang trọng. Rất mong rằng tiện ích này giúp tăng được lượng người theo dõi từ khách truy cập trên blog của bạn. Mọi thắc mắc và ý kiến hoặc có nhu cầu chỉnh sửa gì đó về tiện ích này thì các bạn hãy để lại bình luận ở dưới.

9 bình luận

  1. avatar says

    lúc 10:59 8 tháng 7, 2014

    mình thay hai ID màu vàng bằng nick gmail của mình thì bị lỗi này
    The feed does not have subscriptions by email enabled
    giờ sao ta??

  2. avatar says

    lúc 11:11 8 tháng 7, 2014

    Không phải là nick Gmail bạn ơi :)) ID của Feedburner bạn ạ.

  3. avatar says

    lúc 01:04 9 tháng 9, 2014

    Widget nhìn khá đẹp, mình đã áp dụng (có edit một ít) thành công. Blog của mình http://thuvien123.blogspot.com/ bạn góp ý thêm cho mình nhé, mà có cách nào để nó không đẩy mail vào "thư rác" không bạn :)

    Cảm ơn bài viết của bạn.

  4. avatar says

    lúc 09:41 9 tháng 9, 2014

    Mail vào thư rác từ biểu mẫu liên hệ thì chắc là bạn đánh dấu spam nó rồi, thử vào 1 thư đó rồi chọn "Không phải spam" xem thư tiếp theo nó có vào đó không. Còn không thì mình chịu rồi đây :D

  5. avatar says

    lúc 10:34 9 tháng 9, 2014

    Vì mình dùng e-mail của Yahoo và một số mail khác để test và mail kích hoạt nó vào hộp thư rác, giờ thì mình đã ghi chú luôn vào nội dung mail kích hoạt luôn rồi, cảm ơn bạn vì những bài viết hữu ích :D

  6. avatar says

    lúc 18:38 10 tháng 2, 2015

    cảm ơn nhé, mình làm thành công cho harrykhangblog.com của mình rùi :))

  7. avatar says

    lúc 07:58 19 tháng 5, 2015

    hay lắm mình đã áp dụng thành công!
    www.nhatthienkt.net

  8. avatar says

    lúc 23:27 23 tháng 11, 2015

    Cái này gio feedburner của bạn chưa active :D

  9. avatar says

    lúc 23:28 23 tháng 11, 2015

    Mình thấy blog của bạn dùng widget email của mailchip

    Bạn có thể hướng dẫn được được không, Mình thấy qua feedbuner phải gõ capcha hơi phiền cho khách

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.