CÁCH TẠO EMAIL SUBSCRIPTION BOX CHO BLOGGER ĐƠN GIẢN VÀ ĐẸP MẮT

Trong bài viết này, mình sẽ giới thiệu tới các bạn widget Email Subscription Box cho Blogger đơn giản và đẹp mắt. Đây là widget Email Subscription Box được thiết kế theo phong cách Flat UI

Cách tạo Email Subscription Box cho Blogger đơn giản và đẹp mắt

Email Subscription Box rất quan trọng trong SEO Blogger bởi nó giúp bạn tự động gửi bài viết mới nhất tới người đọc qua email. Điều đó đồng nghĩa với blog của bạn sẽ có nhiều độc giả hơn, nhiều lượt xem bài viết hơn giúp tăng traffic nhanh chóng

EMAIL SUBSCRIPTION BOX CHO BLOGGER ĐƠN GIẢN VÀ ĐẸP MẮT

1. Đăng nhập vào Blog

2. Vào Bố cục (Layout)

3. Chọn Thêm Tiện ích (Add Widget)

4. Tạo 1 tiện ích HTML/Javarscip và chèn đoạn code phía dưới vào

<link href=’http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700′ rel=’stylesheet’ type=’text/css’/>

<div id=’byard-emailsubsocial’>
<div class=’heading’>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</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=Nguyentien‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”>
<input type=’text’ name=’name’ placeholder=’Your Name’ />
<input type=’text’ name=’email’ placeholder=’Your Email’ />
<input type=”hidden” value=”Nguyentien” name=”uri”/>
<input type=”hidden” name=”loc” value=”en_US”/>
<input value=”Sign Up Now!” class=”button” type=”submit” />

</form>
</div>
</div>

<style type=’text/css’>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-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);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-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;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-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;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
</style>

• Thay Nguyentien bằng Feedburner Username của bạn
• Thay các dòng in đậm còn lại bằng nội dung muốn hiển thị

Mong rằng blog của bạn sẽ có nhiều độc giả hơn với mẫu Email Subscription Box cho Blogger này