Chào các bạn bài viết này mình sẽ hướng dẫn anh các bạn cách chèn Random Post tuyệt đẹp vào Blogspot, style này do anh Nguyễn Anh Tuấn làm và được mình leech code lại, không cần chừ nữa, xem cái demo rồi làm luôn nhé.
Thông tin về Random Post Widget
- Name : Random Post Widget 2019 Style For Blogspot
- Author : Nguyen Anh Tuan
- Version : 1.0
- Shared : JsBlogger
Hướng dẫn add widget vào blogspot
- Đầu tiên bạn vào Bố Cục sau đó thêm 1 widget mới và copy ID của widget đó sau đó cho đoạn code sau vào và lưu lại như ảnh phía dưới, nhớ copy id lại nhé, id ở đây của mình là HTML3.
Đây là đoạn code mà bạn cần chèn vào widget
<div class='randomposts spinner load'>
<ul id='random-posts'></ul>
</div>
- Bạn thêm đoạn css này vào trước thẻ b:skin, đoạn css này bao gồm các style của thumbnail, style của label ,title,...
#banner{position:relative;float:left;width:100%}
.randomposts a,.randomposts a:hover{color:#3c4043}
.randomposts ul{margin:0;padding:0}
.randomposts ul li{float:left;padding:0 0 15px 0;margin:0 0 15px 0;border-bottom:1px dashed rgba(0,0,0,0.12);position:relative;list-style:none}
.randomposts ul li:last-child{border-bottom:none;padding:0}
.randomposts .post-thumb{float:left;height:95px;margin-right:15px;width:47%}
.randomposts img{height:100%;width:100%}
.randomposts .label-name{padding-bottom:5px;text-transform:uppercase;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.randomposts .label-name a{color:rgb(136,136,136)}
.randomposts .post-meta{padding:10px 0;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none;color:#555!important}
.randomposts .post-date:before{content:'-';padding:0 5px}
.randomposts .post-title{white-space:unset}
.randomposts .post-title a{display:block}
.randomposts .post-snippet{font-size:15px;line-height:1.6em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:none}
.loadposts.spinner:before{top:45%;left:45%}
.loadposts{position:relative;height:150px;clear:both}
#banner .randomposts{clear:both;background:#fff;margin-bottom:15px;float:left;width:100%;padding:15px 15px 0 15px;border:1px solid rgba(0,0,0,0.12);border-radius:0px}
#banner .randomposts.spinner:before{left:50%;top:50%}
#banner .randomposts ul{margin:0 -7.5px}
#banner ul li{margin:0;border:0;float:none;padding:0 7.5px 15px 7.5px;display:inline-block;width:25%;vertical-align:top;position:relative}
#banner ul li:nth-of-type(1),#banner ul li:nth-of-type(2),#banner ul li:nth-of-type(3){width:33.33%}
#banner ul li:last-child{padding:0 7.5px 15px 7.5px}
#banner .post-thumb{position:relative;float:none;height:150px;width:100%;margin:0;transition: .5s}
#banner ul li:nth-of-type(1) .post-thumb,#banner ul li:nth-of-type(2) .post-thumb,#banner ul li:nth-of-type(3) .post-thumb{height:215px}
#banner .post-title{-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;font:bold 16px Roboto,"Helvetica Neue",Helvetica,sans-serif;float:left;padding:15px 0 0 0;line-height:1.5}
#banner .post-label{display:block;position:absolute;left:10px;bottom:10px;padding:0 8px;border-radius:2px;background:rgba(0,0,0,.5);color:#ffffff;line-height:24px;font-size:14px}
#banner .post-label:after{content:unset;padding:0}
#banner .post-label a{color:#fff}
.randomposts.spinner:before{left:45%;top:45%}
.randomposts.load{height:400px;width:100%;position:relative}
- Sau khi chèn css thì tiếp đến bạn thêm đoạn script này vào trước thẻ đóng </body> và chỉnh sửa sao cho phù hợp với blog của bạn :
- Bạn thay HTML5 thành id widget mà bạn đã copy ở bước đầu, ở đây id mà mình đã copy là HTML5.
- Phần còn lại bạn chỉnh sửa các phần phía trên sao cho phù hợp với blog.
- Sau khi lưu lại thì bạn ra trang chủ và test thử xem nhé.
<script>//<![CDATA[
var rdp_numposts = 7;
var rdp_snippet_length = 150;
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);
$(document).ready(function() {
$.ajax({
type: 'GET',
url: '/feeds/posts/summary',
data: {
'max-results': 0,
'alt': 'json'
},
dataType: 'jsonp',
success: function(a) {
var rdp_total_posts = a.feed.openSearch$totalResults.$t
function get_random() {
var a = 1 + Math.round(Math.random() * (rdp_total_posts - 1))
return a
}
function getvalue() {
for (var b = 0; b < rdp_numposts; b++) {
var d = false;
var c = get_random();
for (var a = 0; a < rdp_current.length; a++) {
if (rdp_current[a] == c) {
d = true;
break
}
}
if (d) {
b--
} else {
rdp_current[b] = c
}
}
}
getvalue()
for (var i = 0; i < rdp_numposts; i++) $('#HTML5').append('<script src="/feeds/posts/summary?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts"><\/script>')
}
})
})
$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
options.async = true;
})
function random_posts(t) {
a = location.href, y = a.indexOf("?m=0");
for (var e = 0; e < t.feed.entry.length; e++) {
var s = t.feed.entry[e],
r = s.title.$t;
if ("content" in s) var n = s.content.$t;
else n = "summary" in s ? s.summary.$t : "";
if ((n = n.replace(/<[^>]*>/g, "")).length < rdp_snippet_length);
else {
var i = (n = n.substring(0, rdp_snippet_length)).lastIndexOf(" ");
n.substring(0, i)
}
for (var l = 0; l < s.category.length; l++) var p = s.category[l].term,
o = "/search/label/" + p;
if (p == "blogspot") {
p = p.replace("blogspot", "Blogspot");
}
if (p == "thu-thuat-facebook") {
p = p.replace("thu-thuat-facebook", "Thủ Thuật Facebook");
}
if (p == "thu-thuat-blogspot") {
p = p.replace("thu-thuat-blogspot", "Thủ Thuật Blogspot");
}
if (p == "blogger-template") {
p = p.replace("blogger-template", "Blogger Template");
}
if (p == "facebook") {
p = p.replace("facebook", "Facebook");
}
if (p == "psd-anh-bia") {
p = p.replace("psd-anh-bia", "PSD Ảnh Bìa");
}
if (p == "phan-mem") {
p = p.replace("phan-mem", "Phần Mềm");
}
if (p == "tan-man") {
p = p.replace("tan-man", "Tản Mạn");
}
for (var d = 0; d < s.link.length; d++)
if ("alternate" == s.link[d].rel) {
var c = s.link[d].href; - 1 != y && (c += "?m=0");
var f = s.published.$t;
if ("media$thumbnail" in s) var m = s.media$thumbnail.url.replace("s72-c", "s320");
else m = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7IqqlAUQBUKEM2srC-eo3SrvnWS68r4EBojqXVCvwEM7-nOj2eJpkAmAOvQSYKWtjt4y2v_U57VJfyDckDpRBLVMm_48xBJq-rZ19LgzpcXwwF2E91CkIjgcyO9k8rdYAMwx4aY1nv8m/s1600/safe_image.png";
var w200 = s.media$thumbnail.url.replace("s72-c", "w200-h112-p-k-no-nu"),
w320 = s.media$thumbnail.url.replace("s72-c", "w320-h180-p-k-no-nu"),
w400 = s.media$thumbnail.url.replace("s72-c", "w400-h225-p-k-no-nu"),
w640 = s.media$thumbnail.url.replace("s72-c", "w640-h360-p-k-no-nu"),
w1600 = s.media$thumbnail.url.replace("s72-c", "w1600-h900-p-k-no-nu"),
u = f.substring(8, 10) + " thag " + f.substring(5, 7) + ", " + f.substring(0, 4);
}
$('#random-posts').append('<li><div class="post-thumb"><a href=' + c + ' title="' + r + '"><img alt="' + r + '" src=' + m + ' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="' + w200 + " 200w, " + w320 + " 312w, " + w400 + " 400w, " + w640 + " 640w, " + w1600 + ' 1600w"/></a><span class="post-label"><a href="' + o + '" title="' + p + '">' + p + '</a></span></div><h2 class="post-title"><a href=' + c + ' title="' + r + '">' + r + '</a></h2><div class="post-meta"><span class="label"><a href="' + o + '" title="' + p + '">' + p + '</a></span><span class="post-date">' + u + '</span></div><p class="post-snippet">' + n + '</p></li>')
$('.randomposts').removeClass('spinner').removeClass('load')
}
}
//]]></script>
- Bạn thay HTML5 thành id widget mà bạn đã copy ở bước đầu, ở đây id mà mình đã copy là HTML5.
- Phần còn lại bạn chỉnh sửa các phần phía trên sao cho phù hợp với blog.
- Sau khi lưu lại thì bạn ra trang chủ và test thử xem nhé.
Tổng kết
- Vậy là JsBlogger đã hướng dẫn bạn thêm widget random post tuyệt đẹp rồi, nếu thấy bài viết hay thì hãy click quảng cáo và comment góp ý ủng hộ blog nhé.
Bài viết có 0 bình luận
Vui lòng bình luận tôn trọng lẫn nhau...
EmoticonEmoticon