Wednesday, January 16, 2019



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(//3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/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 = "http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/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é
Nguồn code:Toishare.net

Subscribe box

Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ STAR NAM IT hoàn toàn miễn phí qua Gmail!

0 Nhận xét: