Tạo khung thông tin bài viết cho Blogspot

Mình không biết các bạn đã biết đến thủ thuật này chưa hay là có để ý đến thủ thuật này chưa. Nhưng cũng thật tình cờ thôi, khi hôm nay mình đã thay Template cho một blog thì mình thấy nó có khung thông tin bài viết nằm ở dưới cùng của bài viết. Nhìn cũng hay hay nên mình quyết định viết bài hướng dẫn các bạn luôn, bạn nào thích thì làm thôi!

Đầu tiên, để có thể hiển thị được khung này thì đương nhiên chúng ta sẽ phải thêm một đoạn code nào đó vào Template của chúng ta rồi, bởi lẽ blogger không hề có chức năng này. Và vì thế bạn hãy vào trang chỉnh sửa HTML của blog mà bạn muốn thêm vào nhé!

chinh sua html

OK, tiếp đến các bạn hãy tìm đến thẻ <data:post.body/> nhé, việc tìm như thế nào thì mình không nói nữa vì trong các bài viết trước mình đã nói khá nhiều. OK, sau khi tìm đến thẻ này thì các bạn hãy dán đoạn code dưới đây vào ngay dưới thẻ  <data:post.body/>  là được nhé!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post_byfix'>
<div class='post_by'>
<div class='post_byimz'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
 <b:else/>
<img alt='no image' class='post-thumbnail' src='http://doiguocmoc.com/wp-content/uploads/2015/07/DGM_Logo11.png'/>
</b:if>
<ul>
<li>Tiêu đề : <data:post.title/></li>
<li>Đăng bởi : <span class='post-author vcard'> <span class='fn'><data:post.author/></span></span></li>
<li>Ngày đăng : <a class='updated timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></li>
<li>Tags : <span class='post-labels'>
 <b:if cond='data:post.labels'> 
 <b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
 </b:loop>
 </b:if>
 </span></li>
</ul>
</div>
</div>
</b:if>

Như vậy là chúng ta đã có khung thông tin dưới cuối mỗi bài viết rồi. Mình dùng thẻ b:if này với mục đích là để nó chỉ xuất hiện khi chúng ta vào đọc bài mà không hiện ở các trang chủ hay các trang khác. Tuy nhiên như vậy vẫn chưa đủ, việc tiếp theo của chúng ta là phải làm đẹp cái khung này nữa. Dưới đây là đoạn CSS mà mình dùng, bạn có thể tùy biến theo ý của bạn nhé, không sao hết! Các bạn chèn vào trước thẻ ]]></b:skin> trong Template nhé!

.post_byfix {
float:left;
border:1px solid #ddd;
width:100%;
overflow:hidden
}
.post_byimz {
display:block;
float:left;
padding:4px!important;
margin-left:2px!important;
padding-right:10px!important;
margin-top:1px!important;
overflow:hidden
}
.post_byimz img {
width:80px;
height:80px
}
.post_by {
float:right;
color:#423119;
width:100%;
font-family:arial,Helvetica,san-serif;
font-weight:normal;
font-size:11px
}
.post_by ul {
margin:0;
padding:0
}
.post_by li {
list-style:none;
padding:3px 10px!important
}

Xong, không có gì là khó cả phải không? Đơn giản đến mức không thẻ đơn giả hơn. Nếu bạn nào làm theo mà không được thì hãy để lại bình luận và mình sẽ giải đáp nhanh nhất có thể nha.

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!