Author box từ css s2

Posted by on
Author box là khung để tác giả chia sẻ đôi điều về bản thân cho mọi người cùng biết. Trong bài này, mình sẽ giới thiệu một mẫu từ css và có kèm cả social bookmark nữa.
DEMO

#Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm
.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtOvkfHRlHi2dY1yjEXBUW1MCfjcNJeSaHkcOTYhj4RBv6NyQ7wHmKroklk3Q3EVIzt0T4wia9VK69LJ5NHqTcTGBny1YR2dI2pRiwIMtYaa7gtdMXnN_c5M8yi6UW8Wh-UW_uMgKRZiZ/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtOvkfHRlHi2dY1yjEXBUW1MCfjcNJeSaHkcOTYhj4RBv6NyQ7wHmKroklk3Q3EVIzt0T4wia9VK69LJ5NHqTcTGBny1YR2dI2pRiwIMtYaa7gtdMXnN_c5M8yi6UW8Wh-UW_uMgKRZiZ/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_WAaDIXLnPIksX5sPJHqpsvC4P4QDJ6lXSqtm_Ow8mTVR-3sTikyfJ5d6yVy4p_pD9aeNsfC6EmHenEkYWClNbeBJLAFmz6ZApqG2joguKs0umZOoG8Eu9j7psOMqHGoM43RWFdUs0aeY/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_WAaDIXLnPIksX5sPJHqpsvC4P4QDJ6lXSqtm_Ow8mTVR-3sTikyfJ5d6yVy4p_pD9aeNsfC6EmHenEkYWClNbeBJLAFmz6ZApqG2joguKs0umZOoG8Eu9j7psOMqHGoM43RWFdUs0aeY/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwUixqaqYn0iopdB0xeCc35-NagsBjTi2vL8xQp1M4acptbIfkjrab3YJl3gUejCJ3f6K8J5Cmp8yn8m5WaDrCo2n6aD_pictXnRG-GMM7Ct0lMHSNNgusjdN29piRhc_1TMWitG2J3aR/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwUixqaqYn0iopdB0xeCc35-NagsBjTi2vL8xQp1M4acptbIfkjrab3YJl3gUejCJ3f6K8J5Cmp8yn8m5WaDrCo2n6aD_pictXnRG-GMM7Ct0lMHSNNgusjdN29piRhc_1TMWitG2J3aR/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7D9RCpOAzUL0gzRdsm5NJxsFMBJMGoWk_3J80ITVkHDnp9HvUD-c2aJpsoNtDrFS6avAOfIxMKoqHQwNzyGY4URS60TNMMSIkEiH7RK8zBC2uAHv2Adju88IWRe2YAxiS70x2zpNGon7/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7D9RCpOAzUL0gzRdsm5NJxsFMBJMGoWk_3J80ITVkHDnp9HvUD-c2aJpsoNtDrFS6avAOfIxMKoqHQwNzyGY4URS60TNMMSIkEiH7RK8zBC2uAHv2Adju88IWRe2YAxiS70x2zpNGon7/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjSDbEsvIgKk0VUfuazSNo3LeWnQ0wDKwiDvzgdIAILfzoyASYQYwVes8xp09vm90MqohcRghaUs53lLcYTCycXMarokpMvVE7h_Ig4679IEv15AzyJh_RNE60I4Dcup0oSTh2wFGfCMCd/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjSDbEsvIgKk0VUfuazSNo3LeWnQ0wDKwiDvzgdIAILfzoyASYQYwVes8xp09vm90MqohcRghaUs53lLcYTCycXMarokpMvVE7h_Ig4679IEv15AzyJh_RNE60I4Dcup0oSTh2wFGfCMCd/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTkOF5ilIRxPjOfJS4D9pjLl9HzW8Lc4gouXzoz8yYgdDxwHqprcCvJR0w9WamNG9vrmwrWAgsE__39l76VrFGIJJiQtQIYo0x4S1XBZTPpSc43y5EmwiS3Y0JKpzLXMUfwZEW6a1SXYw/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTkOF5ilIRxPjOfJS4D9pjLl9HzW8Lc4gouXzoz8yYgdDxwHqprcCvJR0w9WamNG9vrmwrWAgsE__39l76VrFGIJJiQtQIYo0x4S1XBZTPpSc43y5EmwiS3Y0JKpzLXMUfwZEW6a1SXYw/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}
.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

#Thêm HTML

1. > Tìm thẻ dưới
<div class='post-footer'>
Thẻ này sẽ xuất hiện hai lần, chúng ta sẽ thực hiện thủ thuật này với thẻ thứ hai - thẻ nằm ở dưới so với thẻ kia.
2. > Dán code dưới vào dưới thẻ vừa tìm được
<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Quốc Khánh Bùi</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Your Image Link Here"/></div>
<div class="author-description">
Author Bio Here Write something about yourself.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">blogger widgets</a></p>
</div>
Lưu ý:
  • Phần màu đỏ sẽ được hiển thị ra màn hình
  • Phần màu xanh là các liên kết, các bạn thay thế cho phù hợp
Nguồn bloggingehow
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.