Auto Readmore được các blogger tạo ra rất nhiều loại code, những để sử dụng được nó thì hơi khó đối với newbie, bởi vì nó liên quan đến JavaScipt, mình cũng biết chút ít về CSS mà mày mò mãi mới chỉnh sửa được cái resize ảnh cho auto Read More with thumbnail for Blogger/Blogspot Posts. Hôm nay trong bài viết này mình sẽ hướng dẫn chi tiết về cách tạo auto Read More with thumbnail for Blogger/Blogspot Posts dạng danh sách mọi người theo dõi nhé!
 |
Auto Read More with thumbnail for Blogger/Blogspot Posts
|
Các bước thực hiện auto Read More with thumbnail for Blogger/Blogspot Posts
Bước 1: Bạn đăng nhập vào Blogger => Mẫu (Template) => Chỉnh sửa HTML (Edit HTML)
Bước 2: Ấn Ctrl + F tìm <data:post.body/> sau đó thay thế (replace) bằng đoạn code bên dưới
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>Auto Read More with thumbnail for Blogger/Blogspot Posts
Bước 3: Ấn Ctrl + F tìm tới ]]></b:skin> và chèn code lên phía trên nó (above).post {height:auto;width:100%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.posts-thumb {width:32%!important;height:200px!important;overflow:hidden;clear:both;}
.post-body {border-radius:0px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}
.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: block;}
Bước 4: Lưu lại để kiểm tra kết quả nhé!
