Khung Tác Giả Đơn Giản Với Hiệu Ứng Viền Chạy Trên Avatar Cho Blogspot
Trịnh Công Sơn - tháng 10 28, 2017Thứ Bảy, 28 tháng 10, 2017
Chia sẻ
- Copy liên kết
- Google +
Chọn hình thức muốn chia sẻ:
 |
| Khung tác giả đơn giản với hiệu ứng viền chạy trên avatar cho blogspot |
DEMO - XEM TRƯỚC
 |
| Hình Minh Họa |
CÁCH THỰC HIỆN:
Bước 1: Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML.Bước 2: Thêm đoạn CSS dưới đây trước thẻ ]]></b:skin>
/* Author Frame phucuongblogger*/
.author-profilepc{background:#2a2a2a;width:100%;height:auto;border:1px solid #dfe0e4;margin:10px 0 0px;padding:10px;position:relative;float:left}
.author-avatar{padding:0;height:140px;width:140px;float:left;margin:0;overflow:hidden;}
.author-fullname{font-size:20px;color:#ddd}
.author-info1{float:right;padding-left:10px;width:80%}
.author-info1 a{color:#ff6600}
.author-info1 a:hover{color:#fff}
.author-info1 span{font-size:17px;font-weight:500;color:#222}
.author-about{margin:0;padding:10px 0 10px;color:#fff;font-size:15px;text-align:justify}
.bar {
position: absolute;
width: 50px;
height: 5px;
background: #fff;
transition: all 1s linear;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bar.delay {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.top {
top: -5px;
left: -5px;
}
.right {
top: 18px;
right: -28px;
transform: rotate(90deg);
}
.bottom {
bottom: -5px;
left: -5px;
}
.left {
top: 18px;
left: -28px;
transform: rotate(90deg);
}
@-webkit-keyframes h-move {
0% {
left: -5px;
}
100% {
left: 200px;
}
}
@keyframes h-move {
0% {
left: -5px;
}
100% {
left: 200px;
}
}
.top, .bottom {
-webkit-animation-name: h-move;
animation-name: h-move;
}
@-webkit-keyframes v-move {
0% {
top: -5px;
}
100% {
top:228px;
}
}
@keyframes v-move {
0% {
top: -5px;
}
100% {
top:228px;
}
}
.right, .left {
-webkit-animation-name: v-move;
animation-name: v-move;
}
.main_box {
width: 140px;
height: 140px;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgueI0IpC6zL2ZLtGl-AUGnp8E8lPxEk2SvAC1Mj-964CyvTVOnFiViTSUl78i9niLBgDGt1UUUXxgbPqXqc_5y_E8ctoKTTbtITd4ESJpnYGp6yFs1nbbGE_O3uZuW-2HizHFB_RCEydj2/s1600/avatar2.jpg);
border: 5px solid #2a2a2a;
}
- Thay https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgueI0IpC6zL2ZLtGl-AUGnp8E8lPxEk2SvAC1Mj-964CyvTVOnFiViTSUl78i9niLBgDGt1UUUXxgbPqXqc_5y_E8ctoKTTbtITd4ESJpnYGp6yFs1nbbGE_O3uZuW-2HizHFB_RCEydj2/s1600/avatar2.jpg thành link avatar của bạn.
Bước 3: Chèn đoạn code hiển thị khung tác giả vào vị trí bạn thích:
<div class='author-profilepc' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>Chỉnh sửa lại thông số cho phù hợp với blog của bạn nhé.
<div class='author-avatar'>
<div class='main_box'>
<div class='bar top '/>
<div class='bar right delay'/>
<div class='bar bottom delay'/>
<div class='bar left '/>
</div>
</div>
<div class='author-info1'>
<div class='author-fullname'>
Tác giả: <a href='https://www.blogger.com/profile/14744889684461911717' rel='author'>Nguyễn Phú Cường</a> <i class='fa fa-diamond' style='color:#00FFFF'/><br/>
</div>
<p class='author-about'>Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!<br/><br/><i>"Only I can change my life. No one can do it for me." - Carol Burnett
</i></p>
</div>
</div>
Bước 4: Lưu template lại.
LỜI KẾT
Vậy là xong rồi đó, rất đơn giản đúng không?! Nếu thấy hay đừng quên để lại một comment hoặc 1 share nhé :))
Chúc các bạn thành công nhé :)