Thêm tiện ích Widget Random Post cho blogspot

Random Post là gì?

Random post – hay còn gọi là bài viết ngẫu nhiên. Đây là một widget chứa các bài viết trên blog của bạn. Các bài viết này được sắp xếp một cách ngẫu nhiên, không tuân theo một quy luật nào cả.

Với Random post widget, bạn có thể giúp mọi người biết đến những bài viết từ rất xưa của bạn. Không giống như là widget bài viết mới nhất hay widget bài viết được quan tâm. Nó chỉ hiện thị theo những quy tắc nhất định

Với widget này, bạn có thể tăng số lượng số trang được xem trong mỗi lần ghé thăm. Đồng nghĩa với việc bạn sẽ tăng được thời gian online trên trang web, giảm đi tỷ lệ thoát cho blog của bạn.

Cách thực hiện

Để có thể thêm widget Random Post cho blog của bạn, thì các bạn hãy thực hiện hai bước nhỏ sau đây nhé!

Bước 1: Ở bước này, chúng ta sẽ chèn code để hiển thị bài viết ngẫu nhiên trên trang web của bạn. Bạn có thể đặt ở đâu cũng được. Giữa bài viết, dưới bài viết hay đâu đó. Còn trong bài viết này, mình sẽ hướng dẫn các bạn chèn vào trong widget nhé! Các vị trí khác thì cũng gần như tương tự thôi.

Bây giờ, các bạn hãy vào phần quản lý bố cục, tạo một widget HTML/Javascript mới. Đặt tên cho widget và copy đoạn code dưới đây chèn vào phần nội dung của widget vừa tạo nhé!

<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
 total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
 for (var i = 0; i < randomposts_number; i++) {
 var found = false;
 var rndValue = get_random();
 for (var j = 0; j < randomposts_current.length; j++) {
 if (randomposts_current[j] == rndValue) {
 found = true;
 break
 }
 };
 if (found) {
 i--
 } else {
 randomposts_current[i] = rndValue
 }
 }
};

function get_random() {
 var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
 return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
 for (var i = 0; i < randomposts_number; i++) {
 var entry = json.feed.entry[i];
 var randompoststitle = entry.title.$t;
 if ('content' in entry) {
 var randompostsnippet = entry.content.$t
 } else {
 if ('summary' in entry) {
 var randompostsnippet = entry.summary.$t
 } else {
 var randompostsnippet = "";
 }
 };
 randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
 if (randompostsnippet.length < randomposts_chars) {
 var randomposts_snippet = randompostsnippet
 } else {
 randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
 var whitespace = randompostsnippet.lastIndexOf(" ");
 randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
 };
 for (var j = 0; j < entry.link.length; j++) {
 if ('thr$total' in entry) {
 var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
 } else {
 randomposts_commentsnum = randomposts_commentsd
 }; if (entry.link[j].rel == 'alternate') {
 var randompostsurl = entry.link[j].href;
 var randomposts_date = entry.published.$t;
 if ('media$thumbnail' in entry) {
 var randompoststhumb = entry.media$thumbnail.url
 } else {
 randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"
 }
 }
 };
 document.write('<li>');
 document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
 document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
 if (randomposts_details == 'yes') {
 document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
 };
 document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
 }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
 document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Bước 2: Sau khi tạo được widget rồi, bước tiếp theo là chúng ta sẽ dùng CSS để làm cho widget này đẹp hơn.

Các bạn hãy copy đoạn CSS dưới đây và dán và ngay trước đoạn ]]> </skin> nhé!

#random-posts img {
    border-radius: 1000px;
    borde:5px solid;
    color:#dddddd;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}
#random-posts img:hover {
    opacity: 0.6;
}
ul#random-posts {
    list-style-type: none;
    padding: 0px;
}
#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 3px auto 5px;
}
#random-posts a:hover {
    text-decoration: none;
}
.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}
#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}

OK, xong rồi đấy, giờ bạn hãy lưu lại và xem kết quả thôi.

Cùng chuyên mục:

Add Comment

6 Comments

  1. Thành
    2 Bình luận
    14/12/2015
  2. Mạnh
    1 Bình luận
    08/04/2016
  3. Đặng Việt Thạo
    55 Bình luận
    03/10/2016
  4. thang
    1 Bình luận
    21/10/2016
    • Mộc
      Admin
      21/10/2016