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

Đặng Tiến Sĩ Tác giả:
Xuất bản: Chủ Nhật, 3 tháng 3, 2019 -

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

Thích
Bình luận

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ