Thêm box thông tin bài viết vào blogspot

Như mặc định các thông tin trong bài viết như tên tác giả, thời gian đăng bài, nhãn đều nằm ở cuối bài viết. Để tạo ra sự khác biệt hơn chúng ta sẽ cho những thông tin trên vào một box nhìn cho chuyên nghiệp và đặt box này lên phía trên bài viết, như vậy người đọc có thể nắm rõ hơn về các thông tin liên quan đến bài viết.

Demo

Thực hiện

Bước 1: Tìm trong template đoạn code sau  <a expr:name='data:post.id'/>, bạn sẽ tìm được 2 đoạn code như trên và dán sau nó đoạn code thứ 2 bạn tìm được code bên dưới

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='box-info'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
&#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</div>
<div class='thumbnail-info'>
<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='https://googledrive.com/host/0Bz_65BAr9KCZMk5fWGQ5SDUzOUU'/>
</b:if>
</div>
<div class='info-box'>
<ul>
<li>Title : <data:post.title/></li>
<li>Author : <span class='post-author vcard'> <span class='fn'><data:post.author/></span></span></li>
<li>Date : <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>Labels : <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>

• Đoạn code được bôi màu vàng : Thanh điều hướng cho bài viết
• Đoạn code được bôi màu xanh : Hình ảnh thu nhỏ cho bài viết
• Link được tô màu đỏ là hình ảnh avatar cho bài viết không có hình ảnh
• Đoạn code được bôi màu hồng : Hiển thị các thông tin tiêu đề bài viết, tác giả, thời gian đăng, nhãn. Bạn có thể thay thế các từ Title, Author, Date, Labels cho phù hợp với nội dung blog của mình

Bước 2: Thêm style cho box này bằng cách dán đoạn css sau trước thẻ ]]></b:skin> trong template

.box-info, .ndpost{border:1px solid #323232;background:#161616;background-image:-moz-linear-gradient(#161616,black);background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#161616),to(black));background-image:-webkit-linear-gradient(#161616,black);background-image:-o-linear-gradient(#161616,black);background-image:-ms-linear-gradient(#161616,black);-pie-background:linear-gradient(#161616,#000);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:10px;overflow:hidden}
.thumbnail-info{float:left;padding:5px;background-color:black}
.thumbnail-info img{border:0}
.info-box{float:left;color:white;width:560px}
.info-box ul{margin:0;padding:0}
.info-box li{list-style:none;padding:3px 10px}

Nếu nắm một chút về CSS bạn có thể tùy chỉnh style cho box phù hợp hơn với blog của mình. Chúc bạn thành công!