Một vài hình ảnh demo:
loading...
Bắt tay vào làm luôn nhé 😸😸😸Bước 1: các bạn tìm đoạn code : body#layout , sau đó thêm đoạn code sau vào sau đoạn code cuối cùng có body#layout nhé:
body#layout #search-icon,body#layout #nav-search, body#layout #notifybox{display:none}
Bước 2: xong bước trên chưa ạ? Xong rồi thì làm bước tiếp theo, chưa làm được thì tiếp tục or bỏ cuôc vậy :(Các bạn tìm thẻ <body>, sau đó thêm đoạn code này vào sau nó:
<!--Notify box-->
<style>
.icon-box{background-color:rgba(66,133,244,0.8);padding:8px 13px;border-radius:100%;color:rgba(255,255,255,0.5);margin-right:5px}
.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}
.notify-info:hover{opacity:0.8;color:#00a1d6}
.notify-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px;line-height:1.5;}
#notifybox{background:#fff;color:#34495E;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:#00a1d6}
.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}
.modal-body{position:relative;padding:0;text-align:left;min-height:150px;}
.modal-body p{line-height:1.5;}
.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}
.btn-primary{background:#00a1d6;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:#00a1d6;box-shadow:0 0 5px rgba(81,203,238,0.7);}
.circle{padding:2px 6px;background:#71DB00;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>
<div id='notifybox' style='position: fixed'>
<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;'/>Có gì mới trên Blog StarThảo-IT?<p>Cập nhật những thay đổi, cập nhật mới trên Blog StarThảo-IT</p></div>
<div class='notify-info' id='notify2' onclick='window.open('http://www.starthaoit.tk');'><i class='fa fa-slideshare icon-box' style='padding: 10px;background-color:#ffa812;'/>Menu Game<p>Kho game online blogspot miễn phí khổng lồ với rất nhiều game độc đáo.</p></div>
<div class='notify-info' id='notify3' onclick='window.open('http://www.starthao-it.tk');'><i class='fa fa-key icon-box' style='padding: 10px;background-color:#96d726;'/>Tiên Ích Online<p>Có vô vàn tiện ích online ngay trên Blog cho các bạn sử dụng</p></div>
<div class='notify-info' id='notify4' onclick='window.open('/2017/05/share-template-blogger-ca-nhan-chuan-seo-load-sieu-nhanh.html');'><i class='fa fa-gift icon-box' style='padding: 10px;background-color:#fe6d46;'/>Và còn nhiều điều hot nữa<p>Đang được cập nhật...</p></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>
<div id='overlay'/>
<div class='modal-dialog' id='myModal'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title' id='myModalLabel1'>
Cập nhật mới trên Blog StarThảo-IT</h4>
</div>
<div class='modal-body'>
<p><span class='circle'>1</span>Nâng cấp giao diện thân thiện, đẹp mắt.</p>
<p><span class='circle'>2</span>Thêm giao diện hiển thị theo ô cho chuyên mục <a href='/search/label/Facebook?max-results=10' target='_blank'>Thủ Thuật Facebook</a></p>
<p><span class='circle'>3</span>Bổ sung một số <a href='#'>Tiện Ích Và Game Online</a></p>
<p><span class='circle'>4</span>Tối ưu tốc độ tải trang và sửa một số lỗi nhỏ khác.</p>
</div>
<div class='modal-footer'>
<button class='btn-primary' onclick='document.getElementById('myModal').style.top='-800px';document.getElementById('overlay').style.display='none';document.getElementById('notif1').style.top='-800px';' type='button'>Đóng</button>
</div>
</div>
</div>
Các dòng chữ bên trong các bạn tự thay đổi để phù hợp với ý thích của các bạn nhé.Bước 3: Các bạn tìm nơi muốn hiển thị. Sau đó các bạn thêm đoạn code này vào sau nó nha:
<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'/></a></li>
Bước 4: Đây là bước quan trọng nhất nà, nó quyết định xem bạn thành công hay không , đó là Lưu Mẫu 😝😝😝
Xong rồi, chúc các bạn thành công.
Copy nhớ ghi nguồn StarThảo-IT
Code lấy từ template HieuWAI
Thực ra bài này mình up lâu r. Do up lại data lên blog khác nó không hết nên giờ up lại...
HIỆN ĐANG CÓ 8 bình luậnBÌNH LUẬN NGAY
Hay đó bác :D
thank bác /-tks
bác sửa lại cái tên hiển thị liên kết : Chánh Đức IT thành : Star Đức Blog nhé :D
ok bác, lần sau nếu thay đổi gì liên quan đến liên kết vui lòng cmt tại đây nhé :D
Chào bạn,
Tiện ích này do mình viết nên tại địa chỉ https://iris-tips.blogspot.com
Bạn view source website mình thì mình cũng ok không nói gì nhưng vui lòng không phổ biến rộng rãi, nếu không về sau mình sẽ mã hóa toàn bộ luôn nhé.
Hiện mình không có nhu cầu phổ biến rộng rãi tiện ích này, nếu có trong tương lai mình sẽ viết bài hướng dẫn trên https://iris-tips.blogspot.com
Bạn vui lòng xóa bài viết này dùm mình. Cảm ơn!
Xin lỗi, nhưng rất tiếc tiện ích này được tôi lấy từ template mà tôi mua của HiếuWai. Và tôi có quyền sở hữu và ghi nguồn từ template đó và chắc chắn không phải viewsource của bạn. Tôi biết đến nó từ trước khi biết đến blog của bạn. Nếu muốn tôi gỡ bài vui lòng liên hệ HiếuWai tại Plus Kiến Thức. Khi có yêu cầu từ HiếuWai tôi sẽ gỡ bài xuống. Trân Trọng.
Có thể bạn không biết nên mới nói vậy, đoạn code nào mình viết ra mình sẽ biết rõ nhé bạn, dù có đổi tên 1-2 tên class. Trước khi nói "chắc chắn" thì bạn vui lòng pm bạn HiếuWai để hỏi xem code nguồn từ đâu nhé. Plus Kiến Thức thì mình nhớ rồi có đợt ăn cắp cái subscribe box với cái menu phiên bản lỗi bên mình nữa...
Mình nói đến đây thôi, nếu bạn tinh ý thì sẽ nhận ra.
Temp Minima-Colored-3-Mag-Style
THAM GIA TRANH TOP BÌNH LUẬN NGAY!
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).
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.
Hãy xem hướng dẫn để bình luận theo đúng ý nhé.
Hướng dẫn bình luận
Tiện ích
Chèn hình ảnh
Upload ảnh
Chèn một đoạn Code
Sau đó dùng thẻ
[code] CODE_ĐÃ_MÃ_HÓA [/code]hoặc[pre] CODE_ĐÃ_MÃ_HÓA [/pre]rồi paste vào khung bình luậnCtrl + V hoặc Right click chọn Paste vào ô nhận xét để chèn Emoticon
Nếu dùng nhiều Emoticon giữa chúng ngăn cách bằng 1 dấu cách
Mã Hóa Code&Convert
'Convert
"Convert
<Convert
>