Top Ad unit 728 × 90

.

Mới nhất

Seo-blogspot

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 tôi 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 tích hợp nên khá basic 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 triển khai như sau:


Coppy đoạn css sau và đặt trước </style> hoặc ]]></b:skin>
/*Author box by seocucre.com*/
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 xào luộc đ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="https://www.seocucre.com" 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="https://www.seocucre.com" 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/seocucre.com" 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ớ chỉnh sửa url và thông tin lại cho tương xứng với bạn. Nếu có thắc bận bịu gì về khung thông tin tác giả style wordpress cho blogspot này vui mắt đóng góp ý kiến ở mục comment.

Thanks to DongVietBlog




Hãy để lại comment phía dưới, quản lý viên của Seocucre.com sẽ hỗ trợ bạn
chúc mọi người thành công!!
Khung thông tin tác giả style wordpress cho blogspot Reviewed by Thietkeblogspot on 4:12 PM Rating: 5

No comments:

All Rights Reserved by Seo cực rẻ © 2014 - 2015

Liên hệ để SEO ngay

Name

Email *

Message *

Powered by Blogger.