Tạo hộp thông báo nhỏ gọn cho blogger ••• Xem bình luận Thứ Ba, 12 tháng 9, 2017

Chào
Lâu không viết thủ thuật Blog thì hôm nay Hoan xin chia sẻ tới các bạn cách tạo thông báo nhỏ gọn dưới góc phải màn hình cho Blogger nha

Bắt đầu thực hiện thôi nhỉ
B1. Vào blogger -> mẫu -> Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> và chèn code sau vào bên trên nó.

#notification_box_wrap{position:fixed;height:auto;background-color:#bc382e;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;}

B2. Tìm đến thẻ </body> và dán code sau vào phía trên nó.

 <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/AVvXsEj9msr7F2PchiwefXuuv2yxvbSXI-k8l-i2MZ8C0MQHG6DTNOaORUo7_W-nlpA_vZOaF5ASwqOASWXJRPVGmSCtY_1MWZCn3y5WwIOh6pvw3jQZOliK59SYtlh9CDuc-qB1We1pZk0iA7VH/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> 

B3. Lưu mẫu

Chúc các bạn thành công !

Thích

0 bình luận

Hashtag: #Blogger

Bạn và người khác