9 tag blockquote đẹp dùng trong Blogspot
Bạn đã biết tác dụng của tag blockquote trong html chưa? Đây là một trong những tag html quan trọng giúp bạn định dạng văn bản chuyên nghiệp hơn trong hệ thống blog của mình và đặc biệt giúp blog của bạn thể hiện rõ những nội dung quan trọng mà bạn không cần mất nhiều thời gian để format trong file css.
Nếu bạn đã chán với tiêu chuẩn blogspot Blockquote, thì đây chắc chắn bạn sẽ tìm thấy tab blockquotes mang phong cách mới mẻ cho Blogspot.
Làm thế nào để Thêm Blockquote trong Blogger bằng CSS
Thêm Blockquotes trong Blogger Post
Các mẫu đẹp nhất cho Blockquote trong Blogger
<style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: “Consolas”, “Courier New”, Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(http://1.bp.blogspot.com/-JwOqUtOkIMo/VPBYi-16YdI/AAAAAAAAB1U/nBD6A0Y2cEA/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
}
</style>
Mẫu 2
<style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: “”;
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: “”;
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>
Mẫu 3
<style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: “201C”;
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: “201D”;
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>
Mẫu 4
<style>
.post blockquote {
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 14px;
line-height: 1.5;
color: #446578;
text-align: justify;
border-left: 15px solid #EBF2F8;
border-right: 1px dotted #EBF2F8;
-moz-box-shadow: -1px 2px 5px #ccc;
-webkit-box-shadow: -1px 2px 5px #ccc;
box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
content: “201C”;
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #8DACC0;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote:after{
content: “”;
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
</style>
Mẫu 5
<style>
.post blockquote {
background: #484B52 url(http://1.bp.blogspot.com/–pqu2SmmZEk/US-20cRpbtI/AAAAAAAAYx0/KabThwRB9LQ/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 1.3em Helvetica, verdana, serif, Georgia, “Times New Roman”;
}
</style>
Mẫu 6
<style>
.post blockquote {
margin : 0 10px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}
</style>
Mẫu 7
<style>
.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}
</style>
Mẫu 8
<style>
.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1.2em;
margin-left: 5%;
margin-right: 5%;
}
</style>
Mẫu 9
<style>
.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}
</style>