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

https://www.longanit.com/2019/11/tao-popup-thong-bao-theo-doi-bai-viet-cho-blogspot.html

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

Lê Hiền 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.

3 nhận xét:

Một số lưu ý khi bình luận

Tất cả bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.