Home » ThuthuatBlog
Thứ Năm, 8 tháng 12, 2011
Tiện ích bài viết liên quan cũ mới cùng chủ đề
(Traidatmui.com) - Tiếp theo thủ thuật tạo bài viết liên quan cho bài viết trên blogspot, mình xin giới thiệu đến các bạn cách tạo "Bài viết liên quan cũ và mới có cùng chủ đề" cho blogspot. Với tiện ích này thì khi người dùng xem một bài viết nào đó, nó sẽ hiển thị các viết cũ hơn hay bài viết mới hơn trong cùng một nhãn với bài viết đó. Ở đây chúng ta sẽ cho tiện ích này nằm ở cuối mỗi bài đăng trên blog, tiện ích này sẽ giúp người dùng có thể dễ dàng tìm kiếm các bài viết trong chủ đề mà họ đang quan tâm. Bạn có thể xem hình ảnh bên dưới để thấy các hiển thị của tiện ích này.
Hình ảnh minh họa
1. Đầu tiên đăng nhập Blogger2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chọn Mở rộng mẫu tiện ích (Expand Widget Templates)
4. Chèn code css vào trước thẻ ]]></b:skin>
#related-posts-block {
margin:10px 5px;
font-size:10px;
color:#333; /*màu text của tiện ích*/
font-family:tahoma; /*font chữ của tiện ích*/
}
#related-posts-loading-text{
font-size:12px;
text-align:center;
color:#000099;}
#related-newest-href {
margin:10px 5px 0px 15px;
}
#related-newest-title {
font-size:12px; /*cỡ text của phần "Các bài viết mới cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết mới cùng chủ đề"*/}
#related-posts-block #related-newest-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a:hover{
font-family:Arial, Helvetica, sans-serif;
color:#ff00ff;
}
#related-older-href {
margin:10px 5px 0px 15px;
list-style-type:none;
}
#related-older-title {
font-size:12px; /*cỡ text của phần "Các bài viết cũ cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
}
#related-posts-block #related-older-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
}
#related-posts-block #related-older-href a:hover{
color:#ff00ff;
}
margin:10px 5px;
font-size:10px;
color:#333; /*màu text của tiện ích*/
font-family:tahoma; /*font chữ của tiện ích*/
}
#related-posts-loading-text{
font-size:12px;
text-align:center;
color:#000099;}
#related-newest-href {
margin:10px 5px 0px 15px;
}
#related-newest-title {
font-size:12px; /*cỡ text của phần "Các bài viết mới cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết mới cùng chủ đề"*/}
#related-posts-block #related-newest-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a:hover{
font-family:Arial, Helvetica, sans-serif;
color:#ff00ff;
}
#related-older-href {
margin:10px 5px 0px 15px;
list-style-type:none;
}
#related-older-title {
font-size:12px; /*cỡ text của phần "Các bài viết cũ cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
}
#related-posts-block #related-older-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
}
#related-posts-block #related-older-href a:hover{
color:#ff00ff;
}
Bạn dựa vào các dòng hướng dẫn trong code để tùy chỉnh lại cho phù hợp với blog của mình.
5. Tiếp theo, bạn tìm đến dòng code bên dưới hoặc tương tự
<div class='post-footer-line post-footer-line-3'/>
6. Chèn code bên dưới vào ngay sau code vừa tìm được
<script type='text/javascript'>
//<![CDATA[
var showdate = true; //Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
var max_post = 8; //Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm70oFg8kwaaziigkJA7xy7j_6IL6uPKMTRfjxC30cR_Yu1M5o43I89KjTxW6vd56PGQq9WQ_ryomgCQJ_tf9GVqpVsBBXiFRZQWqVxHMBtcpzhXnVd9_7fb2gaHo3Ql-gc4RlUfifbqja/'/></div><div id='related-newest-href'><div id='related-newest-title'/></div><div id='related-older-href'><div id='related-older-title'/></div></div></b:if>
<script src='http://traidatmui-tips.googlecode.com/files/related_npost.js' type='text/javascript'/>
//<![CDATA[
var showdate = true; //Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
var max_post = 8; //Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm70oFg8kwaaziigkJA7xy7j_6IL6uPKMTRfjxC30cR_Yu1M5o43I89KjTxW6vd56PGQq9WQ_ryomgCQJ_tf9GVqpVsBBXiFRZQWqVxHMBtcpzhXnVd9_7fb2gaHo3Ql-gc4RlUfifbqja/'/></div><div id='related-newest-href'><div id='related-newest-title'/></div><div id='related-older-href'><div id='related-older-title'/></div></div></b:if>
<script src='http://traidatmui-tips.googlecode.com/files/related_npost.js' type='text/javascript'/>
7. Cuối cùng save template lại.
Lưu ý: tên các "Nhãn" bài viết nên được đặt bằng tiếng Anh hoặc tiếng Việt không dấu để tránh bị lỗi.
Chúc bạn thành công
(Traidatmui.com)
You may also...
Hot
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator...
-
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm...
-
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà...
-
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ...
-
Phần mềm tiện lợi trong việc vẽ các sơ đồ mạch điện công nghiệp, được hỗ trợ đầy đủ các kí hiệu của các thiết bị dùng trong công nghiệp như...
-
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn...
-
[FD's BlOg] - Một vài lệnh đơn giản từ CSS kết hợp với tiện ích " Recent posts " sẽ tạo cho bạn 1 thanh tin tức đơn giản. Do...
-
1 CÁC LỆNH VÀO / RA OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không ...
-
Giáo trình Máy điện - Khí cụ điện trình bày cơ bản về các nguyên lý và cấu tạo của các loại máy điện như: Máy biến áp; Máy điện không đồng b...
-
( Traidatmui.com) – Hôm nay xin chia sẻ cùng các bạn thủ thuật tạo Slideshow cho hình ảnh, thủ thuật này mình có thêm hiệu ứng Sroll với 2...
Comments[ 0 ]
Đăng nhận xét