Code Slide Recent Post with thumbail
Rất dễ hiểu thôi. code hiện thị 4 bài mới nhất của blogger hiện thị bằng 4 bức ảnh dạng slide thay đổi liên tục theo bố cục mình đã css lại để phù hợp với body của blog các bạn.
Code Slide Recent Post with thumbail được mình chỉnh sửa lại từ code của arlinadzgn. Mình nghĩ là anh em sẽ có lúc cần đến nó.
Code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style scoped='' type='text/css'>
ul.rcentsidehotrofm * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
ul.rcentsidehotrofm {
font-size: 11px
}
ul.rcentsidehotrofm,
ul.rcentsidehotrofm li {
margin: 0;
padding: 0;
list-style: none;
position: relative
}
ul.rcentsidehotrofm {
width: 100%;
height: 300px
}
ul.rcentsidehotrofm li {
height: 40.5%;
position: absolute;
padding: 0;
width: 49.5%;
float: left;
overflow: hidden;
display: none
}
ul.rcentsidehotrofm li:nth-child(1),
ul.rcentsidehotrofm li:nth-child(2),
ul.rcentsidehotrofm li:nth-child(3),
ul.rcentsidehotrofm li:nth-child(4) {
display: block
}
ul.rcentsidehotrofm img {
border: 0;
width: 100%;
height: auto
}
ul.rcentsidehotrofm li:nth-child(1) {
width: 100%;
height: 59.7%;
margin: 0 0 2px;
left: 0;
top: 0
}
ul.rcentsidehotrofm li:nth-child(2) {
left: 0;
top: 60%;
width: 33%;
}
ul.rcentsidehotrofm li:nth-child(3) {
left: 33.5%;
top: 60%;
width: 33%;
}
ul.rcentsidehotrofm li:nth-child(4) {
width: 100%;
left: 67%;
top: 60%;
width: 33%;
}
ul.rcentsidehotrofm .overlayx,
ul.rcentsidehotrofm li {
transition: all .4s ease-in-out
}
ul.rcentsidehotrofm .overlayx {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
opacity: .6;
background-image: url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
background-position: 50% 50%;
background-repeat: repeat-x
}
ul.rcentsidehotrofm .overlayx,
ul.rcentsidehotrofm img {
margin: 3px
}
ul.rcentsidehotrofm li:nth-child(1).overlayx {
background-position: 50% 25%
}
ul.rcentsidehotrofm .overlayx:hover {
opacity: .1
}
ul.rcentsidehotrofm 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.rcentsidehotrofm li:hover h4 {
bottom: 30px
}
ul.rcentsidehotrofm li:nth-child(1)h4,
ul.rcentsidehotrofm li:nth-child(4)h4 {
font-size: 150%
}
ul.rcentsidehotrofm .label_text {
position: absolute;
bottom: 0;
left: 20px;
z-index: 2;
color: #fff;
font-size: 90%;
opacity: 0;
transition: all .3s
}
ul.rcentsidehotrofm li:hover .label_text {
bottom: 20px;
opacity: 1
}
ul.rcentsidehotrofm li:nth-child(2).autname,
ul.rcentsidehotrofm 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'/>
<script type='text/javascript'>
//<![CDATA[
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="rcentsidehotrofm"></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)
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL: "http://blogger.blogspot.com/",
MaxPost: 4,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
</b:if>
Các bạn chỉ cần cho code vào chỗ cần hiện là dc rùi sửa lại đoạn
Code:
http://blogger.blogspot.com/
thành blog của bạn