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. 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.
>>Popup - Thủ thuật tạo Popup hiện lên cảnh báo cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger
>>Pop Under - Thủ thuật tạo Pop Under hiện quảng cáo sau trình duyệt cho Blogger
» 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.
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.
Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.
5. Tìm dòng code:<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>
Thay thế thành code bên dưới.<data:post.body/>
6- Tìm đoạn code như bên dưới (nằm ngay trên đoạn ở bước 5)<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>
Thay thế nó thành:<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>
<!-- anh thumbnail trang chu -->
<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/AVvXsEhVwVA5lmzExM5i-pFFdngtpHlI6HIPZXaVLZNPaO7DdyPT-WzOyjbyz8yD7G0lL9JYY5im-wQAB-unLajG2De0g55zyWcZqfJML7lFMEgiw2oOxOqbT7tXDimk-DRIenairEIczOi1DtVI/' 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.
0 Nhận xét