Thêm Featuredpost cực chất cho blogspot

Tài liệu
Thêm Featuredpost cực chất cho blogspot
Chuyên mục
Người đăng
Đăng vào

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'>
<div class='featured row' id='featured'>
<div id='featuredpost'/>
</div>
<div class='clear'/>
</b:if>
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)
<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:&#39;&#39;;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=&#39;#00000000&#39;,endColorstr=&#39;#a6000000&#39;,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:&#39;Roboto&#39;,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://4.bp.blogspot.com/-HTvOCAgCNKM/WZldo-8VhiI/AAAAAAAAAM4/6gKiRwQ1T-w_8VrAuiPJu9Ee7DXGCIuxwCLcBGAs/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!

Hiện có bình luận

Thông báo
Dịch vụ tăng tương tác bán hàng trên Instagram, tăng auto like bài viết, hình ảnh video, tăng lượt theo dõi (follower) nick Instagram. Xem ngay »
Xong