Home Blogging Slide

Tạo slide view theo label cho blog

15 nhận xét January 14, 2019
Chào mừng các bạn đã đến với blog của mình,hôm nay mình xin chia sẻ đến các bạn cách tạo một slide view theo label cho blogspot mà mình đã lấy ở một giao diện cũ mình sử dụng ròi tùy biến CSS.Nhược điểm của nó là sử dụng owlcarousel nên khá nặng.Nếu bạn muốn tốc độ tải trang nhanh thì không nên thêm vào nhé :3

Các bước thực hiện

Bước 1:Blog của bạn phải có thư viện jquery,cái này đa phần template blog hiện nay đều sử dụng nên mình sẽ không hướng dẫn cách thêm nữa nhé.
Bước 2:Thêm thư viện owl carousel này vào blog của bạn.Các bạn tìm đến thẻ </head>
<script src='https://cdn.staticaly.com/gh/diendeeptraik/diennguyen/7a3ab7e/carousel.js' type='text/javascript'></script>
Bước 3:Tìm đến thẻ ]]></b:skin> và thêm đoạn css này đằng trước nó
#recate {
    margin-bottom: 15px;
    /* padding: 5px; */
    float: left;
    width: 100%;
    position: relative;
    /* background: none; */
    /* padding: 40px 0; */
    /* margin-top: 20px; */
}
.recent-boxes .carousel{position:relative;margin:0!important;padding:0;overflow:visible;height:auto;display:block;clear:both}
.main-carousel{overflow:hidden}
.carousel-item{padding:0!important;position:relative;overflow:hidden;list-style:none}
.carousel-thumb{width:100%;height:200px;position:relative;display:block}
.carousel-item .box-image{width:100%;height:200px;position:relative;display:block}
.carousel-item .box-image:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:171px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv0YR4QMZ_a4MhmFvI6M13xmMw9BpXE2gcY-N1zmN5XtpPxpSL8EJjkHHOXgOK4rAZEfENNl_eFpZJt3dAK3RXxBMm6hBDBR7-ZCYRCsXn2zz3nCHrbTX3ntq_IuYY8NVzJJ8iRVIvdzY/s1600-r/metabg.png) repeat-x;background-size:100% 100%;opacity:.8}
.carousel-content{position:absolute;bottom:0;width:100%;z-index:2;box-sizing:border-box;padding:15px;text-align:left}
.carousel-item .recent-title{margin:10px 0 3px;font-size:16px;font-weight:500}
.carousel-item .recent-title a{color:#fff;display:inline-block;line-height:1.4em;text-shadow:0 .5px .5px rgba(34,34,34,0.3)}
.carousel-item .recent-date{color:#ccc}
.carousel-tag a{display:inline-block;background-color:#c31b22;color:#fff;height:20px;line-height:20px;padding:0 6px;font-size:11px;text-transform:uppercase}
.carousel-overlay{position:absolute;left:0;top:0;z-index:1;width:100%;height:200px;background-color:rgba(40,35,40,0.05)}
.main-carousel .owl-prev,.main-carousel .owl-next{
    top: 0;
    margin-top: 0;
    width: 33px;
    height: 33px;
    line-height: 33px;
    font-size: 20px;
}
.owl-prev {
    left: 0;
}
.owl-prev, .owl-next {
    top: 37%;
    color: #ccc;
    background-color: #c31b22;
    font-family: "Font Awesome 5 Pro";
    font-weight: 700;
    position: absolute;
    z-index: 1;
    display: block;
    padding: 0;
    cursor: pointer;
    padding: 0;
    text-align: center;
    overflow: hidden;
}
.main-carousel .owl-prev{left:0;}
.main-carousel .owl-next{right:-1px;}
.main-carousel .owl-dots{bottom:10px}
.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}
.recent-date:before,.featured-date:before{content:'\f017';font-family:"Font Awesome 5 Pro";margin-right:5px}
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}
.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loaded{display:block}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel .owl-refresh .owl-item{display:none}
.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:visible;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}
.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.no-js .owl-carousel{display:block}
.owl-prev,.owl-next{top:37%;color:#ccc;background-color:#c31b22;font-family:"Font Awesome 5 Pro";font-weight:700;position:absolute;z-index:1;display:block;padding:0;cursor:pointer;padding:0;text-align:center;overflow:hidden}
.owl-prev{left:0}
.owl-prev:before{content:"\f053"}
.owl-next{right:0}
.owl-next:before{content:"\f054"}
.owl-prev:hover,.owl-next:hover{background-color:#c31b22;color:#ccc}
.owl-dots{position:absolute;bottom:1px;width:33.33%;left:0;right:0;margin:auto;text-align:center}
.owl-dot{background:#fff;height:3px;width:10px;display:inline-block;margin:0 5px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;opacity:.6}
.owl-dot.active,.owl-dot:hover{background:#c31b22}
Bước 4:Tìm đến thẻ ]</body> và thêm đoạn javascript này đằng trước nó
<script>//<![CDATA[
var MONTH_FORMAT = [, "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; // months formats to translation or change to another format
var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGh1qMQjHRHd64JfbjoZPfUoIDh5Grkb4801ZM_mFVrkzZDGaP8qY65L6O9wXRTn-Jn3VMV8ueJb57zc9s1kL4pDDNWLJMCFZZ_UGaFZERZYUcphbHEECzCjhdoUYcGpcqQoL7fdQ9en4/s1600-r/nth.png"; // default no image
var CAROUSEL_NUM = 6; // show number of results carousel, default is "6"
$(".recent-boxes .HTML .widget-content").each(function () {
    var m = $(this).find("span").attr("data-label"),
        b1 = "box",
        b2 = "videos",
        b3 = "carousel",
        bt = $(this).prev("h2").text(),
        sora = $(this).parent().attr("id"),
        box = $(this).find("span").attr("id");
    if (box.match(b1)) {
        $.ajax({
            url: "/feeds/posts/default/-/" + m + "?alt=json-in-script&max-results=" + BOX_NUM,
            type: 'get',
            dataType: "jsonp",
            success: function (e) {
                var u = "";
                var h = '<ul>';
                for (var i = 0; i < e.feed.entry.length; i++) {
                    for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                        if (e.feed.entry[i].link[j].rel == "alternate") {
                            u = e.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    var g = e.feed.entry[i].title.$t;
                    var s = e.feed.entry[i].category[0].term;
                    var d = e.feed.entry[i].published.$t,
                        v = d.substring(0, 4),
                        w = d.substring(5, 7),
                        f = d.substring(8, 10),
                        r = MONTH_FORMAT[parseInt(w, 10)] + ' ' + f + ', ' + v;
                    var c = e.feed.entry[i].content.$t;
                    var l = $('<div>').html(c);
                    if (c.indexOf("//www.youtube.com/embed/") > -1) {
                        var p = e.feed.entry[i].media$thumbnail.url;
                        var k = p
                    } else if (c.indexOf("<img") > -1) {
                        var q = l.find('img:first').attr('src');
                        var k = q
                    } else {
                        var k = NO_IMAGE
                    }
                    if (i == 0) {
                        h += '<div class="bx-first"><div class="bx-item"><div class="box-thumbnail"><a class="bf-thumb" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="img-overlay"/></a><div class="first-tag"><a href="/search/label/' + s + '">' + s + '</a></div></div><div class="bf-content"><h3 class="recent-title"><a href="' + u + '">' + g + '</a></h3><span class="recent-date">' + r + '</span></div></div></div>'
                    } else {
                        h += '<li><div class="box-thumbnail"><a class="box-image" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="img-overlay"/></a></div><div class="recent-content"><h3 class="recent-title"><a href="' + u + '">' + g + '</a></h3><span class="recent-date">' + r + '</span></div><div class="clear"/></li>'
                    }
                }
                h += '</ul>';
                $(".recent-boxes .HTML .widget-content").each(function () {
                    var b = $(this).parent().attr("id");
                    if (b == sora) {
                        $(this).html(h);
                        $(this).parent().addClass('fbox');
                        $(this).parent().addClass('boxes');
                        $(this).prev("h2").html('<a href="/search/label/' + m + '">' + bt + '</a>');
                        $(this).prev("h2").wrap('<div class="box-title"></div>');
                        $(this).find('.bf-thumb,.box-image').each(function () {
                            $(this).attr('style', function (i, a) {
                                return a.replace('/default.jpg', '/mqdefault.jpg')
                            }).attr('style', function (i, a) {
                                return a.replace('s72-c', 's1600')
                            })
                        })
                    }
                })
            }
        })
    }
    if (box.match(b2)) {
        $.ajax({
            url: "/feeds/posts/default/-/" + m + "?alt=json-in-script&max-results=" + VIDEOS_NUM,
            type: 'get',
            dataType: "jsonp",
            success: function (e) {
                var u = "";
                var h = '<ul>';
                for (var i = 0; i < e.feed.entry.length; i++) {
                    for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                        if (e.feed.entry[i].link[j].rel == "alternate") {
                            u = e.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    var g = e.feed.entry[i].title.$t;
                    var s = e.feed.entry[i].category[0].term;
                    var d = e.feed.entry[i].published.$t,
                        v = d.substring(0, 4),
                        w = d.substring(5, 7),
                        f = d.substring(8, 10),
                        r = MONTH_FORMAT[parseInt(w, 10)] + ' ' + f + ', ' + v;
                    var c = e.feed.entry[i].content.$t;
                    var l = $('<div>').html(c);
                    if (c.indexOf("//www.youtube.com/embed/") > -1) {
                        var p = e.feed.entry[i].media$thumbnail.url;
                        var k = p
                    } else if (c.indexOf("<img") > -1) {
                        var q = l.find('img:first').attr('src');
                        var k = q
                    } else {
                        var k = NO_IMAGE
                    }
                    h += '<li><div class="videos-item"><a class="box-image" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="videos-overlay"/></a><div class="recent-content"><h3 class="recent-title"><a href="' + u + '">' + g + '</a></h3><span class="recent-date">' + r + '</span></div><div class="clear"/></div></li>'
                }
                h += '</ul>';
                $(".recent-boxes .HTML .widget-content").each(function () {
                    var b = $(this).parent().attr("id");
                    if (b == sora) {
                        $(this).html(h);
                        $(this).parent().addClass('videos');
                        $(this).prev("h2").html('<a href="/search/label/' + m + '">' + bt + '</a>');
                        $(this).prev("h2").wrap('<div class="box-title"></div>');
                        $(this).find('.box-image').each(function () {
                            $(this).attr('style', function (i, a) {
                                return a.replace('/default.jpg', '/mqdefault.jpg')
                            }).attr('style', function (i, a) {
                                return a.replace('s72-c', 's1600')
                            })
                        })
                    }
                })
            }
        })
    }
    if (box.match(b3)) {
        $.ajax({
            url: "/feeds/posts/default/-/" + m + "?alt=json-in-script&max-results=" + CAROUSEL_NUM,
            type: 'get',
            dataType: "jsonp",
            success: function (e) {
                var u = "";
                var h = '<div class="main-carousel">';
                for (var i = 0; i < e.feed.entry.length; i++) {
                    for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                        if (e.feed.entry[i].link[j].rel == "alternate") {
                            u = e.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    var g = e.feed.entry[i].title.$t;
                    var s = e.feed.entry[i].category[0].term;
                    var d = e.feed.entry[i].published.$t,
                        v = d.substring(0, 4),
                        w = d.substring(5, 7),
                        f = d.substring(8, 10),
                        r = MONTH_FORMAT[parseInt(w, 10)] + ' ' + f + ', ' + v;
                    var c = e.feed.entry[i].content.$t;
                    var l = $('<div>').html(c);
                    if (c.indexOf("//www.youtube.com/embed/") > -1) {
                        var p = e.feed.entry[i].media$thumbnail.url;
                        var k = p
                    } else if (c.indexOf("<img") > -1) {
                        var q = l.find('img:first').attr('src');
                        var k = q
                    } else {
                        var k = NO_IMAGE
                    }
                    h += '<li class="carousel-item"><div class="carousel-thumb"><a class="box-image" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="carousel-overlay"/></a></div><div class="carousel-content"><div class="carousel-tag"><a href="/search/label/' + s + '">' + s + '</a></div><h3 class="recent-title"><a href="' + u + '">' + g + '</a></h3><span class="recent-date">' + r + '</span></div></li>'
                }
                h += '</div>';
                $(".recent-boxes .HTML .widget-content").each(function () {
                    var b = $(this).parent().attr("id");
                    if (b == sora) {
                        $(this).html(h);
                        $(this).parent().addClass('carousel');
                        $(this).prev("h2").html('<a href="/search/label/' + m + '">' + bt + '</a>');
                        $(this).prev("h2").wrap('<div class="box-title"></div>');
                        $(".main-carousel").owlCarousel({
                            items: 4,
                            margin: 5,
                            smartSpeed: 550,
                            nav: true,
                            navText: ["", ""],
                            loop: true,
                            autoplay: true,
                            autoplaySpeed: 800,
                            dots: false,
                            responsive: {
                                0: {
                                    items: 1,
                                    nav: true
                                },
                                601: {
                                    items: 2,
                                    nav: true
                                },
                                701: {
                                    items: 3,
                                    nav: true
                                },
                                1000: {
                                    items: 4,
                                    nav: true
                                }
                            }
                        });
                        $(this).find('.box-image').each(function () {
                            $(this).attr('style', function (i, a) {
                                return a.replace('/default.jpg', '/hqdefault.jpg')
                            }).attr('style', function (i, a) {
                                return a.replace('s72-c', 's1600')
                            })
                        })
                    }
                })
            }
        })
    }
});
  //]]></script>
Bước 5:Đặt hết javascript và css rồi thì giờ đến đoạn html này.Bạn hãy đặt nó vào nơi bạn muốn hiển thị tiện ích nhé ;)
<b:if cond='data:blog.url == data:blog.homepageUrl and data:blog.isMobileRequest == &quot;false&quot;'>
<div id='recate'>
<div class='row'>
<div class='recent-boxes' id='recent-boxes'>
  <b:section class='box-sec' id='box-sec' name='Box Layout'>
    <b:widget id='HTML199' locked='false' title='' type='HTML'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<span id="carousel" data-label="Blogging"></span>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
  </b:section>
  </div></div></div></b:if>
*Lưu ý: Nhớ hãy thay Blogging thành nhãn mà bạn muốn hiển thị,và nhãn phải viết đúng trên từng chữ cái hoa thường nhé

Lời kết

Chúc các bạn thành công
Nguồn code:Toishare.net
Like
Rê chuột vào nút Like để chọn biểu tượng cảm xúc
15 nhận xét

  1. Blogger3:34 AM, January 14, 2019

    zip

    ReplyDelete
  2. Cassette Vibes4:49 AM, January 14, 2019

    Làm gì có thẻ ] < / b o d y > ba :V

    ReplyDelete
  3. Anonymous7:46 AM, January 14, 2019

    Ngầu :v

    ReplyDelete
    Replies
    1. Anonymous7:49 AM, January 14, 2019

      Mà nặng có nên thêm vào không nhỉ :v

      Delete
    2. Nguyễn Đình Diện7:50 AM, January 14, 2019

      nói thế thôi không nặng lắm đâu :v xem homepage của mình thì biết ~

      Delete
  4. Trần Thanh Bình8:19 AM, January 14, 2019

    https://www.toishare.net/2018/02/them-widget-carousel-responsive-cho-blogspot.html

    ReplyDelete
  5. Đặng Hưng8:12 PM, January 14, 2019

    Ngon lành cành đào

    ReplyDelete
  6. Admin ✔️11:35 PM, January 14, 2019

    ngon <3

    ReplyDelete
  7. Quốc Bảo Blog8:20 PM, January 15, 2019

    t biết ảnh thum của ai NHÉ ;>

    ReplyDelete
  8. Đặng Hưng1:38 AM, January 16, 2019

    nó copy nó còn méo ghi nguồn nữa em ơi
    https://www.hptemplates.com/2019/01/creat-slide-view-theo-label-cho-blogspot.html

    ReplyDelete
  9. Quốc Bảo Blog2:49 AM, January 19, 2019

    theo suy đoán thì diện đang edit bố cục haha

    ReplyDelete
  10. Unknown5:33 AM, January 19, 2019

    Hay đó. Cho xin cái code làm con thỏ Line dưới menu đi

    ReplyDelete
Subscribe to: Post Comments (Atom)
© 2017 - 2022 Nguyễn Diện Blog ~ made with and .