Thêm hộp tác giả/Author Box phía dưới bài viết.

GroupMMO tháng 6 24, 2016

Hộp giả là một phần nhỏ trong một blog mà tác giả của blog có thể hiển thị thông tin về bản thân, hồ sơ xã hội và hình ảnh. Đây là một tiện ích rất tiện dụng cho blog. Thông qua tiện ích này, bạn có thể chia sẻ với độc giả các liên kết hồ sơ phương tiện truyền thông. Giúp tăng độ thẩm mỹ và chuyên nghiệp :3

Cách thêm hộp tác giả/Author Box:

Bước 1: Vào Mẫu -----> Chỉnh sửa HTML -----> tìm đến thẻ ]]></b:skin> và thêm code này lên trên nó:

.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(' http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png' ); color:#444444; } .wc-aboutauthor h5 { color:#6E6F69; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; } .wc-aboutpic { float:right; margin:0 0 0 10px; } .wc-aboutpic img { border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; } .wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px rgba(0,0,0,.3); -moz-box-shadow:0 0 10px rgba(0,0,0,.3); box-shadow:0 0 10px rgba(0,0,0,.3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); } .wc-aboutsoc img { height:35px; margin-bottom:-13px; } .wc-aboutsoc p { font:16px georgia; color:#ffffff; background:#ea5a50; display:inline; border-radius:5px; padding:5px; margin-right:30px; }

Bước 2: Tìm đến đoạn mã <data:post.body/> và thêm code dưới đây lên trên nó:

<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='100' src='https://lh3.googleusercontent.com/-BsZ5bdP6R3I/V7ht3zgQF7I/AAAAAAAABpo/uadCrO7irvI4q2qUBb0vh7kewy-LdHvlwCL0B/s577-no/13906849_303026530051630_3282969108113662243_n.jpg' width='100'/>
</div>
<h5>Phần giới thiệu của bạn vào đây :</h5>
<div style='text-align: justify;'>
<b>Tên của bạn ở đây</b></div>
<div class='wc-aboutsoc'>
<p> Tìm tôi trên
</p> <a href='https://facebook.com/ID' rel='nofollow'><img src='http://4.bp.blogspot.com/-frQJd3hM3_g/U52-1HBbhMI/AAAAAAAAJo0/hd3eEmdb5Dw/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
<a href='https://twitter.com/ID' rel='nofollow'><img src='http://1.bp.blogspot.com/-labHOmSWZO4/U52-67X2qBI/AAAAAAAAJps/i31FhIunKWk/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
<a href='https://plus.google.com/ID' rel='nofollow'><img src='http://2.bp.blogspot.com/-DqK2gGKhHuc/U52-1SJFBnI/AAAAAAAAJo8/CIO8FwIXPVg/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
<a href='http://youtube.com/ID' rel='nofollow'><img src='http://4.bp.blogspot.com/-m-c8BwrVEm4/U52-681QNaI/AAAAAAAAJpo/2oVBdElHSg8/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
</div>
</b:if>