TẠO CÁC MẪU KHUNG GHI CHÚ - CẢNH BÁO - LIÊN KẾT CHO BÀI VIẾT CỦA BLOGSPOT

Mấy bữa rồi tôi mày mò tìm cách làm 1 bảng ghi chú để trang trí cho bài đăng của blog (vì là "gà" nên phải mày mò!). Thật ra có rất nhiều kiểu mẫu đẹp được giới thiệu trên những trang chuyên về thủ thuật blogger như NOCT, Duy Phạm,... Tuy nhiên, vì mình còn "gà" nên muốn tự mày mò 1 cách cho riêng mình (mặc dù không thể đẹp bằng các mẫu có sẵn trên các trang chuyên nghiệp được).

Xin giới thiệu với các bạn ("chicken" như tôi), cách làm các mẫu khung ghi chú, cảnh báo, quan trọng hay liên kết một cách đơn giản. Bạn có thể tham khảo hình ảnh dưới đây để hình dung trước kết quả.

Điều trước tiên, đơn giản nhất nhưng cũng là quan trọng nhất, vui lòng sao lưu lại template của bạn (Đăng nhập Blogger --> Thiết kế --> Chỉnh sửa HTML --> Tải xuống mẫu đầy đủ). Kế đó, Clt+F để tìm dòng mã ]]></b:skin> và dán đoạn CSS sau ngay trước dòng code đó.

.post p {
 line-height: 15px;
 margin: 0;
 padding: 10px 10px 10px 55px;
 font-weight:bold;
}

Tiếp theo, dán các đoạn CSS cho các khung ghi chú, cảnh báo hay liên kết sau vào sau đoạn CSS vừa rồi.

.alert {
background:  #FF6A6A url("http://i219.photobucket.com/albums/cc42/taikovn/Share%20All%20World/1319276248_messagebox_warning.png") no-repeat scroll 7px 50% ;
border: 2px dashed #000;
display: block;
width: 85%;
}

.important {
background:  #FFC1C1 url("http://i219.photobucket.com/albums/cc42/taikovn/Share%20All%20World/1319276009_dialog-warning.png") no-repeat scroll 7px 50% ;
border: 2px dashed #000;
padding: 10px 10px 10px 55px;
display: block;
width: 85%;
}

.link {
background:  #E3F0F2 url("http://i219.photobucket.com/albums/cc42/taikovn/Share%20All%20World/1319276772_hyperlinkblue.png") no-repeat scroll 7px 50% ;
border: 2px dashed #000;
display: block;
width: 85%;
}

.note {
background: url("http://i219.photobucket.com/albums/cc42/taikovn/Share%20All%20World/1319276327_note.png") no-repeat scroll 7px 50% #FFD700;
border: 2px dashed #000;
display: block;
width: 85%;
}

Cuối cùng, để sử dụng ứng dụng trên trong bài viết của blogger, bạn chỉ cần đặt thông tin cần truyền đạt trong các đoạn mã sau:

<p class="note">Testing note part</p>

<p class="important">Testing Important part</p>

<p class="alert">Testing Alert part</p>

<p class="link">Testing Link part</p>

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

Nếu bạn thường xuyên cần sử dụng tới ứng dụng này, bạn có thể lưu sẵn các đoạn mã trên trong Mẫu bài đăng: Đăng nhập Blogger --> Cài đặt --> Định dạng --> Mẫu bài đăng --> Dán đoạn code trên --> Sao lưu. Như vậy mỗi khi bạn viết bài, đoạn code trên sẽ có sẵn trong khung soạn thảo, bạn chỉ việc gõ nội dung cần truyền đạt vào khung này.

=== Nhấn vào đây để tìm bài viết này trên google ===