Home » Archives for 05/15/11
Tiện ích Recent Posts with 3 columns for Blogger
23:15 |
Tiện ích này rất thích hợp cho các trang giới thiệu phần mềm, ebook, quảng cáo sản phẩm,…kết hợp sử dụng tiện ích Multi Tabbed Widget For Blogger sẽ càng làm cho Blog của bạn trông ngăn nắp và chuyên nghiệp hơn.
Thể theo yêu cầu của bạn Mobile, cũng như muốn chia sẻ với các bạn tiện ích hữu ích này, bài viết bên dưới iTechPlus sẽ hướng dẫn các bạn cách tạo widget Recent Posts with 3 columns for Blogger qua 2 bước đơn giản.
Thực hiện :
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :
<style type="text/css">
#itechplus-rc-3cot {width:320px;}
table#itechplus-rc-3cot {border:1px solid #ccc;}
#rc-3cot {padding:0 8px;width:30%;}
#rc-3cot p{padding:0;margin:0 0 5px 0;}
#rc-3cot img {margin:8px 0 2px; height:60px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:normal 12px arial;}
#itechplus-rc-3cot h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5iWnb13eQujNvXU3L0eUYDKClhqadUvhQGkahCRxK9mgGS1XvadpYZMAdqMW6BXpK7NmBvKvdRgYDQ-HRLuAzBflKp5NDMmMVT4TkxGpbxotZYf3cT786QKZkAwp0cdAceqWEzTuixY/) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "http://itechplus.info/";
label = "License";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8zYrxJd5VhEI_WjUD8LMB03fMJXghsWgooKlAg48SD87CvD25r_wwy8H8S7dmhDr2_1R8uzAR6-Muo7eT9SjZeNNXB6R3bplfLtIfYmQWBZHjXZ98viZNXhUKdhjyHBBnjZ7Wz0ZZ3QU/";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<h2>Recent Posts 3 column</h2>
<script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript"></script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://www.itechplus.info/search/label/License?&max-results=8"> Phần mềm bản quyền »</a></p>
</div>
Trong đoạn code trên :
width:320px; : chiều rộng của widget
height:60px; width:50px; : chiều rộng và chiều cao của ảnh đại diện
home_page = "http://itechplus.info/"; : địa chỉ blog của bạn
label = "License"; : tên trương mục muốn hiển thị
numposts = 9; : số bài viết sẽ hiển thị
sumTitle = 24; : số ký tự dòng tiêu đề bài đăng
colortitle = "#333"; : màu tiêu đề bài đăng
imgr[0] = “…”; : hình đại diện cho bài viết không có ảnh
Các bạn thay đổi cho phù hợp. Hy vọng các bạn sẽ thích tiện ích này.
Chúc các bạn thành công !
Hiển thị bài viết dạng list ở các trang Home, Label, Archive
20:53 |
Mình đã từng giới thiệu với các bạn thủ thuật chỉ hiển thị tiêu đề bài viết ở các trang Home, Label, Archive (xem thêm ở đây), hôm nay mình sẽ giới thiệu 1 cách hiển thị cũng tương tự, nhưng có hơi phức tạp hơn 1 chút. Cũng với dạng hiển thị dạng list, nhưng ở thủ thuật này sẽ bổ xung thêm phần ngày đăng, tác giả, nhãn...Hình ảnh minh họa :
* Các bước để thực hiện thủ thuật:
- Bước 1 : Thiết lập lại ngày giờ hiển thị của bài đăng
Để hiển thị được ngày giờ như trong hình demo, các bạn thực hiện các bước sau:
- Vào Cài đặt » Định dạng » tới mục Định dạng dấu thời gian , và điều chỉnh lại như hình minh họa bên dưới :
Phần bài viết bạn sẽ có 3 chỗ phải ẩn, đó là Header bài viết, nội dung bài viết và phần Footer của bài viết.
- Phần Header bài viết : gồm có 2 phần, đó là tiêu đề và phần date-header (ngày đăng bài viết).
- Phần nội dung : chứa nội dung bài viết.
- Phần Footer : gồm ngày đăng, nhãn, tác giả...
Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
- Chèn đoạn code bên dưới vào trước thẻ đóng </head> để ẩn phần header & footer của bài viết :
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display : none;}
.date-header {display : none;}
.post-title {display : none;}
</style>
</b:if>
- Tiếp tục tìm đoạn code bên dưới :
<data:post.body/>
hoặc có thể là
<p><data:post.body/></p>
và thêm đoạn code được in đậm vào như bên dưới để ẩn nội dung bài viết :
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
- Save template.
- Bước 3 : Thủ thuật chính
1. Trước tiên ta sẽ tạo header cho phần list này (xem hình minh họa)
=> Các bước thực hiện :
- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
- Tìm đoạn code bên dưới (hoặc tương tự):
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
- thêm đoạn code được in đậm như bên dưới:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType != "item"'>
<table style='background:#eee; width:100%'>
<tr>
<td style='width:70%; text-align:center; font-weight:bold;'>Tiêu đề</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Tác Giả</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Ngày đăng</td>
</tr>
</table>
</b:if>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
- Khoan Save template, tiếp tục thực hiện sang bước 2.
2. Tạo & trang trí cho list bài viết:
- Tìm đến đoạn code bên dưới:
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
- Thêm đoạn code được in đậm như bên dưới:
<div class='post-header-line-1'/>
<b:if cond='data:blog.pageType != "item"'>
<table style='border-bottom:1px solid #aaa; width:100%'>
<tr>
<td style='width:70%; font-weight:bold;'>
[<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop> </b:if>
</span>] <a expr:href='data:post.url'><data:post.title/></a>
</td>
<td style='width:15%; font-weight:bold; text-align:center;'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</td>
<td style='width:15%; font-weight:bold; text-align:center;'>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:post.timestamp/>
</b:if>
</span>
</td>
</tr>
</table>
</b:if>
<div class='post-body entry-content'>
- Save template để hoàn tất .
Chúc các bạn thành công.
Top Hot
