Ẩn hiện nội dung trong blogquote với CSS

Bài viết này mình sẽ giới thiệu thêm một thuộc tính thú vị cho blockquote mặc định của blogger. Khi ta áp dụng thủ thuật này thì nội dung trong thẻ blogquote sẽ được ẩn đi và khi ta rê chuột đến thì nội dung sẽ được mở ra một cách mềm mại. Mời bạn click xem demo bên dưới để dễ dàng hình dung

Xem Demo

Cài đặt trong template

Bạn chỉ việc dán code trước thẻ skin bên trong template của mình

blockquote.collapsed {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  transition:all 1s cubic-bezier(1,0,0,1) .5s;
}
blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#ffe046;
  border:1px solid #156715;
  height:250px;
}

Trong bài viết

Bạn viết bài dưới chế độ HTML và sử dụng cấu trúc sau:

<blockquote class="collapsed">Nội dung bên trong blockquote</blockquote>

Chúc các bạn thành công và đừng quên ủng hộ TrollVL bằng cách chia sẻ và comment nha! Cảm ơn đã theo dõi!