Theo dõi bài viết qua Email (Follow by Email - FBE) là một tiện ích rất hay của blogspot sử dụng dịch vụ FeedBurner đẩy thông báo tới mail người dùng mỗi khi bạn xuất bản bài viết mới. Trong bài này tôi sẽ chia sẻ cho bạn mẫu FBE đẹp và chuyên nghiệp, hoàn toàn sử dụng HTML/CSS
Xem demo
Bài viết sử dụng FontAwesome 5, triển khai với hệ thống widget v2
1. Viết CSS
Đây là đoạn CSS cơ bản giống demo, bạn có thể tùy chỉnh thêm theo mong muốn của mình. Truy cập vào trang chỉnh sửa HTML và chèn code CSS sau
.fbe-icon {
text-align: center
}
.fbe-icon svg {
width: 50px;
height: 50px
}
.fbe-text {
text-align: center;
font-size: 17px;
color: #666
}
.fbe {
margin-bottom: 20px;
padding-bottom: 25px;
border-bottom: 1px solid #ccc
}
.fbe form {
margin-top: 20px;
padding: 0;
border: 1px solid #ccc;
border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative
}
.fbe form::before {
content: '';
display: inline-block;
position: relative;
top: 7px;
left: 15px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'></path></svg>") no-repeat
}
.fbe form .fbe-address {
border: 0;
outline: 0;
font-size: 15px;
width: calc(100% - 110px);
background: transparent;
display: block;
padding-bottom: 2px
}
.fbe form .fbe-submit {
display: inline-block;
width: 35px;
height: 35px;
line-height: 45px;
background: #008c5f;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 2px;
border: 0;
border-radius: 0 50px 50px 0;
cursor: pointer
}
.fbe-social {
display: table;
max-width: 100%;
margin: auto
}
.fbe-social a {
text-decoration: none;
cursor: pointer
}
.fbe-social a:hover i {
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px)
}
.fbe-social a i {
text-align: center;
display: inline-block;
border-radius: 30px;
background: #ccc;
margin: 0 7px;
width: 35px;
line-height: 35px;
height: 35px;
color: #fff;
-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4)
}
.fbe-social a i.f-facebook {
background: #3b5998
}
.fbe-social a i.f-twitter {
background: #1da1f2
}
.fbe-social a i.f-linkedin {
background: #0077b5
}
.fbe-social a i.f-youtube {
background: #ff0000
}
.fbe-social a i.f-instagram {
background: #833ab4
}Lưu mẫu lại
2. Mã HTML
Chèn code widget sau vào vị trí bạn muốn hiển thị (bắt buộc nằm trong b:section)
<b:widget id='FollowByEmail69' locked='false' title='Follow By Email' type='FollowByEmail' version='2' visible='true'>
<b:includable id='main'>
<b:include name='widget-title' />
<b:include name='content' />
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='fbe'>
<div class='fbe-header'>
<div class='fbe-icon'>
<svg fill='#008c5f' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z'/></svg>
</div>
<div class='fbe-text'>
Get the lastest articles every day
</div>
</div>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"'
method='post' target='popupwindow'>
<input autocomplete='off' class='fbe-address' expr:placeholder='data:messages.emailAddress + " ..."' name='email' required='' type='email' />
<button class='fbe-submit' type='submit'><svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='#fff'/></svg></button>
<input expr:value='data:feedPath' name='uri' type='hidden' />
<input name='loc' type='hidden' value='en_US' />
</form>
</div>
<div class='fbe-social'>
<a class='fbe-facebook' href='#'><i class='fab fa-sm fa-facebook f-facebook'/></a>
<a class='fbe-twitter' href='#'><i class='fab fa-sm fa-twitter f-twitter'/></a>
<a class='fbe-linkedin' href='#'><i class='fab fa-sm fa-linkedin f-linkedin'/></a>
<a class='fbe-youtube' href='#'><i class='fab fa-sm fa-youtube f-youtube'/></a>
<a class='fbe-instagram' href='#'><i class='fab fa-sm fa-instagram f-instagram'/></a>
</div>
</div>
</b:includable>
</b:widget>
Lưu mẫu lại.
Tiếp theo bạn chuyển sang phần Bố cục, nhấn F5, tìm đến widget vừa tạo, nhấn chỉnh sửa để blogger tạo link subscribe, tích chọn hiển thị tiện ích nếu như nó chưa được tích và lưu lại để kiểm tra thành quả
Đây là một tiện ích rất hay của blogger giúp bạn có thể thông báo nhanh chóng tới người dùng khi có bài mới, tránh phải dùng thêm các dịch vụ đẩy bài viết làm nặng trang
Bài viết không có gì phức tạp hi vọng hữu ích với bạn. Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên