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

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

Tạo khung thông tin tác giả cho blogspot - thủ thuật blogger

    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.

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

    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>


    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
    Nội dung chính