Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Blogger] Code Slide Recent Post with thumbail ver 1

Tác giả: - vào lúc:
blogger
Bài viết : 88
Points : 236
Like : 36
blogger
An toàn
bloggerMEM LV2
10/5/2016, 22:58
#1

Code Slide Recent Post with thumbail


[Blogger] Code Slide Recent Post with thumbail ver 1 5w4ZlXa

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