Khung Blockquote với hiệu ứng chuột cho Blogger

Mình đã 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!

Thêm CSS StyleSheet cho Blogger Template:

1- Đăng nhập vào blog

2- 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://kenh8tv.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://kenh8tv.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ách 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!