Thảo Luận

×Close

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

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

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

19 nhận xét
Hiển thị
  1. úp cho cường đẹp trai :v

    Trả lờiXóa
  2. Nặc danh15 tháng 10

    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. Cường đẹp trai :v

      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. chèn vào nơi bạn thích là sao?

    Trả lờiXóa
  5. 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
Mới hơn Cũ hơn

Oops!! CÓ VẺ NHƯ BẠN ĐANG BẬT ADBLOCK

Quảng cáo giúp StarCuongIT.Com duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.

Bạn vui lòng tắt Adblock hoặc cho QuangNinhBay.Com vào danh sách trắng trong công cụ chặn quảng cáo của bạn. Cảm ơn!

×