Tạo box thông tin bài viết & tác giả tuyệt đẹp bên dưới bài viết cho Blogspot
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Chào các bạn, chào mừng các bạn quay lại với Blog Bác Sĩ Windows - bacsiwindows.com
Theo như yêu cầu của một vài bạn gửi cho mình yêu cầu mình chia sẻ hộp thông tin bài viết và thông tin tác giả bên dưới bài viết do mình vừa làm xong.Như đã hứa thì hôm nay ngay lúc này mình sẽ hướng dẫn các bạn tạo box thông tin với hiệu ứng hover tuyệt đẹp này. Xem demo ngay tại bên dưới!
Các bước thực hiện
Bước 1. Thêm toàn bộ CSS sau vào trước thẻ]]></b:skin>
#bsw_entry_header{margin:10px 0;background:#fff;padding:10px;line-height:1.5;border-radius:10px;width:50%;float:left}Bước 2. Thêm toàn bộ HTML sau vào sau thẻ
#bsw_entry_header div{margin:0 0 5px;color:#666;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
#bsw_entry_header div:last-child{margin:0}/* source code by bacsiwindows.com */
#bsw_entry_header div i{background:#eee;width:30px;height:30px;line-height:30px;text-align:center;border-radius:100px}
#right-entry-header div.r-bsw div.author-bsw .social-info-bsw{position:absolute;width:100%;bottom:0;left:0;padding:10px;text-align:center;opacity:0;transition:.5s}
#right-entry-header div.r-bsw div.author-bsw .social-info-bsw p{display:inline-block}
#right-entry-header div.r-bsw div.author-bsw .social-info-bsw p i{background:#ededed;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;transition:.33s}
#right-entry-header div.r-bsw div.author-bsw .social-info-bsw p i:hover{background-color:#7577a9!important;color:white}
#right-entry-header{width:48.5%;float:right;background:white;margin:10px 0;border-radius:10px;position:relative;height:155px}/* source code by bacsiwindows.com */
#right-entry-header div.r-bsw{}
#right-entry-header div.r-bsw div.author-bsw{position:absolute;width:100%;height:100%}
#right-entry-header div.r-bsw div.author-bsw h10.author-bsw-name{font-family:Roboto Condensed;font-weight:700;text-transform:uppercase;color:#7577a9;top:15px;position:absolute;left:50%;transform:translate(-50%,0);font-size:20px;opacity:0;transition:.5s}
.author-bsw:hover h10{opacity:1!important}
#right-entry-header div.r-bsw div.author-bsw div.info-bsw-m{position:absolute;padding:10px;top:36px;line-height:1.3;font-family:'Roboto',sans-serif;color:#555;opacity:0;transition:.5s;text-align:center}
.author-bsw:hover .info-bsw-m{opacity:1!important}/* source code by bacsiwindows.com */
#right-entry-header div.r-bsw div.author-bsw img{width:90px;height:90px;object-fit:cover;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:.5s}
.author-bsw:hover img{width:1px!important;height:1px!important;opacity:0}
.author-bsw:hover .social-info-bsw{opacity:1!important}
<data:post.body/>
(Lưu ý: trong template sẽ có rất nhiều thẻ như vậy, bạn phải thay vào đúng vị trí thì mới hiện nhé)
<b:if cond='data:blog.pageType == "item"'>Chỉnh sửa lại thông tin cho phù hợp với Blog của bạn.
<div id='bsw_entry_header'>
<div><i aria-hidden='true' class='fa fa-user-circle' style='margin:0 2px 0 0' /> <b>Tác giả</b>: <data:post.author/></div>
<div><i class='fa fa-history' style='margin:0 2px 0 0' /> <b>Ngày đăng</b>: <data:post.dateHeader/> lúc <abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></div>
<div>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'><i class='far fa-comments' style='margin:0 2px 0 0' /> <b>Tổng số bình luận</b>: <span class='comment-info'><a expr:href='data:post.url + "#comments"'><b:if cond='data:post.numComments'><data:post.numComments/></b:if></a></span></b:if>
</b:if>
</div>
<div><i class='fa fa-tags' style='margin:0 2px 0 0' /><b>Tag</b>:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=9&ref=bacsiwindows"' expr:title='data:label.name' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>, </b:if>
</b:loop>
</b:if>
</div>
</div>
<div id='right-entry-header'>
<div class='r-bsw'>
<div class='author-bsw'>
<div class='info-bsw-author'>
<h10 class='author-bsw-name'>VỀ TÁC GIẢ</h10><img src='https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s100/Logo-Bac-Si-Windows.png' /></div>
<div class='info-bsw-m'>Trường Nguyễn - Thành lập, điều hành và phát triển Bác Sĩ Windows's Blog. Một chàng trai 18 tuổi, năng động và ham học hỏi!</div>
<div class='social-info-bsw'>
<p><a class='home-bsw' href='//bacsiwindows.com' target='blank' title='Trang chủ'><i class='fa fa-home'/></a></p>
<p><a class='fb-bsw' href='//admin.bacsiwindows.com' target='blank' title='Facebook'><i class='fab fa-facebook-f'/></a></p>
<p><a class='gp-bsw' href='//admin.bacsiwindows.com' target='blank' title='Google Plus'><i class='fab fa-google-plus-g'/></a></p>
<p><a class='ct-bsw' href='//bacsiwindows.com/contact' target='blank' title='Liên hệ - Báo lỗi - Góp ý Bác Sĩ Windows'><i class='far fa-envelope-open'/></a></p>
<p><a class='copy-bsw' href='javascript:;' onclick='CopyLink()' title='Sao chép URL hiện tại'><i class='fa fa-link'/></a></p>
</div>
</div>
</div>
</div>
</b:if>
Bước 3. Lưu mẫu.
40 nhận xét:
Đẹp quá a :)
đẹp quá :v , đúng cái tôi cần
Cảm ơn em chia sẻ nhé.
Ok man! ;)
Đẹp quá, cảm ơn anh Trường nhé!
Oke em chia sẻ bài viết nhé!!
Đẹp lắm đó anh <3
Ủa nhưng sao em làm nó không hiện anh nhỉ?
Blog đây.
Em xem kĩ lại bước 2 nhé
Em chèn rồi nó ra kiểu gì á ><
em chèn nó lỗi
Nó ra gì em screenshot anh xem.
Đẹp
Phải vậy chứ !!!
Đây anh ơi !
https://i.imgur.com/LrKvWHN.png
Thiếu CSS rồi, bởi bố cục loạn lên hết.
CSS em chèn rồi
Chèn lại trước thẻ đóng body đi.
Đẹp không thể tả được
Vậy hả :o vậy thì bấm nút Thích và Chia sẻ ở cuối bài viết đi :3
hướng dẫn làm cái đó luôn đi :v
Plugin của facebook thôi, cài trong 1p30 giây.
Xem thêm developers.facebook.com nha
Cái này đep nè
Like & Share thôi còn chờ gì nữa :D
sadadasd
Menu trong bài viết khá đẹp
Menu ngoài homepage sida quá
Cảm ơn bạn, ngoài trang chủ menu đơn giản vậy thôi là đủ rồi ạ.
ngoài trang chủ cái menu nó chia làm 2 bên 2 màu nhìn đẹp phết ! Dùng cách nào vậy ? cho mình xin keywords được không ?
Tìm hiểu js "add.class" và "remove.class"
À nhầm. Là css background gradient.
Chúng tôi dành cả tuổi thanh xuân để test comment, comment sau sẽ có nội dung.
Chúng tôi đã thấy được comment của bạn, chúc mừng Tịnh Nguyễn Blog :v
Rất đẹp <3
LIKE & SHARE <3
Thâu rầu, thumb của gái trên điện thoại nó bị cắt về hình vuông làm cái hình không còn nguyên vẹn, nghía xem có cách chi hóa giải không gái :p
Hmm, em đã sửa lại thumb trên mobile cho đẹp như trên PC luôn rồi đó :p nhìn cũng khá đẹp !! ;)
lâu lắm mới thấy Bác Sĩ ra bài :v
Bài này cũng lâu rồi ;))
:v ra lâu r
Đăng nhận xét