Custom Stats

Người theo dõi

BLOGGER CSS BLOGSPOT WIDGET BLOGSPOT 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/AVvXsEjrZsWIN69eK0gInB8ogAj5mqK1YCPPwaZkbVenaTfK349IxIvLdgd0MLStP5PUhKHfErDemfGPyS18tzVnkJcoW4f0fClIpBaYNwlDvMdnwPwx1IjfR3ryHaInEcrwMs_BP4r1mgj4Ka-G/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!
- - 0 bình luận - lượt xem
http://starptit.blogspot.com/2017/06/them-tien-ich-html-gioi-thieu-ve-admin.html

BÌNH LUẬN (0)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé