Nút bài viết ngẫu nhiên bằng Javascript cho Blogger

Một trong những mục tiêu lớn nhất của mọi blogger là giữ khách truy cập trên website/blog của mình càng lâu càng tốt, xem càng nhiều bài viết càng tốt. Từ lý do đó, rất nhiều thủ thuật được ra đời nhằm mục đích này. Hôm nay, tại bài viết này, mình xin chia sẽ với các bạn cách thêm nút bài viết ngẫu nhiên vào blog của bạn để giúp bạn níu kéo thêm được một lượng thời gian của khách truy cập.

Bấm vào ảnh để xem demo

Nút bài viết ngẫu nhiên bằng Javascript cho Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML


2. Tìm đến thẻ </body> và thêm đoạn Javascript sau vào bên trên

<script type="text/javascript">
/*<![CDATA[*/
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Bài ngẫu nhiên'; document.getElementById('gatRandom').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>

3. Bạn sử dụng đoạn HTML sau để chèn vào vị trí bạn muốn đặt nút ngẫu nhiên (có thể sử dụng tại widget HTML hoặc bất cứ đâu trên trang của bạn)

<a id="gatRandom" class="button"></a>

4. Cuối cùng việc bạn cần làm là trang trí nút của mình bằng CSS, bạn có thể dùng đoạn CSS sau của mình hoặc của riêng bạn
Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên

.button {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border: 0px;
color: #686868;
padding: 12px 16px;
font-size: 12px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
border: 1px solid #e5e5e5;
background-color: #FFF;
}

5. Lưu lại giao diện hiện tại và tận hưởng thành quả.

Có thêm nút bài viết ngẫu nhiên sẽ rất có ích, cho việc giữ lại người dùng trong website/blog của chúng ta lâu hơn, việc cần làm chỉ là chọn một vị trí thật thích hợp và đẹp mắt để người dùng quan tâm hơn về nó. Chúc bạn thành công!