Tạo hộp thông báo nhỏ góc màn hình cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Tạo hộp thông báo nhỏ góc màn hình cho blogger

Share:
Chào các bạn, hôm nay mik sẽ chia sẻ đến các bạn cách tạo hộp thông báo nhỏ ở góc màn hình cho blogger.

Hướng dẫn thực hiện

Bước 1: Các bạn vào Chủ đề => Chỉnh sửa sau đó các bạn dán đoạn code bên dưới 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;}
Bước 2: Các bạn tìm đến thẻ đóng </body> rồi copy đoạn code bên dưới vào
 <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://bacsiwindows.com/" target="_blank">
    <div class="left_area">
        <img class="notification_box_img" src="https://2.bp.blogspot.com/-loz22PGQzkg/WOpJH749oxI/AAAAAAAAFPc/83Rhqf306WMmJC9pQKC5lXqiNA6T26B_ACLcB/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">bacsiwindows.com</div>
    </div>
    </a>  
    <div class="clearfix"></div>
</div>  
Cuối cùng lưu mẫu lại và kiểm tra thành quả nhé

Lời kết

Hi vọng với thủ thuật nhỏ này sẽ giúp ích cho bạn, chúc các bạn thành công!
Nếu bạn gặp bất kỳ lỗi nào trong quá trình thực hiện vui lòng để lại comment bên dưới bài viết này.

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

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.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.