Tạo Popup Thông Báo Theo Dõi Bài Viết Cho Blogspot Cực Chất

LongAnIT 11/29/2019
Popup Thông Báo Theo Dõi Bài Viết Cho Blogspot
Popup Thông Báo Theo Dõi Bài Viết Cho Blogspot

Khi truy cập vào một số trang web trên mạng chúng ta hay gặp phải cái thông báo với Style Popup hiện ra nằm ở góc phải màn hình. Cái Popup này được viết bằng code CSS, HTML, Java Script mục đích của Popup tùy vào người viết code. Trong bài viết hôm nay longanit xin chia sẻ cho các bạn code tạo thông báo theo dõi bài viết cho Blogspot để khi có bài mới nó sẽ hiện thông báo tự động cho những người đã nhấn Follow bạn.

Bước 1: Chúng ta cần thư viện Jquery

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Chú ý: Nếu trong template của bạn đã có sẵn jquery bạn có thể bỏ qua bước này nhé

Bước 2: Dán toàn bộ đoạn code bên dưới vào trước thẻ đóng </body>

<style>
.banner-noti-browser {
position: fixed;
z-index: 333;
bottom: 12px;
right: 15px;
width: 372px;
height: 186px;
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: 47%;
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;
}
</style>
<div class='banner-noti-browser'>
<div class='banner-noti-browser__group'>
<div>
<img src='https://zalo-chat-static.zadn.vn/banner-browser.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 tin nhắn!</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 style='color:#ffffff' href='https://www.blogger.com/follow.g?blogID=7991979955686534481'>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[
$('#longanit').click(function(){
$('.banner-noti-browser').fadeOut(500);
})
//]]>
</script>
Nhớ chình sửa  đường link theo dõi lại nhé. Phần blogID mình đã tô đậm màu đỏ bạn sửa lại thành blogID của trang bạn nhé. Sau đó save Template và tận hưởng thành quả thôi.

2 comments

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây