Khung thông tin tác giả style wordpress cho blogspot

Dưới đây là style author box đẹp trên nền tảng wordpress mình thấy khá đẹp để thêm vào blogger giúp blog của bạn thêm đẹp hơn, dạng box info tác giả chỉ với css và html kết hợp nên khá đơn giản và nhẹ nhàng.

Author box style wordpress cho blogspot

Bạn có thể xem demo như hình dưới đây:
Khung thông tin tác giả style wordpress cho blogspot

Để thêm author box style wordpress này vào blog bạn thực hiện như sau:


Coppy đoạn css sau và đặt trước </style> hoặc ]]></b:skin>
/*Author box by tips24h.net*/
a{text-decoration:none}
.author-box {
background: #F8F8F8;
margin-top: 10px;
overflow: hidden;
padding: 10px;
border: 1px solid #eee;
border-bottom: 3px solid #37B8EB;
box-shadow: 0px 1px 3px 0px #B5B5B5;
}
.avatar-author {
float: left;
margin-right: 3px;
border: 1px solid #FFF;
padding: 5px;
}
.info-author {
width: 100%;
}
.info-author h2 {
font-size: 18px;
margin: 0px !important;
color: #333;
}
.author-social {
margin-top: 5px;
}
.author-social a {
opacity: 0.7;
margin-left: 2px;
}
.author-social a:hover {
opacity: 1;
}
.author-social a img {
width: 25px;
}
Tiếp tục coppy đoạn html sau và đặt ở nơi nào bạn muốn box thông tin tác giả xuất hiện.
<div class="author-box" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<img class="avatar-author" height="100" src="https://lh3.googleusercontent.com/-A0UygE-G1e4/AAAAAAAAAAI/AAAAAAAAPO0/R9VTXriRBKM/s120-c/photo.jpg" width="100"> <div class="info-author" itemprop="description"> <h2>Tác giả: <a href="http://www.tips24h.net" target="_blank"><span itemprop="name">Akatsuki</span></a></h2> <p>Lao động hăng say, tình yêu sẻ đến...</p> </div>
<div class="author-social">
<a href="http://www.tips24h.net" title="Website" target="_blank"><img alt="" src="https://lh5.googleusercontent.com/-bTOvDNpc0Dc/VLTozXJQURI/AAAAAAAAAq0/bGzWE4TNUx0/s32-no/author_site.png"></a>
<a href="http://twitter.com/" title="Twitter" target="_blank"><img alt="" src="https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png"></a>
<a href="http://facebook.com/tips24h.net" target="_blank" title="Facebook"><img alt="" src="https://lh4.googleusercontent.com/-z_Icq6321-Q/VLToxhma_pI/AAAAAAAAAqU/JzgC9MNsKqg/s32-no/author_facebook.png"></a>
<a href="https://plus.google.com/+tips24hnet" title="Google Plus"><img alt="" src="https://lh6.googleusercontent.com/-FwUnAvnCh2Q/VKNNdWphKWI/AAAAAAABDrk/KvEc7mdV4Qw/s0/Google%252520Plus.png" target="_blank"></a>
<a href="http://www.linkedin.com/" title="Linkedin"><img alt="" src="https://lh3.googleusercontent.com/-V6MD9_08weI/VLToy7aK5SI/AAAAAAAAAqk/BqWgKEnIY2w/s32-no/author_linkedin.png"></a> <a href="http://www.youtube.com/" title="Youtube" target="_blank"><img alt="" src="https://lh5.googleusercontent.com/-b4Li72ENuZc/VLTo0XsqZeI/AAAAAAAAAq8/9cyjb-ud72U/s32-no/author_youtube.png"></a>
<a href="http://pinterest.com/" title="Pintrest" target="_blank"><img alt="" src="https://lh6.googleusercontent.com/-9N92HihQmTs/VLTozCtU73I/AAAAAAAAAqw/LNQXRhjQrbw/s32-no/author_pinterest.png"></a>
</div>
</div>
Nhớ thay đổi url và thông tin lại cho phù hợp với bạn. Nếu có thắc mắc gì về khung thông tin tác giả style wordpress cho blogspot này vui lòng đóng góp ý kiến ở mục comment.

Thanks to DongVietBlog
Donate MoMo: 035.45.48.599
Bài đăng mới hơn Bài đăng mới hơn Bài đăng cũ hơn Bài đăng cũ hơn

Bài đăng khác

7 nhận xét

Khi Comment hãy click vào "Thông báo cho tôi" để theo dõi phản hồi mới nhất từ admin
  1. admin cho hỏi tại sao tạo trang trên blogsot không hiện nội dung nhỉ, chỉ hiện có tiêu đề thôi

    Trả lờiXóa
    Trả lời
    1. Cái này mình chịu ấy bạn, bạn xem thử chứ nhiều nguyên nhân và mình chưa rành hết được nên....:p

      Xóa
  2. cái phần đâu em ko biết nhét vào đâu vào widget hay sao ạ

    Trả lờiXóa
  3. đặt trước </style> hoặc ]]></b:skin>

    Trả lờiXóa
  4. Cái icon Google Plus bị lỗi rồi bác ơi =(

    Trả lờiXóa
    Trả lời
    1. Bác tìm cái icon nào khác thêm vào nhé, mấy nay em cũng lười k cập nhật gì cả

      Xóa