Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với Star Dũng Blog.
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-->
<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>
Bước 2.  Chèn đoạn code dưới đây vào chỗ mà bạn muốn hiển thị.
<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;'>
<div class='notify-info info' id='notify1' onclick='document.getElementById(&#39;myModal&#39;).style.top=&#39;80px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;block&#39;;'><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(&#39;/lienket&#39;);'><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(&#39;https://www.facebook.com/&#39;);'><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(&#39;/l&#39;);'><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(&#39;notifybox&#39;).style.top=&#39;-381px&#39;;document.getElementById(&#39;notify&#39;).style.display=&#39;none&#39;;' title='Đóng thông báo' type='button' value='×'/>
<input class='minimizebox' onclick='document.getElementById(&#39;notifybox&#39;).style.top=&#39;-381px&#39;;' title='Thu nhỏ thông báo' type='button' value='_'/>
</div>
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 đó.

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.
Code by: Star Cường IT
37 bình luận
Tag
  • 37 bình luận
  • Mặt cười
  • Chèn ảnh
  • Mã hóa HTML
  • Lưu ý
  • Admin Panel
    1. tuyệt vời có demo ông đang xài đó à

      ReplyDelete
      Replies
      1. Cảm ơn bác <3 đúng rồi tôi đang xài đó

        Delete
    2. hiện tại ông đang chèn ở đâu

      ReplyDelete
      Replies
      1. Trên cùng bên tay phải đó :v

        Delete
    3. Replies
      1. caidit , sai cú pháp :v

        Delete
      2. Đặt liên kết mình trước nhé bạn

        Delete
    4. Always vào thăm nhưng mà vẫn chứ thấy Post mới :v há há :v

      ReplyDelete
      Replies
      1. Lười quá ấy mà bác, bác thông cảm <3

        Delete
      2. mình cũng lười đấy thôi ? :(

        Delete
    5. - bạn ơi bạn sửa tên liên kết lại nha Thanh Phú IT chứ ko phải Thạnh Phú IT

      ReplyDelete
    6. Chào anh :v đổi liên kết thành https://baolinhdesani.blogspot.com giúp em nhé :v cảm ơn anh ạ :v

      ReplyDelete
      Replies
      1. Có đổi đéo đâu :v em thấy link vẫn vậy mà bro ? :v

        Delete
      2. Rồi đó ổn chưa :v

        Delete
      3. sửa mô tả thành Người Viết Ngôn Tình

        Delete
  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3
  • Chức năng này hiện chưa khả dụng, bấm vào đây để sử dụng tạm.
  • Hướng dẫn bình luận

    Chèn chữ in đậm: Chữ in đậm

    Chèn chữ in đậm: Chữ in nghiêng

    Chèn ảnh: [img]Link Ảnh[/img]


    Một số lưu ý khi bình luận

    Không đăng bình luận có nội dung khiêu dâm, 18+

    Không đăng bình luận có liên quan đến chính trị, nhà nước.

    Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

    Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

    Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

    Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

    Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

    Được đăng bình luận có liên quan đến nội dung bài viết.

    Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

    Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.

    Bấm vào đây để xem chi tiết hơn nội quy trên Blog.

  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!