Hôm nay mình sẽ hướng dẫn các bạn tạo nút Notify cực chất cho Blogspot. Code này mình lấy từ bên Star Cường nhé.
Bắt đầu thôi!!
 |
| Ảnh minh họa |
Các bước thực hiện
Bước 1. Các bạn thêm đoạn Css dưới đây vào blogger.
<!--Notify box-->Bước 2. Chèn đoạn code dưới đây vào chỗ mà bạn muốn hiển thị.
<style>
.icon-box{background-color:rgba(66,133,244,0.8);border-radius:100%;color:rgba(255,255,255,0.5);margin-right:8px}
.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
.notify-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;margin-top:10px;cursor:pointer;text-align:left;font-size:15px;letter-spacing:0.3px;font-family:roboto}}
.notify-info:hover{opacity:0.8;color:#138882}
.notify-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px;line-height:1.5;}
#notifybox{background:#fff;color:#333;font-size:13px;top:-1500px;right:150px;padding:20px;position:absolute;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:9998;transition:all .5s}
.closebox{background:none;border:none;position:absolute;top:0;right:0;cursor:pointer;font-size:18px;font-weight:700;color:#888;padding:4px 6px}
.minimizebox{background:none;border:none;position:absolute;top:-9px;right:20px;cursor:pointer;font-size:18px;font-weight:700;color:#888!important;padding:4px 6px}
.minimizebox:hover{color:rgba(254,109,70,0.9)!important}.closebox:hover{color:rgba(254,109,70,0.9)!important}
#myModal{position:absolute;top:-1550px;z-index:9999;transition:all .4s}
.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%)}
.modal-content{position:relative;background:#fff;background-clip:padding-box;outline:none;box-shadow:0 2px 5px rgba(0,0,0,.1);right:150px;padding:20px;position:fixed;width:320px;margin-top:-30px;margin-bottom:30px;}
.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5;color:#138882}
.modal-header .close{margin-top:-2px}
button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:transparent;border:0}
.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);}
.modal-title{margin:0;font-size:120%;font-weight:400;text-align:center;letter-spacing: 0.3px;}
.modal-body{position:relative;padding:0;text-align:left;min-height:150px;}
.modal-body p{line-height:1.5;letter-spacing: 0.1px;font-family: roboto;}
.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}
.btn-primary{background:#138882;color:#fff;border:0;display:table;width:100%;max-width:170px;position:relative;padding:12px 15px;font-size:90%;text-transform:uppercase;margin:auto;letter-spacing:1px;border-radius:5px}
.btn-primary:hover{background:#fff;color:#138882;box-shadow:0 0 5px rgba(81,203,238,0.7);}
.circle{padding:2px 6px;background:#138882;border-radius:100%;color:#fff;margin:0 15px 0 0;font-size:14px;font-weight:600;font-family:helvetica}
#overlay{background:transparent;z-index:9999;position:absolute;top:0;left:0;right:0;bottom:0;display:none}
.social-sec ul#social a.notify-box:hover{background-color:green}
li a.notify-box:after{text-align: center;position:absolute;content:'4';right:-5px;top:-5px;background:#f56954;color:#fff;padding:0;width:15px;height:15px;line-height:15px;border:2px solid #fff;border-radius:100%;font-size:80%;transform:scale(1.0);transition:all .3s ease;}
.social-sec ul li a.notify-box:hover:after{transform:scale(0.9)}
.social-sec .notify-box:before{content:"\f06b"}
.ani{animation:mation 2s ease-in infinite}
@keyframes mation{48%,62%{transform:scale(1.0,1.0)}50%{transform:scale(1.1,0.9)}56%{transform:scale(0.9,1.1) translate(0,-5px)}59%{transform:scale(1.0,1.0) translate(0,-3px)}}
</style>
<li id="notify"><a class="notify-box ani" href="#notify" onclick="document.getElementById('notifybox').style.top='50px';document.getElementById('count-box').style.display='none';"><span class="inv"></span></a></li>Bước 3. Vậy là được rồi nhưng chúng ta cần phải làm đẹp nó bằng các chèn đoạn code dưới vào trên phần mà bạn muốn hiển thị.
<div id='notifybox' style='position:fixed;right:76px;'>Vậy là xong rồi đấy còn các chữ maù đỏ thì các bạn biết làm gì rồi đó.
<div class='notify-info info' id='notify1' onclick='document.getElementById('myModal').style.top='80px';document.getElementById('overlay').style.display='block';'><i class='fa fa-info icon-box' style='padding: 10px 15px;'></i>Có gì mới trên Star Dũng Blog</div>
<div class='notify-info' id='notify2' onclick='window.open('/lienket');'><i class='fa fa-slideshare icon-box' style='padding: 10px;background-color:#ffa812;'></i>Đặt Liên Kết</div>
<div class='notify-info' id='notify3' onclick='window.open('https://www.facebook.com/');'><i class='fa fa-key icon-box' style='padding: 10px;background-color:#96d726;'></i>Liên Hệ Quảng Cáo - Báo Lỗi</div>
<div class='notify-info' id='notify4' onclick='window.open('/l');'><i class='fa fa-gift icon-box' style='padding: 10px;background-color:#fe6d46;'></i>Event Tri Ân Top Bình Luận</div>
<input class='closebox' onclick='document.getElementById('notifybox').style.top='-381px';document.getElementById('notify').style.display='none';' title='Đóng thông báo' type='button' value='×'/>
<input class='minimizebox' onclick='document.getElementById('notifybox').style.top='-381px';' title='Thu nhỏ thông báo' type='button' value='_'/>
</div>
Lời kết
Chỉ với một vài bước thôi thì mình đã có một nút Notify cực đẹp rồi đấy.Cảm ơn các bạn đã xem, chúc các bạn thành công.
Source: Star Cường IT