Tổng hợp style blockquote đẹp cho blog



Blockquote (khối trích dẫn) là một thành phần được sử dụng rất nhiều trong các bài đăng trên blog. Nội dung của nó có thể là codeview, một đoạn trích dẫn hoặc chú thích. Bài viết này mình sẽ chia sẻ một số style blockquote đẹp cho Blogger để các bạn có thể thoải mái lựa chọn kiểu mình thích đưa vào bài đăng.
- Để áp dụng style các bạn chèn code CSS tương ứng vào trước thẻ ]]></b:skin> trong template của bạn. Sau đây mình xin giới thiệu một số style:
- Khi sử dụng các bạn chuyển sang chế độ soạn HTML và sử dụng đoạn code sau:
 class="bbcode">
Nội dung của bạn

Style 1:
 class="bbcode">
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}
Style 2:
 class="bbcode">
.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Style 3:
 class="bbcode">
.post blockquote {
background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
Style 4:
 class="bbcode">
blockquote {
background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
Style 5:
 class="bbcode">
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Style 6:
 class="bbcode">
.post blockquote {
font: italic 1em "comic sans ms", Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Chúc các bạn thành công !

Đăng bình luận

Mới hơn Cũ hơn
Hãy chia sẻ nếu thấy bài viết có ích!