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!