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/AVvXsEhgXYV5JUEyryhOo1ZhMw6cPd1UUMzcGF3a1-wd_NOunkFi8JngT-ahqLmlM5FDG5XdiQwdnvwkeh8QMLIg_QcCIhTKpqd0FQy4EHd88JfZqwpp8ELU3j5-9FMm8g-qUlM3cFwXrMHgXvrN/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é.