Auto readmore 3 column không dùng js cho blogspot

Tiếp tục share mẫu auto readmore không dùng js (javascripts) cho các bạn muốn blog load nhanh nhưng vẫn đẹp. Hôm bữa mình đã có share một mẫu auto readmore không dùng js rồi nhưng mẫu này có điểm khác biệt nhưng mẫu trước là mẫu này chia 3 column cực đẹp.

DEMO

Làm sao để thêm auto readmore 3column cho blogpsot.

Để rút ngắn bài viết như demo các bạn làm theo những bước sau :
Bước 1 : Tìm đến thẻ ]]></b:skin> trong templates blogspot của bạn và thêm đoạn code sau ngay bên dưới nó

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px 'Arial', serif;margin:1.0em 0 .75em;line-height:1.3em;}
.post-snippet:before{content:attr(data-snippet);}
h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none}
.post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:30%;height:95px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma}
.post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left}
.post h1,.post h2{font:15px Arial;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}
.post-thumbnails{float:right;margin-left:20px;}
</style>
</b:if></b:if>

Bước 2 : Bấm ctrl + F và tìm đoạn code sau

<data:post.body/>

Và bấm enter 2 lần, và bạn sẽ tìm thấy cái mình cần tìm và thay nó bằng đoạn code sau :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div class='post-snippet' expr:data-snippet='data:post.snippet'/>
 </b:if>
 </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
 <b:else/>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
</b:if>

Bước 3 : Sau khi sửa xong thẻ  <data:post.body/> bạn lăn chuột lên ngay bên trên nó sẽ có đoạn code
<h3 class='post-title entry-title'>

 <b:if cond='data:post.link'>
 <a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
 <b:if cond='data:post.url'>
 <a expr:href='data:post.url'>
<data:post.title/>
</a>
 <b:else/>
 <data:post.title/>
 </b:if>
</b:if>
</h3>

Và thay nó bằng đoạn code sau

<!-- anh thumbnail trang chu -->
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <b:if cond='data:post.thumbnailUrl'>
 <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
 <b:else/>
 <img alt='no image' class='post-thumbnails' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpKsOHPoo5COSX80KneqA6OZ2RtLIlTMxdIrtpUPWSm-kLsInyzvW3HqZ86J-fHHS4Fofq2wAcUXNYmCK82JX6z017SR6UWkg-OaWpetWGl8JbMQmagyCIba9fBFU7C3tXaiPmsVt3XiP/' width='72px'/> </b:if> </b:if>
 </b:if>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
 <b:if cond='data:post.link'> <a expr:href='data:post.link'>
<data:post.title/></a> <b:else/> <b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a> <b:else/>
 <data:post.title/> </b:if> </b:if>
</h2> </b:if> <b:else/>
 <h1 class='post-title entry-title'>
 <b:if cond='data:post.link'>
 <a expr:href='data:post.link'>
<data:post.title/></a> <b:else/>
 <b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if> </b:if>
</h1> </b:if>

Sau đó lưu mẫu lại và kiểm tra thành quả của mình nhé. Đẹp ngất ngay đúng không nào hehe, chúc các bạn thành công. 

Bài Viết Cùng Chủ Đề