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

Xin giới thiệu với các bạn khung trình bày code bằng Blockquote với hiệu ứng chuột rất đẹp các bạn có thể sử dụng để làm nổi bật khung trình bày code.

DEMO
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>
blockquote{font:italic 400 14px Verdana;max-height:250px;overflow:auto;background:#D6DDE0;color:#fff;border:2px dotted #D3D3D3;transition:background .777s;-webkit-transition:background .777s;-moz-transition:background .777s;-o-transition:background .777s;-ms-transition:background .777s;margin:0;padding:10px;margin:10px 0}
blockquote:hover{background:#59b9e7;color:#fff}
blockquote:active{background:#C7FDD2;color:#fff}
max-height:250px;min-height:50px;
overflow:auto; 
  •  Thay đổi màu hiệu ứng ở những ô tô màu xanh.
  • Thuộc tính max-height:250px;min-height:50px;overflow:auto; là để xuất hiện thanh cuộn nếu không muốn bạn có thể xóa nó đi.

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>

8/Post a Comment/Comments

  1. Thay lại "áo mới" cho Blog nhìn bắt mắt hơn rồi Trực ơi!
    Thủ thuật bạn nêu ở bài này cũng khá hay! Mình share lên Facebook của mình: "Nguyễn Xuân Thiết" mới được!

    Trả lờiXóa
  2. Đã Share Facebook; Đã Twitter; đã g+ cho bài này!
    Chúc bạn vui!

    Trả lờiXóa
  3. Đã LIKE FanPage ChinhtrucBlog;
    Thân mời bạn ghé
    FanPage Cỏ Lấm Bụi Đường của mình chơi vui!

    Trả lờiXóa
  4. a ơi e rất thích kiểu mặt cười nhấp vào ra code của a có thể share e được không ạ five_anggel_94@yahoo.com.vn Thank ạ

    Trả lờiXóa
    Trả lời
    1. [co="RED"]BẠN CÓ THỂ THAM KHẢO BÀI VIẾT NÀY
      TẠI ĐÂY CHÚC BẠN THÀNH CÔNG
      [/co]

      Xóa
  5. tuyệt vời, cảm ơn bác nhiều

    Trả lờiXóa
  6. ở Theme này tìm và chỉnh sửa thế nào hả Trực, bạn thử rồi hướng dẫn mình qua email dc k, vì mình dung email thường xuyên
    email: 1081991@gmail.com
    file theme https://drive.google.com/file/d/0Bz8mcB5tJyjkTzBId3JYNm9pUm8/edit?usp=sharing

    Trả lờiXóa

Đăng nhận xét