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

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.

Nhận xét

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể chọn cho mình một kiểu bình luận như bên dưới.

1. Bằng tài khoản Blogger
2. Bằng Tên/URL: Vui lòng nhập tên và Website của bạn nếu có
3. Bình luận với tư cách người dấu mặt

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Hướng dẫn triển khai AMP trên Blogspot

Đoạn code Javascript chống Ctrl + U và F12

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Hướng dẫn mở PORT Modem GPON H646EW Viettel

Lấy lại Windows Photo Viewer trên Windows 10 giúp xem ảnh nhanh hơn