Hướng Dẫn Tạo Khung Tác Giả Sử Dụng Avatar Facebook

Lướt qua STAR CƯỜNG IT thấy bài tạo khung tác giả đẹp lên mình mang về edit lại chút xíu thay avatar blog thành avatar Facebook cho nó mới mẻ

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 theloiit*/

.author-profilepc {
    background: #ffffff;
    width: 100%;
    height: auto;
    border: 1px solid #28b8d0;
    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: #5890ff
}

.author-info1 {
    float: right;
    padding-left: 10px;
    width: 80%
}

.author-info1 a {
    color: #069999
}

.author-info1 a:hover {
    color: #000000
}

.author-info1 span {
    font-size: 17px;
    font-weight: 500;
    color: #000000
}

.author-about {
    margin: 0;
    padding: 10px 0 10px;
    color: #000000;
    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://graph.facebook.com/100002946393670/picture?width=200);
    border: 5px solid #069999;
}

border: 5px solid #069999;
}

• Thay 100002946393670 thành ID Facebook 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.facebook.com/Lowji194' rel='author'>Thế Lợi IT</a> <i class='fa fa-check-circle' /><br/>

•         </div>

•         <p class='author-about'>Là blog phi lợi nhuận, chia sẻ thủ thuật hoàn toàn miễn phí. Tất cả bài viết đều được phát triển bởi Admin, nếu bài viết này liên quan đến nguồn hoặc bản quyền của bạn thì hãy nhận xét xuống dưới để được gỡ bỏ. Cảm ơn bạn!<br/><br/><i>Dịch Vụ Vip Like Giá Rẻ</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.
• Nguồn: STAR CƯỜNG IT