Làm đẹp the code quote cho blogspot

Tuesday, August 19, 2014
Mặc định thẻ quote của blogspot rất xấu và nhất là theme tin tức blogspot này mình vừa add vào thì nó không có làm giao diện cho thẻ quote mà nó trống trơn thôi. cho nên hôm nay mình sẽ hướng dẫn các bạn làm đẹp thẻ quote cho blog của mình nhé.

Làm đẹp khung quote blogspot

Thêm code css vào blogspot
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/AVvXsEi9_2UPSGYdiAp7L_auahhSCgxx9TaBC6bZBkqQhpjG2dhTYanSRDUN8t6Pt4Z1SXLHl7xOTNQ6Inux46LVTOZakFsxTUHbtkTw23-Ak-jFhFQjR_to37i7GXWok-k4aub6LLnpPBtQbj4/s1600/uoHCjSK.png');
top:0;
left:0;
}

blockquote:after {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJaEgzPThTDu-BRJKlZOY7_t-I14XjcXWERDVjWy-mPbPYdfEf0UYENw_6g8zRPnHbVCWnuMCqJUwep-pIFb0EQL4f18DilLSFIcSRvYKC0gGvHayB5JCNOpSRoER-csmVS3SYQPX9hKE/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ây giờ các bạn chỉ cần thêm quote bình thường thôi nhé.
Demo online cứ xem tại Blog lập trình - chia sẽ thủ thuật blogspot

1 comment:

Subscribe to: Post Comments (Atom)