Hôm nay, Themix sẽ chia sẻ đến các bạn cách tạo khung thông tin tác giả cho Blogspot được viết bởi Blogger Thanh Phú IT. Với những cách làm đơn giản những sẽ mang lại cho các bạn một 'khung tác giả' vô cùng đẹp mắt.

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

Demo  (Github)

Hướng dẫn cách làm

Bước 1: Chèn đoạn code CSS 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 HTML này vào dưới chỗ 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://i.imgur.com/JOCNZqo.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

Các bạn thay https://i.imgur.com/JOCNZqo.jpg thành link ảnh khung tác giả của các bạn.
Thay tên Thanh Phú IT thành tên các bạn.

Khá đơn giản để có một khung thông tin tác giả cho blogspot đúng không nào. Chúc các bạn thành công!