Blogger
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 > Đặ…
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>
Bước 2: Dán đoạn mã này vào sau thẻ <body> hoặc trước thẻ </body>
Bước 3: Đặt JavaScript sau ngay trên mã </body>
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>
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é ^^
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'></i><i class='material-icons blanterxE5CD'></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é ^^
Previous post
TẠO HỘP THÔNG BÁO TRƯỢT DỌC CHO BLOGSPOT
Related post
Hung.Pro.VN
Nhà thiết kế WebTôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...
Hay đấy bạn
Trả lờiXóaCả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)
Xóa