Tạo hộp thông báo nhỏ gọn cho blogger

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/AVvXsEg-Js1wfjoZwOQ2O-JARi5ZNJvYmgscx1vlYn4CCGAGiXvo30EYs1BxXRmRVGYm6B5RVDvg8xS38hlCGi9XCmeeN5MaaH20JpkJQ0w-49MX2DGPcyFQZwWTRAyLBVww6u-KvogufNoxHwBH/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 !
Tạo hộp thông báo nhỏ gọn cho blogger Tạo hộp thông báo nhỏ gọn cho blogger Reviewed by Unknown on tháng 9 12, 2017 Rating: 5

Không có nhận xét nào:

Được tạo bởi Blogger.