Tạo Info Author Hiệu Ứng Toggle Tuyệt Đẹp Cho Blogger

Hello anh em, mình là Nhân, hôm nay mình sẽ chia sẻ cho anh em widget author info cho blogspot hiệu ứng toggle đẹp cho blogspot :v cái này éo biết nguồn của ai -.- hình như mình chôm code của Nguyễn Diện Blog thì phải :v.

Demo

Trước khi click

Sau khi click

Cách chèn

- Thêm code vào nơi muốn hiển thị author :
<div class='mau-nen'>
<h3 class='hvr-pulse-grow'>
Info Author
</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{
padding:6px 30px;margin:0 5px;color: #fff;font: 700 20px Roboto Condensed;}
.mau-nen{
background:#1279bd;
}

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="http://graph.facebook.com/100012894570175/picture?type=large" alt="" class="avt-fsb" />
        <h3 class='ten-author-fsb'>
          Võ Hữu Nhân
        </h3>
        <p class='gt-nd'>
Võ Hữu Nhân Official được thành lập năm 2018 và chính thức hoạt động vào 26/06/2018
.<br/>
Hy vọng rằng trong tương lai Võ Hữu Nhân Official 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>
- Mình không rõ nguồn của ai :v nếu biết nguồn của ai thì cung cấp dưới comment để mình sửa nhé, còn chưa biết code của ai thì chịu -.- 

Nhận xét

Đăng nhận xét

Bình luận sao cho dễ thương xíu nhé :3