Thêm Tiện Ích HTML Giới Thiệu Về Admin Đẹp Cho Blogpost

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="<b>https://lh3.googleusercontent.com/-SmJNpkK4nBs/WT5b8oiDvMI/AAAAAAAAAcM/_YOPsJoSL1wZkYavIOlWoA3L-7q10xNYwCL0B/s530-d-p-rw/avatar-chat-lu-6.jpg</b>
oh=ca9be09c71ac0a7a34e516b2ddd06dc8&oe=596994F2" style="display: block;" /> </a> <h1>
Admin Thanh Phú IT</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 ở Bình Định. <br /> </p>
<center>
Website: wWw.ThanhPhúIT.tk</center>
</div>
<ul class="profile-social-links">
<li> </li>
<li> </li>
<li> <a href="https://www.facebook.com/Thanh-Ph%C3%BA-IT-728497743995831/" 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/107433685176437042274" 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 cho phù hợp với blog bạn hơn.

Chúc các bạn thành công!