Chia Sẻ Widget Tác Gỉa Mộc Mạc Của Mình Đang Dùng

Hello Các Bạn, Tại Chẳng Có Gì Để Viết Nên Mình Share Code Widget Tác Gỉa Này.

Các Bạn Có Thể Lấy Về Thêm Mắm Muối Cho Đẹp Hơn ;v

Ai Dùng Thì Dùng, Không Dùng Xin Đừng Nói Lời Cay Đắng.

 DEMO:

HƯỚNG DẪN :

B1: Vào Blogger/ Bố Cục/ Thêm Tiện Ích/ HTML Script
B2: Dán All Code Dưới Vào Và Tận Hưởng :D Chúc Các Bạn Thành Công

     <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:transparent ;
    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: 3px;
}
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'>
     
<img src="https://i.imgur.com/VQ9jrSd.jpg" alt="Tác giả" class="avt-fsb" />
        <h3 class='ten-author-fsb'>
          Nguyễn Hồng Phúc
        </h3>
        <p class='noidung-fsb'>
Phúc Siêu Phàm được thành lập năm 2018 và chính thức hoạt động vào 9/07/2018
.<br/>

Hy vọng rằng trong tương lai Phúc Siêu Phàm Blog 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>