Share Author Widget với hiệu ứng pulse

Kính thưa đồng bào các cấp , hôm nay , tôi - Nguyễn Bảo Linh - xin mạn phép share Widget Author rất chi là chất lừ do mình lượm lặt. Không lòng vòng nữa , mời các đảng viên cùng xem DEMO:

Before ( trước khi click )

Và:

after ( Sau khi click )

• Chúng ta làm như sau:

Thêm đoạn code này vào nơi cần hiển thị :

<div class='sidebar-wrapper section' id='sidebar' name='Sidebar'><div class='widget HTML' data-version='2' id='HTML10'>
<div class='widget-content'>
<div class="mau-nen">
<h3 class="hvr-pulse-grow">
TÁC GIẢ
</h3>
</div>
<script>
      //<![CDATA[
        $(function(){
              $('.noidung-fsb').slideUp();
              $('h3.hvr-pulse-grow').click(function(event){
                $('.noidung-fsb').slideToggle();
              });
            });
        //]]>
      </script>
<style type="text/css">
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse-grow, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
            .hvr-pulse-grow{
padding:6px 30px;margin:0 5px;color: #fff;font: 700 20px Roboto Condensed;}
.mau-nen{
background:#5ea0e4;
}

h3.hvr-pulse-grow{
    cursor: cell;
    text-transform: uppercase;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px;
    background-color:#52537d ;
    font-size: 15px;
    font-weight: 700;
    font-family: arial;
    margin:0;
    border: none;
}
p.gt-nd:hover {
    background: #dedede;
}
img.avt-fsb {
    transition: 1s;
    border-radius: 100%;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    height: 150px;
}
img.avt-fsb:hover {
    transform: rotate(360deg);
    transition: 0.7s;
    border-radius: 100%;
}
.noidung-fsb{
text-align:center;
}
h3.ten-author-fsb {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
transition: 1s;
    margin-top: 10px;
    text-transform: uppercase;
    padding: 5px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 30px;
BACKGROUND: #393a4a;
    color: #fff;text-align: center;
}
h3.ten-author-fsb:hover {
    transition: 1s;
    transform: rotate(5deg);
transition: 0.4s;
}
p.gt-nd {
    background: #eee;
    font-size: 15px;
    padding: 10px;
    margin: 0;
    color: #736b6b;
}
       
        </style>

      <div class="noidung-fsb" style="display: none;">
      <img src="https://i.imgur.com/VQ9jrSd.jpg" alt="VQ9jrSd" class="avt-fsb" title="VQ9jrSd" />
        <h3 class="ten-author-fsb">
          Lê Bá Long
        </h3>
        <p class="noidung-fsb" style="display: none;">
Bảo Linh Desani được thành lập năm 2017và chính thức hoạt động vào 9/07/2017
.<br />
Hy vọng rằng trong tương lai Bảo Linh Desani có thể đóng góp các thông tin hữu ích cho tất cả các bạn. Cảm ơn!
        </p>
      </div>

Và thế là xong !

• LỜI KẾT :

Do mình viết vội post này nên chưa kịp làm thumbnail đẹp đẹp , nên các anh em đảng - đoàn viên.. không phàn nàn về vấn đề này nhé ! Rất cảm ơn các bạn đã ủng hộ tôi ! Source-code mình cũng không biết của ai nên không add trong post này nhé ha !