Random Post(Bài viết ngẫu nhiên) cho Blogger

ách thêm tiện ích Bài viết ngẫu nhiên(Random Post) cho Blogger/Blogspot đơn giản nhất.

Với một trang web nói chung và các trang Blogspot nói riêng, Random post là một trong những tiện ích không thể bỏ qua. Nó giúp người đọc có thêm lựa chọn để xem và cũng tốt cho việc SEO blog. Tôi thích xem các mẫu template, có những mẫu tưởng chừng phức tạp, nhưng thật ra quản trị viên đã khéo léo sử dụng kiểu hiển thị bài viết ngẫu nhiên này. Từ đó, nó cho tôi cái nhìn bao quát và sâu hơn về Blogger. Cùng quan điểm với nhiều Blogger chuyên nghiệp về thiết kế blog, web rằng: Google đã "dọn sẵn cỗ" rồi, vấn đề là người viết có biết "ăn" hay không mà thôi. Điều tuyệt vời của Google là ở chỗ đó, người ta càng lún sâu, càng khám phá ra nhiều điều hay và cảm thấy thỏa mãn với điều mình làm được mà nào biết, cả thiên hạ đều rõ chỉ chờ có mình chưa hay.

Thôi không lan man nữa, mình sẽ giới thiệu đôi chút về tiện ích này ha.

Với tiện ích này, những gì cơ bản nhất của 1 bài viết đều có, chẳng hạn như: Hình ảnh, tiêu đề, ngày cập nhật, bình luận và một đoạn giới thiệu ngắn dài còn tùy người thiết kế. Các thành phần để chỉnh sữa cũng không nhiều nên việc thay đổi cho phù hợp hầu như với tất cả template. Cách thêm vào cũng gần như là tối giản.

Cách thêm Random Post cho Blogger

Bước 1: Vào Bố cục> Thêm tiện ích HTML/Javascript
Bước 2: Copy đoạn code dưới đây và dán vào phần nội dung tiện ích:

<style>
#post_casuali img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#post_casuali img:hover{opacity: 0.6;}
ul#post_casuali {list-style-type: none;padding: 0px;}
#post_casuali a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#post_casuali a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#post_casuali span {}
#post_casuali li {margin-bottom: 10px;border-bottom: 1px solid #EEE; padding: 4px;}
</style>
<ul id='post_casuali'>
<script type='text/javaScript'>
var numero_post=5;
var lungh_snippet=120;
var data_info='yes';
var commenti_info='Comment';
var no_commenti='Commenti bị vô hiệu hóa';
var contenuti=[];var rdp_total_posts=0;var contenuti=new Array(numero_post);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<numero_post;i++){var found=false;var rndValue=get_random();for(var j=0;j<contenuti.length;j++){if(contenuti[j]==rndValue){found=true;break}};if(found){i--}else{contenuti[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<numero_post;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<lungh_snippet){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,lungh_snippet);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+commenti_info}else{rdp_commentsNum=no_commenti};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeSyoFDLJREcX3_EygiflZ8J_Qq3d9hh-3M6N1PMchIKpwSEvW0dCZ5KNaIPvKdWpmOG1pDpzo9sBBymLHt7aK7zlMJIeiztDT2sZBmAQKktmX_Yhm_w0zup4xpOrputgkDz2RTua-0U/s172/no-image.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(data_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<numero_post;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+contenuti[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Bước 3: Bấm Lưu
Bước 4: Kéo và thả tiện ích đến nơi muốn hiển thị.
Bước 5: Chỉnh sửa. Để chỉnh sửa cho phù hợp với thị hiếu của mình, bạn chú ý một vài điểm sau:

Bạn chú ý mấy chỗ mình bôi màu vàng để tiện cho việc chỉnh sửa.
Nhận xét và Nhận xét bị vô hiệu hóa nếu bạn quyết định hiển thị dữ liệu này.
Góc bo tròn viền của hình thu nhỏ và kích thước của chúng ( 75px)
Hiệu ứng độ mờ khi di chuột ( 0,2 giây cho độ mờ 0,6 )
Màu nền và đường viền
Số lượng bài viết sẽ hiển thị ( 5 )
Text-transform:uppercase: Nếu không muốn tiêu để toàn chữ viết Hoa thì xóa đi.
Số ký tự trong phần tóm tắt (hoặc đoạn trích) được đặt thành 120 -> Thay đổi thành số bạn muốn đoạn trích ngắn hay dài hơn.
Hiển thị số lượng bình luận và ngày tháng . Thay Yes bằng No để ẩn
URL của hình ảnh mặc định: Bạn có thể thay thế hình ảnh khác tùy ý.

Vậy là xong! Xem thành quả và chỉnh sửa đến khi vừa ý nhé!

Xem bản thử nghiệm (DEMO) TẠI ĐÂY hoặc phần Thông tin cần biết phía dưới bài viết này.
Nguồn bài viết và hình ảnh: ideepercomputeredinternet.com