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.
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}
#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}Bước 2. Thêm toàn bộ HTML sau vào sau thẻ <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNVuMDLLlr4YnDpgRUoObeeowdGD77BqArHX8HFqEeu3B56AGOtUjJ4PqynvOomsJqHCHChhDZYsLLTt-k1psp9YBY3kC58jyiMhVLn3t8e2hELH1M6zEDkNo3bsLhJETYAYrsfNb_b_UK/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.
Tổng kết
Do mình không có thời gian và làm vội trong vài chục phút nên chưa thể hoàn chỉnh 100% và chưa có responsive, mình sẽ sớm cập nhật, các bạn thường xuyên theo dõi Blog để nhận nhiều thủ thuật hay hơn nhé. Hãy chia sẻ bài viết nếu thấy hay và hữu ích, và copy đi đâu nhớ dẫn nguồn www.bacsiwindows.com, cảm ơn.Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm
Tác giả: Vũ Trường
Ngày đăng: 20/5/18 lúc 9:34 CH
Tổng số bình luận: 0
Tag:
Thủ Thuật Blogspot,
Widget
Với nhiều năm kinh nghiệm, chúng tôi sẵn sàng đáp ứng nhu cầu của khách hàng với những tiêu chí hàng đầu là Uy tín - Chất lượng - Lòng tin. Đã có nhiều người tin tưởng và sử dụng dịch vụ cao cấp của chúng tôi, bạn có phải là người tiếp theo?
BÌNH LUẬN (0)