July 2010

Đây là một thủ thuật hòan tòan tương tự với thủ thuật tạo các bài viết ngẫu nhiên cho blog, chỉ khác là mở rộng riêng cho từng nhãn. Nếu blog bạn có một đề tài, chuyên mục nào đó nổi bật, bạn có thể tạo 1 widget random các bài viết từ nhãn (chuyên mục đó).
Để thực hiện, bạn chỉ cần tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:
Trước tiên bạn vào Dashboard -> Layout -> Page Elements và Add a Gadget -> HTML/Javascript



<div id="random-posts"></div>
<script type="text/javascript">

function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}

</script>
<script src="/feeds/posts/summary/-/blog?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>



Chú ý :
+ var maxEntries = 10; : dòng này để thiết lập số bài viết sẽ hiển thị
+ Ngẫu nhiên với 1 nhãn cố định
/feeds/posts/summary/-/blog&alt: thay blog bằng nhãn bạn muốn hiển thị.
+ Ngẫu nhiên với tất cả bài viết/feeds/posts/summary/-/blog&alt: Xóa phần này /-/blog -> summary&alt
- Save lại là xong.

Thông thường, khi giới thiệu code , chúng ta hay đặt chúng ngay trên bài viết. Vì cùng nằm trên một nền nên nhiều khi trông rất lộn xộn . Vậy phải làm sao để phần giới thiệu ở nền blog chính thức , còn đoạn code ở trong một khung có nền tùy chỉnh ? Chúng ta sẽ biết sau khi đọc xong bài viết sau đây !
Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab Chỉnh sửa HTML mà không cần bật Mở rộng mẫu tiện ích . Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ 






.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear
 : both;
list-style-type : none;
background : #f9f9f9 
url(http://i259.photobucket.com/albums/
hh283/boy_proDX/framecode.gif) 
no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right
 : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left
 : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height
 : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, 
serif;
color : #333333;
font-weight : normal;
margin : 0;
padding
 : 0;
}


 
Ghi chú : Bạn có thể thay đổi phần chữ màu đỏ theo ý thích Vậy là các bạn đã tạo xong thuộc tính đặt code trong một khung độc đáo rồi đấy . Từ giờ , bạn có thể thêm code vào bất cứ đâu trên bài viết với thẻ sau
 
<div class="codeview"> Điền code vào đây </div>
http://blog.livefuz.com 

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget