Tạo khung thông tin tác giả cho blogspot

Khung thông tin tác giả ( Author Box ) là một widget nhỏ nhưng khá hữu ích, nó giúp người đọc có thể dễ dàng tìm thấy thông tin về tác giả bài viết.

Thực hiện khung thông tin tác giả blogspot:

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 dưới vào nơi bạn muốn hiển thị

<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="#">123share.vn</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>

Xem Demo

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 123share.vn thành tên blog bạn.
Chúc bạn thành công.

Bài viết thuộc về Thanh Phú IT