Tạo Hộp thông báo nhỏ gọn ở cạnh bên website bằng CSS cho Blogger

Notification Box pure CSS for your website

Nếu bạn sử dụng nhiều trình duyệt Google Chrome bạn sẽ nhìn thấy bên góc dưới cạnh phải đôi lúc sẽ hiển thị thông báo của các website mà bạn truy cập. Ví dụ như thông báo của Facebook chẳng hạn.

Hôm nay Iris Tips sẽ mang hộp thông báo đó vào chính website của bạn. Ưu điểm của hộp thông báo này là được thực hiện hoàn toàn bằng CSS nên sẽ không ảnh hưởng đến tốc độ tải trang trên website 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>

#notification_box_wrap{position:fixed;height:auto;background-color:#ffffff;color:#333333;box-shadow:0 1px 2px rgba(0,0,0,0.2);cursor:pointer;bottom:5px;right:5px;}
.left_area{width:80px;height:100%;float:left}
.left_area .notification_box_img{width:80px;height:auto;border-image:none}
.right_area{padding-top:10px;padding-left:15px;padding-bottom:10px;width:260px;height:auto;float:left;word-wrap:break-word}
.right_area .notification_title{padding-bottom:4px;font-size:14px;line-height:20px;font-weight:600;}
.right_area .notification_description{line-height:16px;word-wrap:break-word}
.right_area .domain_name{margin-top:4px;color:#7f7f7f;font-size:12px;line-height:16px}
input.close_box{position:absolute;top:0;right:0;cursor:pointer;padding:5px 10px;background:#fff;border:none;font-size:18px;color:#888;}

2Đặt đoạn code thông báo bên dưới vào trước thẻ </body>

 <div id="notification_box_wrap">
    <input class="close_box" onclick='document.getElementById(&apos;notification_box_wrap&apos;).style.display=&apos;none&apos;;' title='Đóng' type='button' value='&#215;'/>
<a href="http://iris-tips.blogspot.com/" target="_blank">
    <div class="left_area"> 
        <img class="notification_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3vr2uSjA1Z1Gea21MMz_cC8W1W2cIgmbeRyXUUoyYOjczZylAHz1SgkGoLE8yuiGEs8_DefrOF3utUXxD8bwM7bp2mAXCZhkSzNY0B9V64a4lccweDrb_2lQyi4ijOKhjeUpJnucPPTvM/s1600/gift.png"/>
    </div>
    <div class="right_area">
        <div class="notification_title">
            Tiêu đề thông báo
        </div>
        <div class="notification_description">
            Viết vài dòng mô tả ở đây.
        </div>
        <div class="domain_name">iris-tips.blogspot.com</div>
    </div>
    <div class="iris_tips_gear_icon"></div>
    </a>    
    <div class="clearfix"></div>
</div> 

3Vậy là xong rồi đấy, bạn đã có một hộp thông báo khá chuyên nghiệp rồi phải không nào.

• 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