Huỳnh Hoài Bảo - Bảo Shady Blog
Hôm nay cuối tuần, ngồi nhà chán chán đem sửa lại cái khung tác giả cuối mỗi bài viết. Cũng do lâu không viết bài nên giờ viết để chia sẻ cho các bạn khung tác giả (Author Box) đơn giản có hiệu ứng viền chạy chạy trên avatar đây.




Khung tác giả đơn giản với hiệu ứng viền chạy trên avatar cho blogspot

Khung tác giả đơn giản với hiệu ứng viền chạy trên avatar cho blogspot Hình Minh Họa LIVE DEMO

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(//2.bp.blogspot.com/-R49bjeJV_1k/WeMxy21-kzI/AAAAAAAAAXE/HqEVPopF-yEgXJ0rO6HxE_cMH03450MPQCLcBGAs/s1600/avatar2.jpg);
border: 5px solid #2a2a2a;
}
 Thay: //2.bp.blogspot.com/-R49bjeJV_1k/WeMxy21-kzI/AAAAAAAAAXE/HqEVPopF-yEgXJ0rO6HxE_cMH03450MPQCLcBGAs/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'>
<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>&quot;Only I can change my life. No one can do it for me.&quot; - Carol Burnett
  </i></p>
</div>
</div>
 Chỉnh sửa lại thông số cho phù hợp với blog của bạn nhé.
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é :)
                                                      Nguồn: Star Cường IT

2 nhận xét:
  1. Code hiển thị khung tác giả chèn ở đâu ạ

    Trả lờiXóa
1. Chèn ảnh: [img]Link ảnh[/img]
2. Chèn video: [youtube]ID Video[/youtube]
Hướng dẫn lấy ID Video từ Youtube

Ví dụ video có link trực tiếp: https://www.youtube.com/watch?v=BUaLnDL3f-M, ta sẽ lấy BUaLnDL3f-M và thay vào vị trí ID Video ở cú pháp trên.

Nội quy chung Bảo Shady Blog

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Bảo Shady Blog - Life Is Share
- Thành lập: 01/08/2017
- Nội dung: Blog chủ yếu viết về những thủ thuật blog, và các thủ thuật khác. Ngoài ra, blog thi thoảng còn chia sẻ một vài bài viết về đời sống, share ảnh đẹp, tin tức về đời sống...
- Tác giả blog: Huỳnh Hoài Bảo hiện đang là học sinh cấp 2 THCS Lê Thị Cẩm Lệ, Bạc Liêu.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!