Tạo popup thông báo theo dõi cho blogger

Vô tình lướt website gặp được cái Style Popup cực ngon này, nên edit về cho anh em sử dụng. Cái Popup này nhằm giúp cho mọi người có thể dễ dàng theo dõi Blogspot của bạn.

Các bước thực hiện

Nhớ khai báo thư viện Jquery vào nhé.

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

Dán code dưới đây lên trên thẻ đóng </body>

<scripttype='text/javascript'>
//<![CDATA[
// Code by Sĩ Ben - site: www.siblog.net
$('#exit-siben').click(function(){
$('.banner-noti-browser').fadeOut(500);
})
//]]>
</script>
<style>
.banner-noti-browser {
position: fixed;
z-index: 333;
bottom: 12px;
right: 15px;
width: 372px;
height: 186px;
border-radius: 8px;
box-shadow: 0 2px 10px0 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><astyle='color:#ffffff'href='https://www.blogger.com/follow.g?blogID=4245348994605119666'>Bật thông báo</a></span></button>
<button class='button button-default button-medium clickable banner-noti-browser__group-btn__cancel' id='exit-siben'>
<span>Để sau</span></button>
</div>
</div>

Nhớ edit đường link theo dõi lại nhé. Sau đó save Template và tận hưởng thành quả thôi.

Demo

Như hình Thumnail nhé :D

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait