Đăng ký theo dõi Blog hay Website sẽ giúp những đọc giả ít có thời gian online nhận được thông tháo khi Blog hay Website đó có bài đăng mới qua email của họ.
Hôm trước mình có chia sẻ với các bạn Widget đẹp cho tiện ích theo dõi qua email kết hợp mạng xã hội cho blogspot. Hôm nay mình chia sẽ thêm với các bạn một dạng thông báo kêu gọi đăng ký theo dõi qua email khác đó là dạng Popup.
Popup là gì?
Popup là dang cửa sổ bật lên khi đọc giả truy cập vào Blog hay Website của cac bạn, còn đi sâu hơn Popup là gì? hay Popup quảng cáo là gì? thì các bạn có thể tìm hiểu trên Google nhé 😊.
Để tránh gay phiền hà cho đọc giả
Popup mình chia sẻ hôm nay chỉ xuất hiện ở góc dưới bên phải màn hình chứ không nằm án ngử giữa màn hình như các popup quảng cáo trên một số Website khác.
Cách làm:
</body>, lưu lại thế là xong.<!--Popup theo
dõi blog-->
<style>
.banner-noti-browser
{
position: fixed;
z-index: 333;
bottom: 12px;
right: 15px;
width: 350px;
height: 200px;
border-radius: 8px;
box-shadow: 0 2px
10px 0 rgba(0, 0, 0, 0.5);
background-image:
linear-gradient(to bottom, rgba(43, 119, 190, 0.94), rgba(19, 66, 137, 0.94));
}
.banner-noti-browser__group
{
display: flex;
margin-top: 28px;
margin-bottom: 15px;
padding: 0 12px;
}
.banner-noti-browser__group
> div {
flex-basis: 30%;
}
.banner-noti-browser__group
> div > img {
height: 74px;
margin: auto;
display: block;
}
.banner-noti-browser__title
{
flex-basis: 70%;
font-size: 19px;
color: #ffffff;
}
.banner-noti-browser__group-btn
{
padding: 10px;
}
.flx-al-c,
.item-setting-action, header {
align-items: center;
}
.banner-noti-browser__group-btn
> .button {
flex-basis: 35%;
color:
#ffffff!important;
font-size: 17px;
line-height: 17px;
font-weight: 500;
height: 37px;
border-radius: 8px;
margin: auto;
white-space: nowrap;
}
.button-default:hover
{
color: white;
background-color:
#0068ff;
}
.button-default {
color: #0068ff;
background-color:
#45beea;
border: 1px solid
#45beea;
}
.button-medium {
font-size: 14px;
padding: 4px 10px;
}
.button {
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.banner-noti-browser__group-btn__cancel
{
border-color:
rgba(255, 255, 255, 0.4);
background:
transparent;
color: rgba(255,
255, 255, 0.9);
}
.clickable,
.txt-clickable, .chat-message__actions__btn, .chat-resend,
.sticker-selector__menu__item, .slideshow__bottom__dot {
cursor: pointer;
-webkit-app-region:
no-drag;
}
button, input,
optgroup, select, textarea {
font-family:
inherit;
font-size: 100%;
}
.flx, .snippet,
.item-setting-action, header, .item-setting, .chat-info-general__action__item,
.chat-info-general__section__header, .group-setting, .card, .card-content,
.modal, .tab-content {
display:
-webkit-flex;
display: flex;
flex-flow: row
nowrap;
}
img.shake-image {
/* Start the shake animation and make the
animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start
again */
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px)
rotate(0deg); }
10% { transform: translate(-1px, -2px)
rotate(-1deg); }
20% { transform: translate(-3px, 0px)
rotate(1deg); }
30% { transform: translate(3px, 2px)
rotate(0deg); }
40% { transform: translate(1px, -1px)
rotate(1deg); }
50% { transform: translate(-1px, 2px)
rotate(-1deg); }
60% { transform: translate(-3px, 1px)
rotate(0deg); }
70% { transform: translate(3px, 1px)
rotate(-1deg); }
80% { transform: translate(-1px, -1px)
rotate(1deg); }
90% { transform: translate(1px, 2px)
rotate(0deg); }
100% { transform: translate(1px, -2px)
rotate(-1deg); }
}
</style>
<div
class='banner-noti-browser'>
<div
class='banner-noti-browser__group'>
<div>
<img
class='shake-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwZ2QUfGR8iAluxgCLFKbmc1jd7Am-mufGr_fAHSwbCu2fQG3sjHj2aSBaBnGw55AwEAEXStj6H3MD5PTQYjfGPE0d6IEtDch-0hz1G9kA3Q_1T4JSptTj19kudCRfRx_YMCogzAw583J/s0/chuong-thong-bao.png'/>
</div>
<span
class='banner-noti-browser__title'>
Đừng bỏ lỡ thông tin
hữu ích dành cho bạn. Bật ngay thông báo qua Gmai!</span>
</div>
<div class='flx
flx-al-c banner-noti-browser__group-btn'>
<button
class='button button-default button-medium clickable
banner-noti-browser__group-btn__turn-on'>
<span><a
href='https://www.blogger.com/follow.g?blogID=7352238635556498134'
style='color:#ffffff'>Bật thông báo</a></span></button>
<button
class='button button-default button-medium clickable
banner-noti-browser__group-btn__cancel' id='longanit'>
<span>Để
sau</span></button>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
window.onload = function(){
$('#longanit').click(function(){
$('.banner-noti-browser').fadeOut(500);
})
};
//]]>
</script>
<!--hết popup theo dõi blog-->
Cách xác định ID Blog:
Facebook