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


Demo - Xem Trước

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
3 bình luận
Tag
  • 3 bình luận
  • Mặt cười
  • Chèn ảnh
  • Mã hóa HTML
  • Lưu ý
  • Admin Panel
  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3
  • Chức năng này hiện chưa khả dụng, bấm vào đây để sử dụng tạm.
  • Hướng dẫn bình luận

    Chèn chữ in đậm: Chữ in đậm

    Chèn chữ in đậm: Chữ in nghiêng

    Chèn ảnh: [img]Link Ảnh[/img]


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

    Không đăng bình luận có nội dung khiêu dâm, 18+

    Không đăng bình luận có liên quan đến chính trị, nhà nước.

    Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

    Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

    Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

    Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

    Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

    Được đăng bình luận có liên quan đến nội dung bài viết.

    Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

    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ạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.

    Bấm vào đây để xem chi tiết hơn nội quy trên Blog.

  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!