- Hôm nay mình sẽ share cho các bạn về 1 tiện ích (bài đăng gần đây) cho blogspot để giúp cho giao diện blog thêm :v sinh động hay gì đó đó cũng được...Bộ code bài này có đặc điểm là có hình ảnh sẽ hiển thị ngẫu nhiên, và có mũi tên di chuyển trang.
Đặc biệt là style này có hình ảnh, ngày đăng bài trong mỗi bài đăng giúp người đọc dễ tiếp cận. Không nói nhiều nữa, xem hướng dẫn bên dưới nhé ⬇
Bước 2: Chép đoạn mã bên dưới vào bên trong tiện ích đã tạo
- Sửa lại vài chỗ trên để hiển thị đúng nhé !!!
- Source: codepen.io
 |
| Tiện ích bài đăng gần đây trong blogspot |
Đặc biệt là style này có hình ảnh, ngày đăng bài trong mỗi bài đăng giúp người đọc dễ tiếp cận. Không nói nhiều nữa, xem hướng dẫn bên dưới nhé ⬇
Cách thực hiện
Bước 1: Mở blogger ⇒ Bố cục ⇒ Tạo tiện ích HTML/JavaScriptBước 2: Chép đoạn mã bên dưới vào bên trong tiện ích đã tạo
Bước 3: Lưu lại và xem kết quả<style scoped="" type="text/css">
ul.rcentside * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
ul.rcentside {
font-size: 11px
}
ul.rcentside,
ul.rcentside li {
margin: 0;
padding: 0;
list-style: none;
position: relative
}
ul.rcentside {
width: 100%;
height: 500px
}
ul.rcentside li {
height: 24.5%;
position: absolute;
padding: 0;
width: 49.5%;
float: left;
overflow: hidden;
display: none
}
ul.rcentside li:nth-child(1),
ul.rcentside li:nth-child(2),
ul.rcentside li:nth-child(3),
ul.rcentside li:nth-child(4) {
display: block
}
ul.rcentside img {
border: 0;
width: 100%;
height: auto
}
ul.rcentside li:nth-child(1) {
width: 100%;
height: 49.5%;
margin: 0 0 2px;
left: 0;
top: 0
}
ul.rcentside li:nth-child(2) {
left: 0;
top: 50%
}
ul.rcentside li:nth-child(3) {
left: 50.5%;
top: 50%
}
ul.rcentside li:nth-child(4) {
width: 100%;
left: 0;
top: 75%
}
ul.rcentside .overlayx,
ul.rcentside li {
transition: all .4s ease-in-out
}
ul.rcentside .overlayx {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
opacity: .6;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvG8Elv4sqxM4xasoM5jpHruUTQE-j1bOyG1vkCvL_sTh0yqX-mbUO_JNADTyHf6Axg2pWFckCEVS8dlyPZ0sijEpSm2bJScX3TRgdaPJppDwEo2YnpltMsX9xPbBSbUbf3Q5MUtWTOo/s1600/linebg-fade.png);
background-position: 50% 50%;
background-repeat: repeat-x
}
ul.rcentside .overlayx,
ul.rcentside img {
margin: 3px
}
ul.rcentside li:nth-child(1).overlayx {
background-position: 50% 25%
}
ul.rcentside .overlayx:hover {
opacity: .1
}
ul.rcentside h4 {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 2;
color: #fff;
font-weight: 700;
margin: 0;
padding: 10px;
line-height: 1.5em;
font-weight: normal;
overflow: hidden;
transition: all .3s
}
ul.rcentside li:hover h4 {
bottom: 30px
}
ul.rcentside li:nth-child(1)h4,
ul.rcentside li:nth-child(4)h4 {
font-size: 150%
}
ul.rcentside .label_text {
position: absolute;
bottom: 0;
left: 20px;
z-index: 2;
color: #fff;
font-size: 90%;
opacity: 0;
transition: all .3s
}
ul.rcentside li:hover .label_text {
bottom: 20px;
opacity: 1
}
ul.rcentside li:nth-child(2).autname,
ul.rcentside li:nth-child(3).autname {
display: none
}
.buttons {
margin: 5px 0 0
}
.buttons a {
display: inline-block;
text-indent: -9999px;
width: 15px;
height: 25px;
position: relative
}
.buttons a::before {
content: "";
width: 0;
height: 0;
border-width: 8px 7px;
border-style: solid;
border-color: transparent #535353 transparent transparent;
position: absolute;
top: 50%;
margin-top: -8px;
margin-left: -10px;
left: 50%
}
.buttons a.nextx::before {
border-color: transparent transparent transparent #535353;
margin-left: -3px
}
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a) {
(function(e) {
var h = {
blogURL: "",
MaxPost: 4,
idcontaint: "",
ImageSize: 100,
interval: 5000,
autoplay: false,
loadingClass: "loadingxx",
pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tagName: false
};
h = e.extend({}, h, a);
var g = e(h.idcontaint);
var d = h.MaxPost * 200;
g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');
var f = function(w) {
var q, k, m, u, x, p, t, v, r, l = "",
s = w.feed.entry;
for (var o = 0; o < s.length; o++) {
for (var n = 0; n < s[o].link.length; n++) {
if (s[o].link[n].rel == "alternate") {
q = s[o].link[n].href;
break
}
}
if ("media$thumbnail" in s[o]) {
u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
} else {
u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
}
k = s[o].title.$t;
r = s[o].published.$t.substring(0, 10);
m = s[o].author[0].name.$t;
x = r.substring(0, 4);
p = r.substring(5, 7);
t = r.substring(8, 10);
v = h.MonthNames[parseInt(p, 10) - 1];
l += '<li><a target="_blank" href="' + q + '"><div class="overlayx"></div><img class="random" src="' + u + '"/><h4>' + k + '</h4></a><div class="label_text"><span class="date"><span class="dd">' + t + '</span> <span class="dm">' + v + '</span> <span class="dy">' + x + '</span></span> <span class="autname">' + m + "</span></div></li>"
}
e("ul", g).append(l).addClass(h.loadingClass)
};
var c = function() {
e(h.idcontaint + " .nextx").click()
};
var b = function() {
e.get((h.blogURL === "" ? window.location.protocol + "//" + window.location.host : h.blogURL) + "/feeds/posts/summary" + (h.tagName === false ? "" : "/-/" + h.tagName) + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script", f, "jsonp");
setTimeout(function() {
e(h.idcontaint + " .prevx").click(function() {
e(h.idcontaint + " .sliderx li:first").before(e(h.idcontaint + " .sliderx li:last"));
return false
});
e(h.idcontaint + " .nextx").click(function() {
e(h.idcontaint + " .sliderx li:last").after(e(h.idcontaint + " .sliderx li:first"));
return false
});
if (h.autoplay) {
var i = h.interval;
var j = setInterval(c, i);
e(h.idcontaint + " .sliderx li:first").before(e(h.idcontaint + " .sliderx li:last"));
e(h.idcontaint + " .sliderx").hover(function() {
clearInterval(j)
}, function() {
j = setInterval(c, i)
})
}
e("ul", g).removeClass(h.loadingClass)
}, d)
};
e(document).ready(b)
})(jQuery)
};
//<![CDATA[
FeaturedPostSide({
blogURL: "Thay thành URl Blog của bạn",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
Lưu ý
- Nhớ cuộn code xuống dưới cùng sẽ có chỗ hiển thị để chỉnh sửa!- Sửa lại vài chỗ trên để hiển thị đúng nhé !!!
- Source: codepen.io
0 Nhận xét
Đăng nhận xét