Tạo Author Box giới thiệu bản thân cho Blogger
22 – 01 - 2015
ở
một số blog, các blogger thường đặt một Author Box bên dưới bài viết để các độc giả biết được thông tin về người đã đăng tải bài viết.
Dưới đây là hình ảnh Demo của thủ thuật này, sau khi thực hiện các bước cài đặt các bạn sẽ có một Author box tương tự.
Bước 1: Đăng nhập vào tài khoản Blogger > Mẫu > Chỉnh sửa HTML.
Bước 2: Tìm đến thẻ đóng ]]></b:skin> và thêm vào trước nó đoạn CSS đã được mình chuẩn bị sẵn phía bên dưới.
/*Start Authox-Box-CSS by Tinhocpro*/
#thp-author-box{
display:block;
background:#F5F5F5;
width:100%;
font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
border:1px solid #ddd;
padding:5px;
margin-top:5px;
}
#thp-author-box .thp-author-avatar{
display:block;
float:left;
}
#thp-author-box .thp-author-avatar img{
display:block;
width:100px;
height:100px;
padding:3px;
border:1px solid #ddd;
margin-right:10px;
}
#thp-author-box .thp-author-name{
display:block;
font-size:18px;
font-weight:bold;
}
#thp-author-box .thp-author-description{
display:block;
}
#thp-author-box .thp-author-description p{
margin:5px 0px;
font-size: 15px;
line-height:1.5em;
text-align:justify;
}
.thp-author-social a{
opacity: 0.7;
}
.thp-author-social a:hover{opacity: 1.0;}
/* hiệu ứng xoay 360 độ cho ảnh social*/
.thp-author-social a:hover img{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
/*End Author-Box-CSS by Tinhocpro*/
#thp-author-box{
display:block;
background:#F5F5F5;
width:100%;
font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
border:1px solid #ddd;
padding:5px;
margin-top:5px;
}
#thp-author-box .thp-author-avatar{
display:block;
float:left;
}
#thp-author-box .thp-author-avatar img{
display:block;
width:100px;
height:100px;
padding:3px;
border:1px solid #ddd;
margin-right:10px;
}
#thp-author-box .thp-author-name{
display:block;
font-size:18px;
font-weight:bold;
}
#thp-author-box .thp-author-description{
display:block;
}
#thp-author-box .thp-author-description p{
margin:5px 0px;
font-size: 15px;
line-height:1.5em;
text-align:justify;
}
.thp-author-social a{
opacity: 0.7;
}
.thp-author-social a:hover{opacity: 1.0;}
/* hiệu ứng xoay 360 độ cho ảnh social*/
.thp-author-social a:hover img{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
/*End Author-Box-CSS by Tinhocpro*/
Bước 3: Tìm đến <div class=’post-footer-line post-footer-line-3′> hoặc tương tự sau đó dán vào ngay sau nó đoạn HTML phía bên dưới đây.
<div id=”thp-author-box” itemprop=’author’ itemscope=’itemscope’ itemtype=’http://schema.org/Person’>
<div class=”thp-author-avatar”>
<img alt=”” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLIBycendLPc2o9rDL6gN8EwmZVNY1NhEGKiILxbUu2IfEbgS6ht1KGGd_oG4mgjeOPVl-f2o4EzGVoeyaWHJkQ9uL_1Uwy0UyOJvA4OtP22HEwZp907sNnAuEw-5IbWUwb85o7qFDtY/s320-no/Luffy%252BSwager.png” />
</div>
<div class=”thp-author-description”>
<span class=”thp-author-name” itemprop=’name’>
Tác giả: Thương Lee</span>
<p itemprop=’description’>Thích ngắm gái đẹp và viết lách blog để chia sẻ kiến thức cùng mọi người. Đây là dòng trích dẫn tiểu sử cần hiển thị.</p>
<div class=”thp-author-social”>
<a href=”http://www.tinhocpro.com” title=”My’s Homepage” target=”_blank”><img alt=”Home page” 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=”Twitter” src=”https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png” /></a>
<a href=”http://facebook.com/” target=”_blank” title=”Facebook”><img alt=”Facebook” src=”https://lh4.googleusercontent.com/-z_Icq6321-Q/VLToxhma_pI/AAAAAAAAAqU/JzgC9MNsKqg/s32-no/author_facebook.png” /></a>
<a href=”https://plus.google.com/” title=”Google Plus”><img alt=”Google+” src=”https://lh6.googleusercontent.com/-FwUnAvnCh2Q/VKNNdWphKWI/AAAAAAABDrk/KvEc7mdV4Qw/s32-no/Google%252520Plus.png”/></a>
<a href=”http://www.linkedin.com/” title=”Linkedin”><img alt=”Linkein” 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=”Youtube Channel” 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=”Pinterest” src=”https://lh6.googleusercontent.com/-9N92HihQmTs/VLTozCtU73I/AAAAAAAAAqw/LNQXRhjQrbw/s32-no/author_pinterest.png” /></a>
</div>
</div>
<div style=”clear:both;”></div>
</div>
<div class=”thp-author-avatar”>
<img alt=”” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLIBycendLPc2o9rDL6gN8EwmZVNY1NhEGKiILxbUu2IfEbgS6ht1KGGd_oG4mgjeOPVl-f2o4EzGVoeyaWHJkQ9uL_1Uwy0UyOJvA4OtP22HEwZp907sNnAuEw-5IbWUwb85o7qFDtY/s320-no/Luffy%252BSwager.png” />
</div>
<div class=”thp-author-description”>
<span class=”thp-author-name” itemprop=’name’>
Tác giả: Thương Lee</span>
<p itemprop=’description’>Thích ngắm gái đẹp và viết lách blog để chia sẻ kiến thức cùng mọi người. Đây là dòng trích dẫn tiểu sử cần hiển thị.</p>
<div class=”thp-author-social”>
<a href=”http://www.tinhocpro.com” title=”My’s Homepage” target=”_blank”><img alt=”Home page” 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=”Twitter” src=”https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png” /></a>
<a href=”http://facebook.com/” target=”_blank” title=”Facebook”><img alt=”Facebook” src=”https://lh4.googleusercontent.com/-z_Icq6321-Q/VLToxhma_pI/AAAAAAAAAqU/JzgC9MNsKqg/s32-no/author_facebook.png” /></a>
<a href=”https://plus.google.com/” title=”Google Plus”><img alt=”Google+” src=”https://lh6.googleusercontent.com/-FwUnAvnCh2Q/VKNNdWphKWI/AAAAAAABDrk/KvEc7mdV4Qw/s32-no/Google%252520Plus.png”/></a>
<a href=”http://www.linkedin.com/” title=”Linkedin”><img alt=”Linkein” 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=”Youtube Channel” 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=”Pinterest” src=”https://lh6.googleusercontent.com/-9N92HihQmTs/VLTozCtU73I/AAAAAAAAAqw/LNQXRhjQrbw/s32-no/author_pinterest.png” /></a>
</div>
</div>
<div style=”clear:both;”></div>
</div>
Bước 4: Lưu lại mẫu và kiểm tra ngay trên một bài viết nào đó.
Như vậy là các bạn đã tạo xong Author Box đẹp cho blogger, phần còn lại là sửa đổi các thông tin sao cho phù hợp với blog của bạn. Hãy trang trí khung thông tin tác giả được bao gồm các Social Icon và chút hiệu ứng đẹp để làm phong phú thêm cho blog của bạn.
Nhận xét