Đóng khung thẻ quote đẹp cho Blogger

bới

Như các bạn cũng đã biết thì thẻ quote mặc định của Blogger nhìn khá là nhàm chán, không đánh bắt được cái nhìn của người đọc, cũng vì lý do đó mà rất nhiều người tìm cách trang trí cho thẻ quote trên website của mình để tạo thêm sự bắt mắt và hấp dẫn người đọc hơn, đặc biệt là những website hay sử dụng những câu trích dẫn. Do đó ở bài viết này mình xin hướng dẫn các bạn trang trí thẻ quote mặc định của Blogger của chính mình chỉ với một vài bước đơn giản.


Không có website xấu, chỉ có website không biết làm đẹp.
~ Ai đó trên trái đất

Bước 1: Thêm đoạn css sau vào trước thẻ ]]></b:skin>
blockquote {
color:rgb(255,150,100);
font-family:georgia, serif;
font-size:32px;
line-height:1.2;
text-align:center;
padding:24px 60px;
margin:0 120px;
margin-bottom:18px;
border:solid 1px rgb(220,220,220);
position:relative;
}

blockquote:before,
blockquote:after {
position:absolute;
width:48px;
height:48px;
content:".";
font-size:0;
}

blockquote:before {
background-image:url('http://1.bp.blogspot.com/-RTYENuU5cjk/UnyeZqg1MEI/AAAAAAAAAxk/wMqB-XZyhM8/s1600/uoHCjSK.png');
top:0;
left:0;
}

blockquote:after {
background-image:url('http://1.bp.blogspot.com/-zY3B40Mp4hM/UnyeZocS9jI/AAAAAAAAAxg/pWjYhNilBwo/s1600/m3HnqqU.png');
bottom:0;
right:0;
}

.author {
display:block;
text-align:right;
font-size:18px;
padding:4px;
color:rgb(150,150,150);
font-style:italic;
}

Bước 2: Sử dụng
Do thẻ quote này có một số thứ đã thay đổi nên khi đăng bài viết các bạn chỉ cần sử dụng thẻ quote theo cấu trúc sau:
<blockquote>
Không có website xấu, chỉ có website không biết làm đẹp.
<span class="author">~ Ai đó trên trái đất</span>
</blockquote>
Nếu bạn làm xong thì có nghĩa là đã hoàn thành việc trang trí thẻ quote cho website của bạn. Bạn có thể hoàn toàn tùy biến đoạn CSS trên theo màu và phông chữ các bạn thích. Hoặc nếu gặp khó khăn trong việc chỉnh sửa bạn cũng có thể tùy ý để lại nhận xét để nhận được sự giúp đỡ từ mình Chúc bạn thành công!