Code tạo Thông báo của Admin trượt dọc theo website

Admin notification

Là một Admin của 1 blog hay website đôi khi bạn sẽ cần thông báo một số điều đến độc giả của website bạn. Tiện ích sau đây sẽ giúp bạn thực hiện điều đó. Đây là thủ thuật để tạo một thông báo hoặc quảng cáo của Admin trược dọc theo website, có kết hợp nút đóng để không gây phiền cho độc giả của bạn.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS vào trước thẻ ]]></b:skin>

.action-flat-btn{position:relative;padding:10px;min-width:64px;color:#FF4081!important;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.action-flat-btn:hover{padding:5px;color:#fff!important;background-color:#FF4081}
.infoMes{position:fixed;bottom:20px;left:0;width:100%;z-index:999;-webkit-transform:-webkit-translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:-webkit-transform .5s cubic-bezier(.11,.9,.66,1),opacity .7s ease-in-out;-moz-transition:-moz-transform .5s cubic-bezier(.11,.9,.66,1),opacity .7s ease-in-out;-o-transition:-o-transform .5s cubic-bezier(.11,.9,.66,1),opacity .7s ease-in-out;transition:transform .5s cubic-bezier(.11,.9,.66,1),opacity .7s ease-in-out}
.infoMes .iristipsmes{font-size:14px;color:#fff;bottom:10px;width:550px;display:block;max-width:90%;margin:0 auto;background-color:rgba(0,0,0,0.75);z-index:999;border-radius:5px;padding:10px;text-align:center}
.infoMes.hNot{-webkit-transform:-webkit-translateY(110px);-moz-transform:translateY(110px);-ms-transform:translateY(110px);-o-transform:translateY(110px);transform:translateY(110px)}

2Tìm đến thẻ </body> và dán đoạn HTML sau đây vào trước thẻ đó

<div class="infoMes"><div class="iristipsmes">Like Fanpage Iris Tips để cập nhật các thủ thuật mới nhất mỗi ngày <a class="action-flat-btn" href="https://www.facebook.com/IrisTipsBlog" target="_blank">OK</a> <a class="action-flat-btn later" href="#">Để sau</a></div></div>
<div class='clear'></div>

3Cuối cùng là dán đoạn JS bên dưới vào sau đoạn code ở bước 2

<script type='text/javascript'>
$(document).on("click", ".infoMes .later", function(){
$(this).parent().parent().addClass("hNot");
})
</script>

Chỉnh sửa: Mặc định tiện ích sẽ nằm ở cạnh dưới của website, nếu muốn chỉnh lên phía trên bạn hãy sửa đoạn CSS trong bước 1 từ .infoMes{...bottom:20px;.... thành .infoMes{...top:20px;...

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm