Hướng Dẫn Tạo Profile Card Có Hover Cho Blogger

Xin chào các bạn, đã lâu rồi mình không viết bài về Thủ Thuật Blogspot hôm nay mình sẽ chia sẻ cho các bạn cái Profile Card có hiệu ứng Hover chất chơi người dơi này không nói dài dòng nữa vào vấn đề chính luôn nhé.

Bạn chỉ cần thêm một tiện ích HTML/Javascript và cho đoạn code này vào là được :

<h2 style="border-bottom: 3px solid #000000"><style>.profile-card header img {border-radius:50%;margin:15px auto;display:block;width:200px;height:200px;border:5px solid #000000}
.profile-card {border-radius:50%;margin:0 auto;display:block;height:240px;width:100%;overflow:hidden;transition:all ease .3s}
.profile-card:hover {border-radius:15px;height:500px;background-color:#FFFFFF;padding:10px 0 0}
.profile-card:hover header img {animation:profile_image 2000ms linear both;animation-delay:.5s}
.profile-card header {text-align:center}
.profile-card header h1 {position:relative;text-align:center;color:#000000;text-shadow:1px 1px rgba(0,0,0,0.5);font-size:25px;line-height:25px;display:inline-block;padding:10px;transition:all ease .25s;border-top:1px solid #000000;border-bottom:1px solid #fff}
.profile-card:hover header h1 {margin-top:0;outline:0 solid #fff;border-top:0 solid #fff;border-bottom:1px solid #fff}
.profile-card header h2 {text-align:center;color:#fff;text-shadow:1px 1px rgba(0,0,0,0.5);000000-size:17px;font-weight:400;line-height:normal;margin:10px 0 0}
.profile-bio p{margin:0}
.profile-card .profile-bio {margin-top:10px;padding:0 15px 15px!important;transition:all linear 1.5s;color:#000000;font-size:15px;opacity:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.42) 49%,rgba(0,0,0,0.61) 100%)}
.profile-card:hover .profile-bio {opacity:1}
.profile-card .profile-bio p:first-child {text-align:center;font-size:16px;margin: 0 0 10px;}
.profile-card .profile-social-links {position:relative;margin-top:-472px;margin-left:-50px;list-style-type:none;opacity:0;transition:all ease .5s}
.profile-card:hover .profile-social-links {margin-left:5px;opacity:1}
.profile-card .profile-social-links li img {width:30px;background:#fff;border-radius:50%;padding:2px}
@keyframes profile_image {0% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
3.4% {transform:matrix3d(1.032,0,0,0,0,1.041,0,0,0,0,1,0,0,0,0,1)}
4.7% {transform:matrix3d(1.045,0,0,0,0,1.06,0,0,0,0,1,0,0,0,0,1)}
6.81% {transform:matrix3d(1.066,0,0,0,0,1.089,0,0,0,0,1,0,0,0,0,1)}
9.41% {transform:matrix3d(1.088,0,0,0,0,1.117,0,0,0,0,1,0,0,0,0,1)}
10.21% {transform:matrix3d(1.094,0,0,0,0,1.123,0,0,0,0,1,0,0,0,0,1)}
13.61% {transform:matrix3d(1.112,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1)}
14.11% {transform:matrix3d(1.114,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1)}
17.52% {transform:matrix3d(1.121,0,0,0,0,1.124,0,0,0,0,1,0,0,0,0,1)}
18.72% {transform:matrix3d(1.121,0,0,0,0,1.119,0,0,0,0,1,0,0,0,0,1)}
21.32% {transform:matrix3d(1.12,0,0,0,0,1.107,0,0,0,0,1,0,0,0,0,1)}
24.32% {transform:matrix3d(1.115,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1)}
25.23% {transform:matrix3d(1.113,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1)}
29.03% {transform:matrix3d(1.106,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1)}
29.93% {transform:matrix3d(1.105,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1)}
35.54% {transform:matrix3d(1.098,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1)}
36.74% {transform:matrix3d(1.097,0,0,0,0,1.098,0,0,0,0,1,0,0,0,0,1)}
41.04% {transform:matrix3d(1.096,0,0,0,0,1.102,0,0,0,0,1,0,0,0,0,1)}
44.44% {transform:matrix3d(1.097,0,0,0,0,1.103,0,0,0,0,1,0,0,0,0,1)}
52.15% {transform:matrix3d(1.099,0,0,0,0,1.101,0,0,0,0,1,0,0,0,0,1)}
59.86% {transform:matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1)}
63.26% {transform:matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1)}
75.28% {transform:matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1)}
85.49% {transform:matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1)}
90.69% {transform:matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1)}
100% {transform:matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1)}}
.profile-card:hover header h1 {animation:name_and_job 1500ms linear both;animation-delay:.4s}
@keyframes name_and_job {0% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-300,0,0,1)}
1.3% {transform:matrix3d(3.905,0,0,0,0,1,0,0,0,0,1,0,-237.02,0,0,1)}
2.55% {transform:matrix3d(4.554,0,0,0,0,1,0,0,0,0,1,0,-182.798,0,0,1)}
4.1% {transform:matrix3d(4.025,0,0,0,0,1,0,0,0,0,1,0,-125.912,0,0,1)}
5.71% {transform:matrix3d(3.039,0,0,0,0,1,0,0,0,0,1,0,-79.596,0,0,1)}
8.11% {transform:matrix3d(1.82,0,0,0,0,1,0,0,0,0,1,0,-31.647,0,0,1)}
8.81% {transform:matrix3d(1.581,0,0,0,0,1,0,0,0,0,1,0,-21.84,0,0,1)}
11.96% {transform:matrix3d(1.034,0,0,0,0,1,0,0,0,0,1,0,4.825,0,0,1)}
12.11% {transform:matrix3d(1.023,0,0,0,0,1,0,0,0,0,1,0,5.53,0,0,1)}
15.07% {transform:matrix3d(0.947,0,0,0,0,1,0,0,0,0,1,0,12.662,0,0,1)}
16.12% {transform:matrix3d(0.951,0,0,0,0,1,0,0,0,0,1,0,13.007,0,0,1)}
27.23% {transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.352,0,0,1)}
27.58% {transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.121,0,0,1)}
38.34% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.311,0,0,1)}
40.09% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.291,0,0,1)}
50% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.048,0,0,1)}
60.56% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0.007,0,0,1)}
82.78% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
100% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}}
.profile-card:hover ul li:first-child {animation:social_animation 2000ms ease-in-out both;animation-delay:.75s}
.profile-card:hover ul li:nth-child(2) {animation:social_animation 2000ms ease-in-out both;animation-delay:1s}
.profile-card:hover ul li:nth-child(3) {animation:social_animation 2000ms ease-in-out both;animation-delay:1.25s}
@keyframes social_animation {0% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-300,0,0,1)}
1.3% {transform:matrix3d(3.905,0,0,0,0,1,0,0,0,0,1,0,-237.02,0,0,1)}
2.55% {transform:matrix3d(4.554,0,0,0,0,1,0,0,0,0,1,0,-182.798,0,0,1)}
4.1% {transform:matrix3d(4.025,0,0,0,0,1,0,0,0,0,1,0,-125.912,0,0,1)}
5.71% {transform:matrix3d(3.039,0,0,0,0,1,0,0,0,0,1,0,-79.596,0,0,1)}
8.11% {transform:matrix3d(1.82,0,0,0,0,1,0,0,0,0,1,0,-31.647,0,0,1)}
8.81% {transform:matrix3d(1.581,0,0,0,0,1,0,0,0,0,1,0,-21.84,0,0,1)}
11.96% {transform:matrix3d(1.034,0,0,0,0,1,0,0,0,0,1,0,4.825,0,0,1)}
12.11% {transform:matrix3d(1.023,0,0,0,0,1,0,0,0,0,1,0,5.53,0,0,1)}
15.07% {transform:matrix3d(0.947,0,0,0,0,1,0,0,0,0,1,0,12.662,0,0,1)}
16.12% {transform:matrix3d(0.951,0,0,0,0,1,0,0,0,0,1,0,13.007,0,0,1)}
27.23% {transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.352,0,0,1)}
27.58% {transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.121,0,0,1)}
38.34% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.311,0,0,1)}
40.09% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.291,0,0,1)}
50% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.048,0,0,1)}
60.56% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0.007,0,0,1)}
82.78% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
100% {transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}}</style><div class="profile-card">    <header>        <a href="https://www.facebook.com/Support.VHN.Follow"><img src="https://graph.facebook.com/100010646251256/picture?type=large" style="display: block;" />        </a>        <h1>Võ Hữu Nhân</h1>        <div class="title-wrap"><h3><font color="#fff">- Admin Star Nhân IT -</font></h3></div>    </header>    <div class="profile-bio">        <p>Giới Thiệu Về Tôi</p>        <p> - Tôi có đam mê về Code, thích khám phá những điều thú vị trên mạng internet. Biết đôi chút về Photoshop, Facebook và Blogspot...              <br /> - Hiện tại tôi đang sống ở Hà Nội.            <br />            </p><center>Website: wWw.StarNhanIT.Com</center>        <p></p>    </div>    <ul class="profile-social-links">        <li>              </li>        <li>              </li>        <li>            <a href="https://www.facebook.com/Support.VHN.Follow" target="_blank"><img src="http://i.imgur.com/MGr2Xgh.png" original="http://i.imgur.com/MGr2Xgh.png" style="display: inline;" />            </a>        </li>        <li>            <a href="https://plus.google.com/109843153617492271049" target="_blank"><img src="http://i.imgur.com/cH4dmJZ.png" original="http://i.imgur.com/cH4dmJZ.png" style="display: inline;" />            </a>        </li>    </ul></div></h2>

Vậy là xong nhé chúc các bạn thành công !!!