Liên hệ Zalo 0948.713.329 Để Nhận Tư Vấn Hỗ Trợ

Hướng dẫn tạo khung tác giả đẹp cho blogger (blogspot)

Hướng dẫn tạo khung tác giả đẹp cho blogger (blogspot)

Cập nhật ngày Bởi

Hôm nay Yingvn xin hướng dẫn các bạn tạo khung tác giả đẹp, thì cái này đã có nhiều người post lên mạng xã hội rồi nhưng cũng không đẹp cho lắm. Nên hôm nay mình sẽ hướng dẫn tạo khung tác giả/ Author tuyệt đẹp.

Hướng dẫn tạo khung tác giả đẹp cho blogger (blogspot)

Bước 1 :Chèn đoạn code này vào dưới thẻ ]]></b:skin>

 .authorboxwrap {                                                     
Font-family: arial;
background: #fff;
margin: 10px auto 20px;
padding: 2px;
overflow: hidden;
border: 1px solid #ccc;
}
.avatar-container {
float: left;
margin-right: 20px;
border: 0px solid silver;
padding: 3px;
}
.authorsocial a {
display: inline-block;
text-align: center;
margin-right: 10px;
}
a, a:visited {
text-decoration: none;
font-weight: 200;
}
a {
color: #10b2f5;
}
.fb_iframe_widget {
display: inline-block;
position: relative;
}
.author_description_container h4 {
font-family: arial;
font-weight: 700;
font-size: 16px;
display: block;
margin: 0;
margin-bottom: 2px;
}
.author_description_container h4 a {
color: #ef4824;
}
a,a:visited{text-decoration:none;font-weight:400}
.author_description_container p{margin:0 0 8px;color:#888;font-size:95%;font-family:arial}
.authorsocial a i{font-family:Fontawesome;width:30px;height:30px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:100%;transition:all .3s}

 Bước 2 :Rồi các bạn chèn đoạn code này sau đoạn <div style='clear:both'/>
 <div class='authorboxwrap'><div class='authorboxfull'><div class='avatar-container'><a href=''><img class='author_avatar' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYg4p9iJ8jCTIjGDJDxR6EabnLi90HnnMHFSNupG0OSHtHf80fXv625ENxQZwNeE0lxkLbvNFckZtQbetTzX2VedaurDup6I4zsI_qQhLs019BZwtaVKU-cgDxty5DWlWUCzseLpQiphUR/s220/logo+stc.png' width='130'/></a></div><div class='author_description_container'><h4><a href='#' rel='https://www.facebook.com/phanmanhcuong1999'><span style='color: #190B07; font-family: Lobster; font-size: 25px;'>Tác Giả: Phan Mạnh Cường </span><i class='fa fa-check' style='color:#00bff3; font-size: 30px'/>
</a>
</h4><p/><p><font size='+1'><span style='color: #190B07; font-family: Lobster; font-size: 20px;'>Là một cậu học sinh trung học có nhiều ước mơ,hoài bão. Hiện đang là admin của Star Cường IT, website chia sẻ thủ thuật, ảnh bìa chất. </span><i class='fa fa-pencil-square-o' style='color:#190B07'/></font></p><div class='authorsocial'>
<a class='img-circle1' href='https://www.facebook.com/phanmanhcuong1999' rel='nofollow' target='_blank'><i class='fa fa-facebook-square' style='color:#3a5897; font-size: 30px'/></a><a class='img-circle2' href='http://www.twitter.com/' rel='nofollow' target='_blank'><i class='fa fa-twitter-square' style='color:#2daae1; font-size: 30px'/></a><a class='img-circle3' href='https://plus.google.com' rel='nofollow' target='_blank'><i class='fa fa-google-plus-square' style='color:#dd5144; font-size: 30px'/></a><a class='img-circle4' href='https://www.youtube.com/' rel='nofollow' target='_blank'><i class='fa fa-youtube-square' style='color:#dd2c28; font-size: 30px'/></a></div></div>
</div>
</div>
Như Vậy là các bạn đã hoàn thành rồi , hãy chỉnh sửa lại một tý nữa thì sẽ hoàn chỉnh hơn ! Cuối cùng chúc các bạn thành công !

Comments

Call
0948713329
Contact Me on Zalo