Tạo khung chứa code đẹp và độc đáo cho Blogger

Có lẽ không cần phải nói nhiều, đọc tiêu đề bài viết thì bạn đã biết rõ thủ thuật này là gì rồi. Đây là thủ thuật tạo khung chứa code cho blogger/blogspot. Được thiết kế hoàn toàn bằng CSS.
Demo ngay tại bài viết này.

Các bước thực hiện

Bước 1: Đăng nhập vào trang quản lý Blogger
Bước 2: Chèn đoạn code dưới đây vào trên thẻ ]]></b:skin> trong template
.post blockquote{
margin:10px 0!important;
border:2px solid #FE6D4C!important;
border-left:none!important;
overflow: auto !important;
text-align: left !important;
max-height: 250px !important;
background: #ddd url(https://3.bp.blogspot.com/-wNBcugNuQY0/V6QmAweq1tI/AAAAAAAAAJA/oqtqcT-wJ-EzPjla6Q3UKVn6C8KmDat7gCLcB/s1600/blockquote-thuthuatblog247.jpg) !important;
background-repeat: no-repeat !important;
padding: 15px 20px 15px 35px !important;
color: #555 !important;}
blockquote::-webkit-scrollbar {width: 0}
blockquote::-webkit-scrollbar-track {-webkit-box-shadow:none;background:none}
blockquote::-webkit-scrollbar-thumb {background:none;border-radius: 0}
blockquote::-webkit-scrollbar-thumb:hover {background:none}
Bạn có thể thay link ảnh màu đỏ theo ý bạn!
Bước 3: Lưu template và enjoy!

Cách sử dụng

Bước 1: Tô đen đoạn code cần cho vào khung
Bước 2: Chọn biểu tượng trích dẫn trong giao diện viết bài của blogger.
Bước 3: Enjoy!
Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Bình Luận

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
$-)
(y)
(f)
x-)
(k)
(h)
cheer