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
Chào các bạn, chào mừng các bạn quay lại với Blog Share123 Blogger Templates
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 share123bloggertemplates.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 share123bloggertemplates.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 share123bloggertemplates.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=share123bloggertemplates"' 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVWULzjfJtyOy1d5NCXb4WW4Rg9ebBZAmdA7YoA6XZl4YNh3BTIhAUmfvXFtK6HUcJzikig1SM5qfqqClSrXUaClgwyIOnFWFKnkv5SahCAHg3BlF-lDcCwSm-63tE40tRAX2nL7iawfPw/s100/Logo-Bac-Si-Windows.png' /></div>
<div class='info-bsw-m'>Đỗ Mạnh Hồng - Thành lập, điều hành và phát triển Share123 Blogger Templates'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='//share123bloggertemplates' target='blank' title='Trang chủ'><i class='fa fa-home'/></a></p>
<p><a class='fb-bsw' href='//share123bloggertemplates.com' target='blank' title='Facebook'><i class='fab fa-facebook-f'/></a></p>
<p><a class='gp-bsw' href='//share123bloggertemplates.com' target='blank' title='Google Plus'><i class='fab fa-google-plus-g'/></a></p>
<p><a class='ct-bsw' href='//share123bloggertemplates.com/contact' target='blank' title='Liên hệ - Báo lỗi - Góp ý Share123 Blogger Templates'><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.
Xin chào anh em nhé
Trả lờiXóaBlog quá đẹp
Trả lờiXóa