Tạo slide view theo label cho blog
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 == "false"'>
<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 != ""'>
<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
