Vậy làm thế nào để tạo widget bài viết ngẫu nhiên?
- Đầu tiên hãy vào trang quản trị tại blogger.com- Tiếp tục chọn vào Bố cục (Layout), chọn thêm tiện ích trên thanh sidebar của bạn, và chọn HTML/JavaScript nhé.
- Thêm đoạn code này vào phần nội dung và lưu lại:
- Sau khi lưu lại thì coi như bạn đã hoàn thành, đã có widget bài viết ngẫu nhiên cho blogspot của bạn!<style>#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;}</style><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) + "…";};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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0jOG4KByaxdCGBr_yuSj66o_yKQq_v_uKZmklIgT-pPKFLa3FrsxdXOHQR5q9ZwyuqWo1n2AnrveQqgzjueqMUmLyEb1E8eyvaaE0ASCqCVLloLj0_8eUDOOcwacL_e30wpLgNxTW4Y/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>
Tuy nhiên, mặc định đoạn code này chỉ hiện title và hình ảnh của bài viết, chứ không có phần trích nội dung của bài viết, nếu bạn muốn có thêm phần trích nội dung thì tìm đến đoạn code này và thay no thành yes nhé:
var randomposts_details = 'no'; .
Ngoài ra, bạn còn có thể tùy chỉnh số lượng bài viết hiển thị và số ký tự phần trích đoạn nội dung tại đoạn code này:
var randomposts_number = 5;
var randomposts_chars = 110;
muốn xóa hiển thị tên người đăng trong code này thì xóa cái nào cậu
ReplyDeleteChào anh Đạt.
ReplyDeleteCảm ơn anh về bài viết. Mình có thế chia sẻ cách tạo các bài viết liên quan được không, để mình chèn vào các vị trí cần thiết trên blog.
Nhân tiện, mình thấy anh thiết kế hình đại diện mỗi bài viết hiệu ứng đổ bóng rất đẹp, anh có thể chia sẻ cách làm và dùng phần mềm nào được không?
Cảm ơn anh và rất vui được làm quen.
Hiệu ứng đổ bóng mình dùng Photoshop nha, nếu bạn muốn nhanh hơn nữa thì Google tìm: Action Long Shadow cho Photoshop là được :D
DeleteCòn bài viết liên quan là nó mặc định thế rồi, không chèn, thêm bớt nó chổ khác được =))
HỒ THANH PHONG
Deletecái này là học thêm về rip template hoặc rip widget là sẽ rõ mình biết nhưng bận 0 nói được bạn tự mày mò nhé