Làm đẹp Blogspot bằng việc tùy chỉnh box thông tin

-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. Nếu bạn muốn thay đổi làm cho blog bạn đẹp hơn, chuyên nghiệp hơn mời bạn xem hướng dẫn cách tùy chỉnh box thông tin dưới đây :

​Ảnh 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>

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!

Về trang chủ thủ thuật, mẹo vặt

N LinkPro