Chào các bạn, bài viết này mình sẽ hướng dẫn các bạn thêm featuredpost dành cho blogspot
HƯỚNG DẪN CÁCH LÀM
Bước 1: Thêm đoạn code bên dưới vào chỗ bạn muốn nó hiển thị<b:if cond='data:blog.url == data:blog.homepageUrl'>Bước 2: Tìm thẻ </head> và thêm đoạn bên dưới lên trên nó (bước này dành cho ai chưa thêm thư viện jquery)
<div class='featured row' id='featured'>
<div id='featuredpost'/>
</div>
<div class='clear'/>
</b:if>
<script src='//code.jquery.com/jquery.min.js'></script>Bước 3: Thêm đoạn bên dưới lên trên </body> để nó làm đẹp & hoạt động code
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#featuredpost:before{content:'';background:#fff url(http://i.imgur.com/FwB3zFM.pngg)no-repeat;width:70px;height:70px;position:absolute;left:45%;top:45%;animation-duration:2s;animation-iteration-count:infinite;animation-name:loadlogo}@keyframes loadlogo{0%{transform: rotate(720deg)}100%{transform: rotate(0deg)}}#slides ul,#featuredpost{height:500px}#featuredpost{background:#fff}#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5),#slides li:nth-child(6),#slides li:nth-child(7){display:block}#slides li:nth-child(1){left:0;top:0;height:68%}#slides li:nth-child(2){left:50%;top:0;width:50%;height:68%}#slides li:nth-child(3){left:0;top:68%;width:20%;height:32%}#slides li:nth-child(4){left:20%;top:68%;width:20%;height:32%}#slides li:nth-child(5){left:40%;top:68%;width:20%;height:32%}#slides li:nth-child(6){left:60%;top:68%;width:20%;height:32%}#slides li:nth-child(7){left:80%;top:68%;width:20%;height:32%}#slides li:nth-child(1) h4,#slides li:nth-child(2) h4{font-size:22px;font-weight:400}#slides li:nth-child(1) h4{padding:10px 10px 10px 90px}#featuredpost{margin:0 auto;position:relative}#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides li,#slides ul{padding:0;margin:0;list-style:none;position:relative}#slides li{width:50%;height:100%;position:absolute;display:none;overflow:hidden}#slides li h4{overflow:hidden;bottom:0;color:#fafafa;box-shadow:5px 2px 20px 8px rgba(0, 0, 0, 0.78);width:100%;padding:10px;text-align:left;text-transform:Capitalize;background:rgba(0,0,0,.65);height:100px;font-family:Roboto,sans-serif;text-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.2em;left:0;font-weight:400}#slides .overlayx,#slides a,#slides img{width:100%;height:100%}#slides li:nth-child(1) .label_text{font-size:30px;display:block;bottom:10px;left:10px;padding:0;font-family:Roboto,sans-serif;box-shadow:5px 3px 0 rgba(0,0,0,.2)}#slides li:nth-child(1) span.dd{display:block;font-size:30px;padding:12px 15px;background:#1c9dd8;margin:0}#slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0}#slides a{display:block}#slides img{display:block;object-fit:cover;border:0;padding:0;background-color:#333;-moz-transform:scale(1) rotate(0);-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);transition:all .6s linear}.newsletter,.newsletter__input{border:1px solid #E1E1E1}#slides li:nth-child(1) .overlayx,#slides li:nth-child(1) span.autname,#slides li:nth-child(1) span.dy,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname,#slides li:nth-child(6) .autname,#slides li:nth-child(7) .autname{display:none}#slides li a:hover img{-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all .3s linear}#slides .overlayx{position:absolute;z-index:2;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.65) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.65) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#a6000000',GradientType=0)}#slides .label_text,#slides h4{z-index:3;left:10px;position:absolute;font-family:Roboto,sans-serif}#slides h4{bottom:40px;margin:0 10px 0 0;font-size:13px;font-weight:500;padding:5px 10px;color:#f9f9f9;line-height:1.1;text-align:left;text-transform:Capitalize}#slides .label_text{font-size:11px;color:#ddd;bottom:10px;padding:3px 0}#slides .overlayx,#slides li{transition:all .4s ease-in-out}#slides li:hover .overlayx{opacity:.1}@media only screen and (max-width:800px){#slides ul,#featuredpost{height:450px;overflow:hidden}.resumo span{display:none!important}#slides li:nth-child(1){width:100%;height:100%}#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5),#slides li:nth-child(6),#slides li:nth-child(7){top:0;left:100%;height:100%;width:0}}@media only screen and (max-width:640px){#slides ul,#featuredpost{height:350px}#slides li:nth-child(1) h4{font-size:18px;line-height:24px}}@media only screen and (max-width:414px){#slides ul,#featuredpost{height:250px}}@media only screen and (max-width:375px){#slides li:nth-child(2) h4,#slides li:nth-child(3) h4,#slides li:nth-child(4) h4{font-size:12px!important;line-height:14px}}@media only screen and (max-width:320px){#slides li:nth-child(1) h4{font-size:16px;line-height:1.1em}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4,#slides li:nth-child(4) h4,#slides li:nth-child(5) h4{font-size:10px!important;line-height:1.1em}}h2.post-title{font-size:14px;margin-bottom:3px;margin-top:7px}.idb-komentar i{font-size:20px;color:#4e6f74;float:left;margin-right:5px}.idb-komentar{padding:5px}.snippets{color:#999;line-height:1.5}.post-body{font-size:12.5px;font-family:'Roboto',sans-serif}.tags a:nth-child(n+3){display:none}
</style>
<script>
//<![CDATA[
function FeaturedPost(name) {
! function ($) {
h = $.extend({}, h, name);
var html = $(h.idcontaint);
var label = h.blogURL;
var ngiScroll_timeout = 200 * h.MaxPost;
if ("" === h.blogURL) label = window.location.protocol + "//" + window.location.host;
html.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);
var callback = function (data) {
var testListPath;
var formatted;
var locality;
var _0x790ex8;
var _0x790ex9;
var total_pageviews_raw;
var diffUnnormalized;
var summaryHtml = "";
var docs = data.feed.entry;
var j = 0;
for (; j < docs.length; j++) {
var i = 0;
for (; i < docs[j].link.length; i++)
if ("alternate" == docs[j].link[i].rel) {
testListPath = docs[j].link[i].href;
break
}
_0x790ex8 = "media$thumbnail" in docs[j] ? docs[j]["media$thumbnail"].url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize) : h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1");
formatted = docs[j].title["$t"];
diffUnnormalized = docs[j].published["$t"].substring(0,
10);
locality = docs[j].author[0].name["$t"];
_0x790ex9 = diffUnnormalized.substring(0, 4);
total_pageviews_raw = diffUnnormalized.substring(5, 7);
summaryHtml = summaryHtml + ('<li><a target="_blank" href="' + testListPath + '" title="' + formatted + '"><div class="overlayx"></div><img class="random lazyload" src="' + _0x790ex8 + '" title="' + formatted + '"><h4>' + formatted + '</h4></a><div class="label_text"><span class="date"><span class="dd">' + diffUnnormalized.substring(8, 10) + '</span> <span class="dm">' + h.MonthNames[parseInt(total_pageviews_raw,
10) - 1] + '</span> <span class="dy">' + _0x790ex9 + '</span></span> <span class="autname">' + locality + "</span></div></li>")
}
$("ul", html).append(summaryHtml)
};
$(document).ready(function () {
var fileName = "/-/" + h.tagName;
if (false === h.tagName) {
fileName = "";
$.ajax({
url: label + "/feeds/posts/default" + fileName + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
success: callback,
dataType: "jsonp",
cache: true
})
} else $.ajax({
url: label + "/feeds/posts/default" + fileName + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script",
success: callback,
dataType: "jsonp",
cache: true
});
setTimeout(function () {
if ($("#prevx").click(function () {
return $("#slides li:first").before($("#slides li:last")), false
}), $("#nextx").click(function () {
return $("#slides li:last").after($("#slides li:first")), false
}), h.autoplay) {
var interval = h.interval;
var equalCheckId = setInterval("rotate()", interval);
$("#slides li:first").before($());
$("#slides").hover(function () {
clearInterval(equalCheckId)
}, function () {
equalCheckId = setInterval("rotate()", interval)
})
}
html.removeClass(h.loadingClass)
}, ngiScroll_timeout)
})
}(jQuery)
}
function rotate() {
$("#nextx").click()
}! function (window, document) {
window.InfiniteScroll = function (options) {
function $(selector, ctx) {
return (ctx = ctx || document).querySelectorAll(selector)
}
function isArray(value) {
return void 0 !== value
}
function reject(data) {
return "function" == typeof data
}
function extend(target, object) {
target = target || {};
var key;
for (key in object) target[key] = "object" == typeof object[key] ? extend(target[key], object[key]) : object[key];
return target
}
function trigger(type, time) {
if (isArray(data[type])) {
var key;
for (key in data[type]) data[type][key](time)
}
}
function update() {
return self.innerHTML = state.text.loading, reversibility = true, path ? (docEl.classList.add(state.state.loading), trigger("loading", [state]), void handler(path, function (s, error) {
docEl.className = getdate + " " + state.state.load;
(tmp = document.createElement("div")).innerHTML = s;
var title = $("title", tmp);
var obj = $(state.target.post, tmp);
var dl = $(state.target.anchors + " " + state.target.anchor, tmp);
var folder = $(state.target.post, node);
if (title = title && title[0] ? title[0].innerHTML : "", obj.length && folder.length) {
var currentNode =
folder[folder.length - 1];
document.title = title;
currentNode.insertAdjacentHTML("afterend", '<span class="fi" id="#fi:' + _0x790ex1d + '"></span>');
tmp = document.createElement("div");
var i = 0;
var length = obj.length;
for (; length > i; ++i) tmp.appendChild(obj[i]);
currentNode.insertAdjacentHTML("afterend", tmp.innerHTML);
init();
path = !!dl.length && dl[0].href;
reversibility = false;
_0x790ex1d++;
trigger("load", [state, s, error])
}
}, function (event, error) {
docEl.classList.add(state.state.error);
reversibility = false;
init(1);
trigger("error", [state, event, error])
})) : (docEl.classList.add(state.state.loaded), self.innerHTML = state.text.loaded, trigger("loaded", [state]))
}
function init(err) {
if (self.innerHTML = "", header) {
tmp.innerHTML = state.text[err ? "error" : "load"];
var d = tmp.firstChild;
d.onclick = function () {
return 2 === state.type && (header = false), update(), false
};
self.appendChild(d)
}
}
var state = {
target: {
posts: ".posts",
post: ".post",
anchors: ".anchors",
anchor: ".anchor"
},
text: {
load: "%s",
loading: "%s",
loaded: "%s",
error: "%s"
},
state: {
load: (handler = "infinite-scroll-state-") +
"load",
loading: handler + "loading",
loaded: handler + "loaded",
error: handler + "error"
}
};
var data = {
load: [],
loading: [],
loaded: [],
error: []
};
(state = extend(state, options || {})).on = function (key, value, name) {
return isArray(key) ? isArray(value) ? void(isArray(name) ? data[key][name] = value : data[key].push(value)) : data[key] : data
};
state.off = function (priority, name) {
if (isArray(name)) delete data[priority][name];
else data[priority] = []
};
var tmp = null;
var handler = function (path, res, error) {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function () {
if (4 === xhr.readyState) {
if (200 !== xhr.status) return void(error && reject(error) && error(xhr.responseText, xhr));
if (res && reject(res)) res(xhr.responseText, xhr)
}
};
xhr.open("GET", path);
xhr.send()
}
};
var header = 1 !== state.type;
var reversibility = false;
var node = $(state.target.posts)[0];
var self = $(state.target.anchors)[0];
var path = $(state.target.anchor, self);
var body = document.body;
var docEl = document.documentElement;
var getdate = docEl.className || "";
var tip_top = node.offsetTop + node.offsetHeight;
var win_height = window.innerHeight;
var win_top = 0;
var resizeTimeout = null;
var _0x790ex1d = 1;
if (path.length) {
path = path[0].href;
node.insertAdjacentHTML("afterbegin", '<span class="fi" id="#fi:0"></span>');
tmp = document.createElement("div");
init();
var render = function () {
tip_top = node.offsetTop + node.offsetHeight;
win_height = window.innerHeight;
win_top = body.scrollTop || docEl.scrollTop;
if (!(reversibility || tip_top > win_top + win_height)) update()
};
render();
if (0 !== state.type) window.addEventListener("scroll", function () {
if (!header) {
if (resizeTimeout) window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(render, 500)
}
}, false)
}
return state
}
}(window, document);
document.write(""), $(document).ready(function () {
FeaturedPost()
});
var h = {
blogURL: window.location.origin,
MaxPost: 7,
idcontaint: "#featuredpost",
ImageSize: 535,
interval: 4E3,
autoplay: true,
loadingClass: "loadingxx",
pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY09r4LN-ar7PHAK02vvxRDMg1JO6INEWcnMcefGaz7EdHyYUGIHysApSsLcdCBNs8kk8ClwC5OcS_CYG7U-zgDb9BYO4D_Ymx7EJKbKQVKSWCz0ONGnozrhqQd0Vk6w8SmKBSD6NVkBqi/s400/blanternoimage.png",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tagName: false
};
//]]>
</script>
</b:if>
Nguồn code: Blanter Octa
Chúc bạn thành công!
No comments