Ẩn hiện nội dung blogquote

Bài viết này sẽ hướn dẫn bạn thêm chức năng ẩn hiện nội dung trong thẻ quote với hiệu ứng trượt nhẹ nhàng bắt mắt, hơn nữa việc sử dụng thủ thuật này trong mỗi bài viết cũng vô cùng đơn giản không phức tạp. Mời bạn xem demo bên dưới để hiểu rõ hơn về thủ thuật này

Xem Demo

Cài đặt trong template

Bước 1: Nếu template bạn chưa cài jQuery thì dán code sau vào trước thẻ </head> còn không bạn hãy bỏ qua bước này

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://trollvlhcv.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'></script>

Bước 2: Chèn đoạn code sau vào trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Hiện Nội Dung</button>');
        $('button.sp-trigger').toggle(function() {
            $(this).addClass('sp-active').text('Ẩn Nội Dung').next().slideDown(1000);
        }, function() {
            $(this).removeClass('sp-active').text('Hiện Nội Dung').next().slideUp(1000);
        });
    });
//]]>
</script>

Bước 3: Dán đoạn code bên dưới trước thẻ ]]></b:skin>

/*
 Spoiler sederhana dengan JQuery
*/
blockquote.spoiler {
  font:normal normal 11px/16px Verdana,Arial,Sans-Serif;
  color:#666;
  border:2px dashed #cec2c2;
  background-color:#eee2e2;
  padding:18px 20px;
  -webkit-box-shadow:inset 0px 0px 7px #222;
  -moz-box-shadow:inset 0px 0px 7px #222;
  box-shadow:inset 0px 0px 7px #222;
  margin:0px 30px 15px;
  /*
  overflow:auto;
  height:250px;
  (opsional) */
}

button.sp-trigger {
  display:block;
  outline:none;
  cursor:pointer;
  margin:20px 0px 10px 30px;
  border:none;
  background-color:green;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 0px rgba(0,0,0,0.4);
  padding:5px 10px;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
button.sp-trigger.sp-active {background-color:#981515}

Thực hiện khi viết bài

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

<blockquote class="spoiler">
Nội dung trong blockquote
</blockquote>

Chúc các bạn thành công và đừng quên ủng hộ TrollVL nha! 

Tham khảo DTE