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

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é.

<script src='//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>

<script type='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 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=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

Lời kết

Chúc các bạn một ngày vui vẻ.