THÊM TIỆN ÍCH HTML GIỚI THIỆU VỀ ADMIN ĐẸP CHO BLOGSPOT

ẢNH MINH HỌA

HƯỚNG DẪN CÁCH LÀM:

Để thực hiện thêm tiện ích này bạn cần Đăng nhập blogger -> Bố cục -> Thêm tiện ích HTML sau đó coppy đoạn code phía dưới dán vào và lưu lại.

<div class='widget-content'><h2 style="border-bottom: 3px solid #fff"><style>.profile-card header img {border-radius:50%;margin:15px auto;display:block;width:200px;height:200px;border:5px solid #fff}
.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:#00bcd4;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:#fff;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 #fff;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);font-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:#fff;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/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZO5AS3v3ccCqMDlnF6H0tdUgUUh0hZXv3hmuYdFHzd6TAHidrSZhicXrfEorWOHhaKavemEZ9EwUJe55z94jDgSvn9ikhjrVEo8g03UKx9QqQISQ7d59GHBDjYDQcEbvMxZ1dEoxGry_/s1600/16831178_279980069101942_9196207627845511901_n.jpg?oh=ca9be09c71ac0a7a34e516b2ddd06dc8&amp;oe=596994F2" style="display: block;" />        </a>        <h1>Admin Nguyễn Tỉnh</h1>        <div class="title-wrap"><h3><font color="#fff">- Freelancer -</font></h3></div>    </header>    <div class="profile-bio">        <p>Giới Thiệu Về Tôi</p>        <p> - Tôi có đam mê về Coder, 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 ở Đắk Lắk.            <br />            </p><center>Website: wWw.StarTinhIT.Com</center>        <p></p>    </div>    <ul class="profile-social-links">        <li>              </li>        <li>              </li>        <li>            <a href="https://www.facebook.com/#" 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/111948252017184609370" 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></div>

Các bạn có thể thay đổi phần chữ màu đỏ để phù hợp với mình hơn!
Chúc các bạn thành công!