Thêm Khung Thông Tin Tác Giả phong cách Minimal vào thanh Sidebar cho Blogger

How to Add a Minimal Style Author Box For Sidebar in Blogger

Theo xu hướng thiết kế theo dạng phẳng đang được ưa chuộng hiện nay. Hôm nay Iris Tips sẽ giới thiệu cho các bạn cách tạo Author Box cho Blogger. Author Box sẽ giúp tăng sự tương tác giữa tác giả blog và độc giả. Hy vọng bạn thích nó.

Tính năng

- Thiết kế theo phong cách phẳng hiện đại.
- Phong cách awesome cho ảnh profile.
- Chiểu rộng linh hoạt, có thể tùy biến.
- Sử dụng icon: font-awesome.

Cách thực hiện

Bước 1: Vài Mẫu >> Chỉnh sửa HTML và chèn trước thẻ ]]></b:skin> đoạn code sau

  .bx-author {
    min-width: 300px;
max-width:300px;
    max-width: 300px;
    background: #FAFAFA;
    border-top-style: solid;
    border-color: #85C15D;
    border-width: 10px;
}
.clear {
    clear: both;
}
.bx-wrap {
    margin: auto;
    max-width: 290px;
}
.bx-image {
    height: 120px;
    width: 120px;
    border-radius: 100px;
    border-color: #E3E3E3;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    margin-top: -50px;
}
.bx-head {
    text-transform: uppercase;
    font-size: 20px !important;
    line-height: 1.5em!important;
    text-transform: uppercase!important;
    color: #666666!important;
    text-transform: uppercase!important;
    font-family: 'Open Sans', sans-serif!important;
}
.bx-info {
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    text-align: center;
    width: 80%;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
.bx-social {
    background: #E3E3E3;
}
.bx-social ul {
    list-type: none !important;
    display: inline!important;
}
.bx-social li {
    list-type: none !important;
    display: inline!important;
}
.bx-social li a {
    font-size: 20px !important;
    color: #333 !important;
    padding-left: 5px;
    text-decoration: none;
} 

Bước 2: Bây giờ tìm thẻ </head> và chèn đoạn code dưới đây vào trước nó.

 <link href="https://sites.google.com/site/iristipsblogger/file/bxperts-fonts.css" rel="stylesheet" type="text/css" /><link href="https://sites.google.com/site/iristipsblogger/file/bxperts-fonts-min.css" media="all" rel="stylesheet" type="text/css" /> 

Bước 3: Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code bên dưới đây vào

 <!--Author Box For Sidebar by iris-tips.blogspot.com-->
<div class="bx-author"><div class="bx-wrap"><center><img class="bx-image" src="http://lh3.googleusercontent.com/-ZoaAW8JC_cI/AAAAAAAAAAI/AAAAAAAAH70/HKh0W0ghJMs/s512-c/photo.jpg" /><div class="clear"/><br/><div class="bx-head"><b>IRIS TIPS</b></div><br/><div class="bx-info">
 </div>
</div>
</center>
</div>
<div class="bx-social">
<ul>
<center>
<li><a href="#"><i class="fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-gplus"></i></a></li>
<li><a href="#"><i class="fa-rss"></i></a></li>
<li><a href="#"><i class="fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa-gmail"></i></a></li>
<li><a href="#"><i class="fa-dribble"></i></a></li>
<li><a href="#"><i class="fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa-youtube"></i></a></li>
<li><a href="#"><i class="fa-instagram"></i></a></li>
</center>
</ul>
</div>
</div> 
<!--Author Box For Sidebar by iris-tips.blogspot.com--> 

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mbx/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm