Bạn có một Blogger và trên đó bạn chia sẻ những thông tin mà nhiều người quan tâm. Bạn muốn tạo một Popup thông báo bài viết mới để cho độc giả đăng ký và khi bài viết mới nó sẽ tự động gửi cho những người đã đăng ký Blogger của bạn thông qua Popup thông báo bài viết mới đấy
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 mình 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.
Cách xác định Blogger ID
Các bạn truy cập vào Blogspot.com sau đó các bạn nhìn lên URL của các bạn các bạn để ý thì sẽ thấy đoạn
https://draft.blogger.com/blogger.g?blogID=6281051630396913947#allpostsDãy số sau blogID đó sẽ là ID Blog của bạn, bạn copy dãy số đấy và thay vào ID trong đoạn mã trên
DEMO : TẠI ĐÂY
Xem thêm :Tại Đây
Blog Download Template Blogspot : Tại Đây
Blog Download Phần Mềm Free : Tại Đây
Blog Download Acapella : Tại Đây
Trang mã hóa URL : Tại Đây
Theo dõi trên
