C

Hướng dẫn tạo khung tác giả/ Author tuyệt đẹp cho Blogspot

Hôm nay Star Huy Blog 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.




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}
Chèn vào như thế này.


 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/AVvXsEhXXojVJHeAHMULyPZCEOVUeolzN5VUbpyctEhHG9H_P6tHIP-wjfPhXIf00FgOM6bFTJNb64uDq5f-9v1aIZENamENyYvBKcj-uqTmITZH7jwkLnIyW2nOZetsKSlYKNitc8cGMMs1a9Y/s640/13659159_219645278432918_1927850793093982136_n.jpg' width='130'/></a></div><div class='author_description_container'><h4><a href='#' rel='https://www.facebook.com/NDH.13'><span style='color: #190B07; font-family: Lobster; font-size: 25px;'>Tác Giả: Kiều Gia Huy </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 Huy Blog, 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/NDH.13' 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>
Chèn như thế này : 


Lưu mẫu là xong. Chúc các bạn thành công
Hướng dẫn tạo khung tác giả/ Author tuyệt đẹp cho Blogspot Reviewed by KIỀU GIA HUY on tháng 6 30, 2017 Rating: 5

1 nhận xét:

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Star Cường IT. Được tạo bởi Blogger.