Home »

Hiển thị ngẫu nhiên nhiều bài viết, với nhiều màu sắc ấn tượng

9 tháng 1, 2014
Nghe cái tiêu đề bài viết thì chắc hẳn các bạn cũng khó tưởng tượng ra được là mình sẽ nhận được kết quả gì sau bài hướng dẫn này. Vậy đây là thành quả cuối cùng mà bạn sẽ nhận được.


Với các bài viết được hiển thị một cách hoàn toàn ngẫu nhiên này, bạn sẽ giúp người đọc dễ dàng tiếp cận với những bài khác trên Blog của mình hơn. Vì những bài viết cũ thường nằm ẩn rất "sâu" trong những bài viết của bạn. Và điều này người dùng gần như không thể tìm thấy những bài viết này, ngoại trừ trường hợp họ tìm kiếm được nó từ Google (hoặc bất kỳ công cụ tìm kiếm nào khác).

Ngoài ra, kỹ thuật này cũng giúp bạn trang trí cho Blog của bạn rất tốt. Với 7 màu (bạn có thể chỉnh lại màu cho vừa ý mình) trong 7 sắc cầu vòng, hẳn sẽ làm nó nổi bật phong cách cho trang Blog của bạn.

☼ Cách thêm tiện ích bài viết liên quan nhiều màu sắc đẹp cho blogger.

1- Đăng nhập vào Blog
2- Vào Bố cục (layout) => Thêm tiện ích (Add widget)
3- Tạo một tiện ích HTML/javascript và dán đoạn code bên dưới vào nha.

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 91%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 16px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=7;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><script type="text/javascript" src="http://thegioiblogs.blogspot.com/feeds/posts/default/-/Thủ Thuật Blog?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>


» Tùy chỉnh.
  • Phần màu xanh lá là tên nhãn của bài viết mà bạn muốn hiển thị, Nếu nhãn có khoảng trắng thì thay khoảng trắng thành %20 nha bạn.
  • Nếu muốn hiển thị cho cả blog thì bạn vui lòng xóa đoạn code có dạng  -/Thủ Thuật Blog.
  • Thay http://thegioiblogs.blogspot.com/ thành địa chỉ blog bạn muốn hiển thị bài đăng này.
  • numofpost = 7; Là số bài viết hiển thị. Trường hợp tiện ích này bạn nên để hiển thị từ 9 bài viết trở xuống sẽ đẹp hơn, nếu bạn cho nhiều hơn thì bài số 10 trở đi sẽ không có màu nền. (Tất nhiên để có màu nền thì phải chỉnh sửa lại file CSS).
4- Lưu mẫu rồi F5 lại Blog của bạn để xem sự thay đổi nhé.
 
Lưu ý: 
- (Tiện ích hoạt động tốt với những nhãn và blog có từ 500 bài trở xuống, nếu nhiều hơn sẽ sảy ra một số lỗi như hiển thị thiếu số bài bạn muốn).
- 2 đoạn code trong khung màu vàng và màu xám là giống hệt nhau 100%. Nhưng TGB cố tình đặt code trong khung màu xám để bạn có thể dễ dàng nhấn vào nút "Select all" để chọn toàn bộ code (tránh copy thiếu). Còn khung màu vàng dùng để hướng dẫn bạn chỉnh sửa code thuận tiện hơn.
Tags: , ,

Comments[ 0 ]


Đăng nhận xét