[Blogspot] - Hướng dẫn chia danh sách bài viết 2 cột có ảnh cho Blogger - GOOGLE-VINA

Hướng dẫn chia danh sách bài viết 2 cột có ảnh cho Blogger

Bình thường khi xem bài viết ở các trang như trang chủ, trang nhãn, trang lưu trữ blog (gọi chung là kiểu trang index) các bài viết sẽ hiển thị không theo một quy cũ nào hết. Chúng hiển thị theo cách viết của bạn khi đăng bài.

Hướng dẫn chia danh sách bài viết 2 cột có ảnh cho BloggerThủ thuật chia danh sách bài viết 2 cột có ảnh cho BloggerCách chia danh sách bài viết 2 cột có ảnh cho Blogger

Thủ thuật Blogger / Thủ thuật blogspot sẽ hướng dẫn các bạn cách tóm tắt bài viết ở trang chủ một cách tự động thành 2 cột song song không sử dụng javarscripts.

chia bai dang thanh 2 cot cho blogger_opt

» Không ảnh hưởng đến tốc độ lòa của blog vì không dùng javarscrips (xét theo khía cạnh nào đó còn giúp tăng tốc blog vì nó thu nhỏ ảnh thumbnail và tóm tắt lại nội dung bài viết ở trang chủ của bạn.
» Bố cục gồm 2 cột bài viết xép thẳng hàng.
» Ảnh thumbnail và tiêu đề bài viết + mô tả nằm trên cùng một hàng.
» Phần mô tả hiển thị bằng mã CSS do vậy không bô đen được.

1. Đăng nhập vào tài khoản Blogger / Blogspot
2. Vào phần Mẫu (Templates)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ ]]></b:skin> .
Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.

<b:if cond='data:blog.pageType != "static_page"'><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:45.8%;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:24px Oswald;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}</style></b:if></b:if>

5. Tìm dòng code:

<data:post.body/>

Thay thế thành code bên dưới.

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'> <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>

6- Tìm đoạn code như bên dưới (nằm ngay trên đoạn ở bước 5)

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

Thay thế nó thành:

<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/AVvXsEihm74ZN7CcrZuk6i0CKpSsnlgag-vmgjtQV6TDdS14UqQkWe5Crg4J7JYHuNZxethKkju-qhr8KYqIEb2vjfZ6f_QCzcJ2oXwLV_POmszhG_ULxJVa6dj7oWXHLsGlb3mH-BgtFKue71YU/' 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> </b:if>

7- Lưu mẫu lại và xem kết quả nha.
8- Bạn vào cài đặt => bài dăng và nhận xét và Tại mục hiển thị tối đa bạn chỉnh số bài cần hiển thị lại cho phù hợp.Lưu ý bạn nên để số bài là số chẵn vì tiện ích có 2 cột nếu để số lẻ sẽ bị hụt nha.

Nguồn: thietkeblogger.net