Một khoảng thời gian khá lâu từ bài viết trước, mình vẫn chưa viết thêm bài viết nào về thủ thuật Blogger. Hôm nay mình quay lại với bài viết cách tạo khung thông báo (Notification Box) kiểu Coder trong bài viết một cách chuyên nghiệp.
 |
| Tạo khung thông báo kiểu Coder trong bài viết Blogger một cách chuyên nghiệp |
Thêm font chữ vào blog
Bạn có thể vào trang Google Fonts để chọn một font chữ mà bạn thích (thường thì font chữ code có typeface là Monospace). Ở đây mình sẽ lấy ví dụ font Inconsolata.
Sau khi bạn đã chọn được font thích hợp, click chọn Select this font.
Click vào thanh màu đen phía góc dưới để phóng to nội dung những font mà bạn đã chọn.
Tại tab Embed, bạn copy đường dẫn như trong hình vào trong thẻ
<head> trong blog của bạn.
Lưu ý: Nếu copy "nguyên con" thì khi save blog lại, sẽ có lỗi xảy ra, do đó bạn phải sửa lại như sau:
Thay dấu
> ở cuối thành /><link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet"/>
Thay dấu
& thành &<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet"/>
Khi save blog sẽ không còn lỗi nữa.
HTML/CSS
Bạn thêm đoạn CSS sau vào trước thẻ
</style>:/* Notification Box (Coder Mode) Widget By DuongTech.com */
.post-body .noti-info, .noti-warning, .noti-success, .noti-error{
color: #ffffff;
display: block;
padding: 10px;
margin-top: 10px;
font-family: 'Inconsolata', monospace;
}
.post-body .noti-info{
background-color: #0099CC;
}
.post-body .noti-info: before{
content: '[INFO]';
background-color: #0078a1;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 5px;
}
.post-body .noti-warning{
background-color: #FF8800;
}
.post-body .noti-warning: before{
content: '[WARNING]';
background-color: #c76c04;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 5px;
}
.post-body .noti-error{
background-color: #CC0000;
}
.post-body .noti-error: before{
content: '[ERROR]';
background-color: #9c0303;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 5px;
}
.post-body .noti-success{
background-color: #00C851;
}
.post-body .noti-success: before{
content: '[SUCCESS]';
background-color: #007e33;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 5px;
}
.post-body .noti-info: after, .noti-warning: after, .noti-success: after, .noti-error: after{
content: '|';
font-weight: 700;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: white;
}
}
@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: white;
}
}
@-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: white;
}
}
@-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: white;
}
}
@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: white;
}
}
Cách sử dụng trong bài viết
Sau khi đã thêm CSS, bạn vào trong bài viết và viết nội dung vào bên trong cặp thẻ
<div></div> kèm với class noti-info, noti-warning, noti-error, noti-success.
Ví dụ:
Tạo khung thông báo kiểu Coder trong bài viết Blogger một cách chuyên nghiệp
Reviewed by Duong-Tran Thanh
on
9/11/2019 08:05:00 CH
Rating:
Reviewed by Duong-Tran Thanh
on
9/11/2019 08:05:00 CH
Rating:
Không có bình luận nào!