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

Demo - Xem Trước

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é :)

CHIA SẺ BÀI VIẾT

- - 19 bình luận
CHUYÊN MỤC

BÌNH LUẬN (19)

  1. Chú đủ tên z ? Nguyễn Mạnh Cường , Nguyễn Phú Cường, các kiểu con đà điểu

    Trả lờiXóa
    Trả lời
    1. Không phải bác ơi. Nguyễn Phú Cường là e. E cả ông này cùng tên thôi chứ k phải 1 người :v

      Xóa
  2. Trả lời
    1. - Mới comback blog bác à :v

      Xóa
    2. Ừ. Mới qua blog bác ngắm lại bộ tuyệt tình cốc xong :))

      Xóa
  3. Trả lời
    1. Copy thì Ctrl+C thôi, không lẽ đến cái đơn giản như thế cũng không biết?

      Xóa
    2. lỡ phím hư thì coppy sao :v

      Xóa
    3. Phím hư thì Ctrl+F cũng không được luôn nhé :)) khỏi edit

      Xóa
    4. Hôm qua còn không bôi đen được í ><

      Xóa
    5. Chẳng có hôm nào là không bôi đen được cả.

      Xóa
  4. Cái này đem về chỉnh lại màu chắc. Tại màu đen tối quá :)

    Trả lờiXóa