Tạo Khung Thông Tin Tác Giả Cho Blogspot

Hello bé Lê Văn Đạt, á nhầm xin chào mọi người. Hôm nay, Thanh Phú IT hướng dẫn các bạn tạo khung thông tin tác cho blogspot đơn giản và chất. Và cuối cùng chúc mọi người năm mới an khang thịnh vượng, vạn sự như ý, tiền vô xồng xốc - tiền ra từ từ và tràn đầy hạnh phúc.

CÁCH THỰC HIỆN

Bước 1: Chèn đoạn code này vào dưới ]]></b:skin>

.autor-avatar img:hover {
    border-radius: 5px!important;
}
.author-box{
float: left;
border: 1px solid #ddd;
background: linear-gradient(260deg, #3492b5, #0ecf8a);
border-radius: 3px;
padding: 15px;
margin: 15px 0 10px;
}
.autor-avatar{float:left;width:130px}
.autor-avatar img{        transition: .4s;
height: auto;
width: 95px;border: 3px solid #fff;border-radius:100px}
.author-box .name{color: white;font-size:20px}
.author-box a{    text-transform: uppercase;
font: 700 21px Roboto Condensed;color:#424242;}
.author-box p.desc{color: white;margin:8px 0}
body {
background: #f8f8f8 url() repeat scroll top left;
font-family: 'Roboto', sans-serif;
color: #777;
font-size: 14px;
font-weight: 400;
word-wrap: break-word;
margin: 0;
padding: 0
}

Bước 2: Chèn đoạn code này vào dưới chỗ bạn muốn chèn.

<div class="author-box">
<div class="autor-avatar">
<img alt="" class="avatar avatar-130 photo" height="130" src=" https://1.bp.blogspot.com/-vr0tnuoHhOk/XAfDObgKX0I/AAAAAAAAA-A/SEwwUP8IDZMEEC58w36fE_HtsIYNCqa9ACK4BGAYYCw/s220/43626275_1359235400885750_8159768770919792640_n.jpg" width="130">
</div>
<div class="right">
<div class="name">Tác giả: <a href="#">Thanh Phú IT</a>
</div>
<p class="desc">Tôi lang thang trên đường đời, bỏ qua những thứ quan trọng nhất. Để rồi khi ngoảnh lại, chỉ còn Tôi - Các Bạn và Blog!</p>
</div>
</div>

TÙY CHỈNH

Thay đổi ảnh thì bạn thì bạn chỉ cần thay đổi link này https://1.bp.blogspot.com/-vr0tnuoHhOk/XAfDObgKX0I/AAAAAAAAA-A/SEwwUP8IDZMEEC58w36fE_HtsIYNCqa9ACK4BGAYYCw/s220/43626275_1359235400885750_8159768770919792640_n.jpg

Thay tên Thanh Phú IT thành tên bạn.

Chúc bạn thành công.