Namkna đã tạo codes Css đơn giản cho Blockquote. Không code Blockquote Highlighter này rất đẹp và bắt mắt. Blockquote rất quan trọng với Blogs nó được rất nhiều blogger hướng dẫn khác nhau, mỗi Blogger giới thiệu một site khác nhau nhưng tất cả đề dùng CSS, JavaScript, Script, jquery,..
Demo bên dưới mỗi mẫu trong bài viết này!
Demo bên dưới mỗi mẫu trong bài viết này!
Thêm CSS StyleSheet cho Blogger Template:
1- Đăng nhập vào blog2- Vào Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Thêm một trong các mẫu dưới vào trước thẻ: ]]></b:skin>
Mẫu 1:
/*****************************************
http://namkna.blogspot.com/ post blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: darkgreen ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}
http://namkna.blogspot.com/ post blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: darkgreen ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}
Mẫu 2:
/*****************************************
http://namkna.blogspot.com/ post blockquote CSS
******************************************/
.post blockquote {
overflow: auto;
color: #333;
background: #FCFDCC ;
margin: 20px;
padding: 10px 20px 10px 25px;
border: 2px solid rgb(196, 196, 196);
font-size: 15px;
overflow: auto;
box-shadow: 0px 0px 7px rgb(147, 247, 144);
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover {
border: 2px solid rgb(50, 187, 194);
box-shadow: 0px 0px 7px rgb(247, 147, 144);
margin-top: 20px;
overflow: auto;
background: #C7FDD2 ;
color: #333;
display: block;
overflow: auto;
text-decoration: none;
}
http://namkna.blogspot.com/ post blockquote CSS
******************************************/
.post blockquote {
overflow: auto;
color: #333;
background: #FCFDCC ;
margin: 20px;
padding: 10px 20px 10px 25px;
border: 2px solid rgb(196, 196, 196);
font-size: 15px;
overflow: auto;
box-shadow: 0px 0px 7px rgb(147, 247, 144);
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover {
border: 2px solid rgb(50, 187, 194);
box-shadow: 0px 0px 7px rgb(247, 147, 144);
margin-top: 20px;
overflow: auto;
background: #C7FDD2 ;
color: #333;
display: block;
overflow: auto;
text-decoration: none;
}
Lưu ý:
Nếu blog của bạn đã có thì xóa đoạn code dạng như bên dưới trước khi áp dụng:.post blockquote{ ..... } .post blockquote p{ .... } .post blockquote:hover { .... }
Các sử dụng khi post bài:
Khi cần chèn một đoạn code hay văn bản vào khung bạn check vào HTML của bài viết và dùng code sau:<blockquote>Mã code hoặc đoạn văn</blockquote>
Chúc thành công!
Nhận xét
Hay đó anh
Trả lờiXóaUK. CHỉ CSS nên không ảnh hưởng tới load :)
XóaMẫu 2 rất đẹp,cám ơn bạn rất nhiều
Trả lờiXóaKhông có gì. rất vui vì có ích với bạn.
XóaRất hữu ích cám ơn bạn
Trả lờiXóaKhông có gì, Rất vui vì có ích với bạn.
XóaEm chỉ cần tìm đoạn --> đó ở trước thẻ ]]><b:skin> và xóa nó đi nha.
Trả lờiXóa