TẠO HỘP THÔNG BÁO TRƯỢT DỌC CHO BLOGSPOT

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

Nguồn : Wee2k Blog

TẠO HỘP THÔNG BÁO TRƯỢT DỌC CHO BLOGSPOT

Related Posts

2 nhận xét