Cách tạo thông báo , ghi chú , cảnh báo đẹp và lạ cho bài viết cho blogger

Cách tạo thông báo , ghi chú , cảnh báo đẹp và lạ cho bài viết cho blogger

Cách tạo thông báo , ghi chú , cảnh báo đẹp và lạ cho bài viết cho blogger

Trong bài viết hôm nay mình sẽ hướng dẫn các bạn cách làm các thông báo, ghi chú , cảnh báo đẹp cho blogger . Thủ thuật này sử dụng CSS nên không làm ảnh hướng đến tốc độ tải trang.
Cách làm :
Truy cập vào Blogger -> Mẫu -> Chỉnh sửa HTML
Tìm đến thẻ ]]></b:skin> và dán đoạn code sau vào phía trên nó . Nhiều bạn thắc mắc là vì sao cần dán trên ]]></b:skin> thì mình xin trả lời rằng là bởi vì ]]></b:skin> là thẻ chứa CSS dùng chung cho toàn bộ tất cả các trang liên quan của Blogspot . Nên nếu bạn muốn dùng thủ thuật trên cho toàn bộ các trang thì để lên thẻ ]]></b:skin> còn lại , nếu bạn chỉ muốn áp dụng duy nhất cho trang bài viết hoặc trang tĩnh hay trong một số trang nhất định thì hãy dùng đến thẻ điều kiện của Blogger .

.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding-left: 10px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
background: #e0e5eb url('https://i.imgur.com/3EbxygA.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://i.imgur.com/n1KiHNH.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://i.imgur.com/SGyqoI4.png') no-repeat 12px 8px;
color: #fff;
}

Và thế là xong phần sườn, tiếp theo ta sẽ đi phần sử dụng . Code của chúng ta có ba phần được phân biệt bằng info , tips , warning . Thì với mỗi phần sẽ có cách hiển thị khác nhau .

Để sử dụng info:

<div class='info'>
Nội dung cần ghi chú
</div>

Để sử dụng tips :

<div class='tips'>
Nội dung cần ghi chú
</div>

Để sử dụng warning :

<div class='warning'>
Nội dung cần ghi chú
</div>

Demo :

Info :

IT Việt Nam là blog chia sẻ kiến thức , thủ thuật blogspot , hacking , chia sẻ các khóa học , sách ebook , tài liệu, ứng dụng , thủ thuật 4.0  ,...

Tips:

Hãy sử dụng đúng mục đích . Trân trọng những gì mà IT Việt Nam chia sẻ , đọc kĩ các điều khoản và chính sách của IT Việt Nam .

Warning :

IT Việt Nam không dùng cho trẻ tăng động . Mất khả năng nhận thức về hành vi của mình và ý thức kém. Thích thể hiện .

OK ! DONE 

[ " Chiến lược đốn tim một người con gái nhanh nhất đó là đừng làm gì cả . Lo học đi " ]