Thứ Tư, 16 tháng 5, 2018

Tạo Hộp Thông Báo Nhỏ Góc Màn Hình Của Blogger


Bước 1: Chèn CSS Sau đây vào trước ]]></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ẻ </body> rồi chèn css 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://www.thanhphuit.tk/" target="_blank"> <div class="left_area"> <img class="notification_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIWMNMQ0bRxV3WrETKEx-y2Tz8jQWnOAAu2D0MV6SizuyF7aBXcsGjKsl1NH9vO-MJzLbo2igHw08qyzyDRwxElKBEzQ74aB-fozcju7ecVaQK3gpM6PXwbUtZ9fbeIwnucRwum7WEhTd/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">thanhphuit.tk</div> </div> </a> <div class="clearfix"></div> </div>

Bài liên quan:

0 nhận xét: