Xin chào các bạn, Hôm nay mình sẽ hưỡng dẫn các bạn tạo hộp thông báo cố định trượt dọc theo website.


Cách làm rất là đơn giản :)))

Bước 1: Đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML > Đặt đoạn CSS dưới đây trên thẻ ]]></b:skin> hoặc </style>


/* BLANTER Notif Box Created by Idblanter.com - REUP BY WEE2K*/#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}@media screen and (max-width:680px){.notifbox:before{display:none}
.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}

Bước 2: Dán đoạn mã này vào sau thẻ <body> hoặc trước thẻ </body>

<div id='notif-wrapper'><a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a><div class='notifbox'>BỜM KHÙNG BLOGGER - BLOG CHIA SẺ THỦ THUẬT CÔNG NGHỆ MIỄN PHÍ, THỦ THUẬT HAY, PHẦN MỀM TIỆN ÍCH
</div></div>

Bước 3: Đặt JavaScript sau ngay trên mã </body>

<script type='text/javascript'> $(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});}); </script>

Nếu như blog bạn chưa có CSS ICON thì hãy đặt đoạn mã này vào trên thẻ </head>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Chúc các bạn thành công và tận hưỡng thành quả của mình khi làm ứng dụng này :)

DEMO bên tay trang của các bạn nhé ^^


أحدث أقدم

2 تعليقات

+ Hiện tại HungCoder.Com đang cập nhật giao diện cho trang blog này. Nên sẽ có một số lỗi xãy ra khi các bạn xem blog này.

  1. An Vũ16 سبتمبر 2017 في 3:30 ص

    Hay đấy bạn

    ردحذف
    الردود
    1. Bờm Khùng16 سبتمبر 2017 في 9:08 ص

      Cảm ơn bạn đã review bài viết này. ^^ bạn có thể sang trang nguồn mà m trích dẫn phía dưới để xem thêm nhiều bài viết hay nữa nhé (y)

      حذف

إرسال تعليق

+ Hiện tại HungCoder.Com đang cập nhật giao diện cho trang blog này. Nên sẽ có một số lỗi xãy ra khi các bạn xem blog này.