Popup Thông Báo Theo Dõi Bài Viết Cho Blogspot giống Zalo

Hiện tại các website trên mạng sử dụng popup kiểu này khá là nhiều style nó được tùy chỉnh lại khá giống popup ZALO khi bạn login vào. Code  được viết bằng CSS, HTML, Java Script rất nhỏ gọn không làm nặng web khi tải trang. việc tùy chỉnh code cũng cực kỳ dễ dàng. 

Thông Báo Theo Dõi Bài Viết Cho Blogspot

Trong bài viết hôm nay it269 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.

CÁC BƯỚC THỰC HIỆ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: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML. 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=7755359026668141789'>Bật thông báo</a></span></button>

<button class='button button-default button-medium clickable banner-noti-browser__group-btn__cancel' id='it269.blogspot.com'>

<span>Để sau</span></button>

</div>

</div> <script type='text/javascript'>

//<![CDATA[

$('#it269.blogspot.com').click(function(){

$('.banner-noti-browser').fadeOut(500);

})

//]]>

</script>

Bước 3: Chỉnh sửa đường link theo dõi bằng cách trong phần blogID có một dãi số dài ngoằng tôi đã tô đậm màu đỏ bạn sửa lại thành blogID của trang bạn là xong. Chúc các bạn thành công!