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.
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ó
<h3 class='post-title entry-title'>
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 != "static_page"'>Bước 2 : Bấm ctrl + F và tìm đoạn code sau
<b:if cond='data:blog.pageType != "item"'>
<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>
<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 != "item"'>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
<div class='post-snippet' expr:data-snippet='data:post.snippet'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
</b:if>
<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 -->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:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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/AVvXsEjPgJ8xDlBpO86mC8k3lh9Vy2ub_1aHI0zzTh0_y2YQLh4Pkg8I_sE5viBUjOOZarb7lQrt_ZxQ_so4smxbFO1nVeQ7-O4457OMGhwYjf6P8jzv83michHOI_mtWwTG5w8BXn_FXMkZWxCk/' width='72px'/> </b:if> </b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<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>
