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

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


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.