Thủ thuật hiển thị và sắp xếp bài đăng có ảnh thumbnail trên Blogspot
Điểm 4.6/5 dựa vào 87 đánh giá
Traidatmui.com – Tiện ích sắp xếp bài viết theo một tiêu chí nào đó như sắp xếp theo chữ cái a, b, c hay theo ngày tháng năm đăng bài đã được nhiều website ứng dụng và hôm nay mình xin chia sẻ cho các bạn thủ thuật sắp xếp bài viết có ảnh thumbnail dành cho Blogspot. Với thủ thuật này thì mình sẽ sắp xếp tăng dần hoặc giảm dần theo 4 tiêu chí là theo chữ cái của tên bài viết, theo tên của nhãn bài viết, theo ngày tháng năm xuất bản và cuối cùng là theo số comment của bài viết. Người dùng chỉ cần click vào tiêu đề là có thể sắp xếp các bài viết theo tiêu chí đã chọn có thể là tăng dần hoặc giảm dần theo chữ cái hay số. Bạn có thể xem qua demo bên dưới.
Hình ảnh minh họa
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.sorter.js" type="text/javascript"></script>
<script type='text/javascript'>/* <![CDATA[ */
numposts=30; //Số bài viết hiển thị
home_page = "http://www.traidatmui.com/"; // thay thành địa chỉ blog của bạn
$(function() { $("#sort").tablesorter({sortList:[[2,1]]});});
/* ]]> */
</script>
<style>
.tablesorter{background:#eee;line-height:1.4em;font-family:arial;margin:8px 0pt 4px 0;font-size:13px;width:100%;text-align:left;color:#000;border-left:1px solid #ccc}
.tablesorter td.col1{width:40%}
.tablesorter td.col2{width:30%}
.tablesorter td.col1 img{width:30px;height:30px;float:left;margin:1px 5px 0 0;border:1px solid #fff;padding:1px}
.tablesorter .col1 a{background:url(https://lh6.googleusercontent.com/-wiu3WjmJSnI/Twqqu98YNMI/AAAAAAAABhE/8E4XYKpG7fQ/s6/li2.gif) 0 5px no-repeat;padding:0 0 0 9px;color:#02413d}
table.tablesorter thead tr th,table.tablesorter tfoot tr th{background:#03698f;border:0;font-size:12px;padding:4px 4px 3px}
.tablesorter td.col2 a{color:#666}
.tablesorter td.col1 a:hover,.tablesorter td.col2 a:hover{color:#999}
table.tablesorter thead tr .header{text-shadow:0 1px #888;background-image:url(https://lh6.googleusercontent.com/-VicEYGazquY/T1naN26hUOI/AAAAAAAAB6c/M-D3J6g7jDE/s21/bg.gif);background-repeat:no-repeat;background-position:center right;cursor:pointer;color:#fff;border-top:1px solid #058b83;border-left:1px solid #047c75;border-right:1px solid #0279a5;box-shadow:0 1px #05a6e2 inset;border-bottom:1px solid #ccc}
table.tablesorter tbody td{color:#3D3D3D;padding:4px;vertical-align:middle;border-top:1px solid #fff;border-bottom:1px solid #ccc;border-left:1px solid #f0f1f1;border-right:1px solid #ccc}
table.tablesorter thead tr .headerSortUp{background-image:url(https://lh6.googleusercontent.com/-D7YtZ2eh_TE/T1ogAyvIvcI/AAAAAAAAB68/-qjjCEnLQHs/s21/dsdsds.gif)}
table.tablesorter thead tr .headerSortDown{background-image:url(https://lh4.googleusercontent.com/-q19LDS68ROo/T1naNw6nfHI/AAAAAAAAB6Y/6IIts7bWFqE/s21/desc.gif)}
table.tablesorter thead tr .headerSortDown,table.tablesorter thead tr .headerSortUp{background-color:#ddd;color:#111;text-shadow:1px 0 #fff;border-top:1px solid #bbb;border-left:0 solid #bbb;border-right:1px solid #fff;box-shadow:0 1px #fff inset;border-bottom:1px solid #ccc}
</style>
Giải thích: Bạn chú ý ở phần sortList:[[2,1]], đây là giá trị mặc định sắp xếp, ở đây khi load xong thì bài đăng sẽ được sắp xếp theo thời gian, tức là cột 3 và sẽ giảm dần. Nếu bạn muốn sắp xếp ở cột khác thì bạn thay số 2 ở phần sortList thành số cột mà bạn muốn sắp xếp, lưu ý là số 0 là bắt đầu cột thứ nhất. Nếu muốn sắp xếp tăng dần bạn thay số 1 ở phần sortList thành số 0.<script src="http://data-traidatmui.appspot.com/scripts/jquery.sorter.js" type="text/javascript"></script>
<script type='text/javascript'>/* <![CDATA[ */
numposts=30; //Số bài viết hiển thị
home_page = "http://www.traidatmui.com/"; // thay thành địa chỉ blog của bạn
$(function() { $("#sort").tablesorter({sortList:[[2,1]]});});
/* ]]> */
</script>
<style>
.tablesorter{background:#eee;line-height:1.4em;font-family:arial;margin:8px 0pt 4px 0;font-size:13px;width:100%;text-align:left;color:#000;border-left:1px solid #ccc}
.tablesorter td.col1{width:40%}
.tablesorter td.col2{width:30%}
.tablesorter td.col1 img{width:30px;height:30px;float:left;margin:1px 5px 0 0;border:1px solid #fff;padding:1px}
.tablesorter .col1 a{background:url(https://lh6.googleusercontent.com/-wiu3WjmJSnI/Twqqu98YNMI/AAAAAAAABhE/8E4XYKpG7fQ/s6/li2.gif) 0 5px no-repeat;padding:0 0 0 9px;color:#02413d}
table.tablesorter thead tr th,table.tablesorter tfoot tr th{background:#03698f;border:0;font-size:12px;padding:4px 4px 3px}
.tablesorter td.col2 a{color:#666}
.tablesorter td.col1 a:hover,.tablesorter td.col2 a:hover{color:#999}
table.tablesorter thead tr .header{text-shadow:0 1px #888;background-image:url(https://lh6.googleusercontent.com/-VicEYGazquY/T1naN26hUOI/AAAAAAAAB6c/M-D3J6g7jDE/s21/bg.gif);background-repeat:no-repeat;background-position:center right;cursor:pointer;color:#fff;border-top:1px solid #058b83;border-left:1px solid #047c75;border-right:1px solid #0279a5;box-shadow:0 1px #05a6e2 inset;border-bottom:1px solid #ccc}
table.tablesorter tbody td{color:#3D3D3D;padding:4px;vertical-align:middle;border-top:1px solid #fff;border-bottom:1px solid #ccc;border-left:1px solid #f0f1f1;border-right:1px solid #ccc}
table.tablesorter thead tr .headerSortUp{background-image:url(https://lh6.googleusercontent.com/-D7YtZ2eh_TE/T1ogAyvIvcI/AAAAAAAAB68/-qjjCEnLQHs/s21/dsdsds.gif)}
table.tablesorter thead tr .headerSortDown{background-image:url(https://lh4.googleusercontent.com/-q19LDS68ROo/T1naNw6nfHI/AAAAAAAAB6Y/6IIts7bWFqE/s21/desc.gif)}
table.tablesorter thead tr .headerSortDown,table.tablesorter thead tr .headerSortUp{background-color:#ddd;color:#111;text-shadow:1px 0 #fff;border-top:1px solid #bbb;border-left:0 solid #bbb;border-right:1px solid #fff;box-shadow:0 1px #fff inset;border-bottom:1px solid #ccc}
</style>
Ở trên là chúng ta chỉ chọn 1 cột để sắp xếp, nếu bạn muốn mặc định sắp xếp theo 2 cột: ví dụ mình chọn cột 1 sắp xếp tăng dần và cột 3 giảm dần thì trong phần sortList bạn thay thành sortList:[[0,0],[2,1]] và nó sẽ sắp xếp ưu tiên từ trái sang phải.
5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script src="http://data-traidatmui.appspot.com/scripts/recent_post_sort.js" type="text/javascript"></script>
7. Cuối cùng save tiện ích lạiChúc bạn thành công!
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
TDM có thể hướng dẫn cách tạo tag với link search trên google như TDM được không bạn. Xin cảm ơn.
Trả lờiXóaBạn xem bài viết tại đây nhé
Xóathay địa chỉ blog của mình vào rồi mà vẫn chỉ hiện các bài viết của TDM trong tiện ích là sao?
Trả lờiXóaSao có trường hợp này, nếu bạn đã thay chính xác rồi thì sẽ không thể nào hiển thị bài viết trên trang mình. Trừ khi trong template hay ngoài tiện ích HTML của bạn có chứa home_page = "http://www.traidatmui.com/";. Bạn xem lại thử nhé.
XóaTiện ích này rất hay.Em xem có thể bổ sung,liệt kê theo nhãn,phân trang và thay đổi đề mục trên đầu được không
Trả lờiXóaVD:Tên bài viết - diễn giải-tham khảo.
Cám ơn em
Thay đổi tiêu đề thì anh có thể mở file JS (recent_post_sort.js) ở trên lên và chỉnh sửa lại.
XóaCòn nếu muốn hiển thị theo nhãn thì anh thêm biến sortlabel = "Tên nhãn"; vào ngay sau biến home_page như bên dưới
[code]home_page = "http://www.traidatmui.com/";
sortlabel = "Tên nhãn"; [/code]
Tiếp theo là anh thay link JS ở bước 6 thành link bên dưới
[code]http://data-traidatmui.appspot.com/scripts/recent_label_sort.js[/code]
Cám ơn em.
Trả lờiXóaEm có thể Bổ xung thêm phần phân trang cho bảng,số lượng tất cả bài viết thuộc nhãn không.
Để em bổ sung thời gian tới nhé
Xóabạn có thể giúp mình đc k
Trả lờiXóasao mình cài xong
mình đã chỉnh số bài viết hiển thị
nhưng sao nó vẫn hiển thị 30 bài là sao nhỉ
Có thể trong template bị trùng biến numposts với 1 tiện ích khác, bạn có thể di chuyển code
Xóa[code]<script type='text/javascript'>/* <![CDATA[ */
numposts=30; //Số bài viết hiển thị
home_page = "http://www.traidatmui.com/"; // thay thành địa chỉ blog của bạn
$(function() { $("#sort").tablesorter({sortList:[[2,1]]});});
/* ]]> */
</script>[/code]
Xuống gần code ở bước 6
[code]<script src="http://data-traidatmui.appspot.com/scripts/recent_post_sort.js" type="text/javascript"></script>[/code]
Mình đang gặp rắc rối, mong bạn giúp mình chỉnh lại dùm. Minh dùng them super clean của blogspot, dù đã chỉnh số bài hiển thị là 15 post nhưng trên main page vẫn hiện rất tùy hứng, có trang 2 bài, có trang 3 bài. Mình muốn hiện nhiều bài lên thì phải làm sao? Có làm như thế này được ko? Mình chèn thử đoạn code nhưng nó ko work. Cảm ơn bạn rất nhiều
Trả lờiXóaEm thấy có nhiều template ở phần trang chủ bài đăng của họ có hiện thêm chữ Download và Demo rất đẹp bên cạnh ảnh thumbnail. Anh xem ảnh bên dưới nhé.
Trả lờiXóahttps://lh3.googleusercontent.com/-Vz6qNx8xroI/UQT4aIp-J2I/AAAAAAAADKs/gz9QfPJsGgs/s500/1.jpg
Anh có thể chỉ cách làm cho em với được không?
DEMO: templates.linhdungvn.com
Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Trả lờiXóaNgoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự
giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict
Khám phá công nghệ
khám phá
Thủ thuật công nghê thủ thuật công nghệ, tips