Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014



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 làm được sự nổi bật cho người đọc, do đó 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 tôi 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

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

0 comments:

Post a Comment

Popular Posts