Cách tùy chỉnh Css thẻ quote cho Blogger

BloggerGuide

Tuesday, November 3, 2015

0 comments

Tùy chỉnh Css thẻ Quote cho Blogger 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.

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3rpYTzT6d7QNhXLeBPP00fBTLVffytbdh57eacL-sTIEJJa7rv3cniRq2nq2jXMezqg5qHryQwDlwmemP-hrr92nn_RyZvXQV1j9IR_uKEJf3mNuNJhF66_ZTOG-rtXxKAG53Gr6suyo/s1600/uoHCjSK.png');
top:0;
left:0;
}
blockquote:after {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobmtWO7cIOAeZZ46UEiI306oZRhXGfiiNTgBTcBkEYlGMC0QzImuL7lDFtCkm0ez3NlWtXVUS1sUtHqaVCHtY_UsLODymowqWD-KcsNcmfpLPRP2e5ISNJstdUhTbdD23o0xFOcRSWpI/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: Cách sử dụng thể Trích dẫn Quote
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>
Hỡi thế gian tình là cái chi chi mà ngươi ta gây đau khổ cho nhau.
<span class="author">~ Anthor - Lý Mạn Sầu</span>
</blockquote>

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. Chúc bạn thành công!

Tag : Blog Design, Blog Posts