Thêm box thông tin bài viết đẹp cho blogspot

Chủ Nhật, 16 tháng 6, 2019

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

Code:

<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

Code:

<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>

Do khung code của diễn đàn không hỗ trợ sử dụng màu sắc nên mình không thể hướng dẫn cụ thể chi tiết từng thành phần trong đoạn code trên được. Nếu bạn muốn tìm hiểu rõ hơn để tùy chỉnh box cho phù hợp hơn cho blog của mình thì bạn có thể truy cập trực tiếp vào bài viết hướng dẫn trên blog của mình tại đây
Bước 2: Tìm thẻ sau trong template

Code:

]]></b:skin>

Và dán trước nó đoạn CSS sau:

Code:

.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!