 |
| Automated Responsive Recent Post Slider to Blogger |
Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML tìm trong CSS của bạn và copy đoạn code bên dưới vào
#featuredpost {margin:15px auto; width: 970px;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald'; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald'; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:50%} #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%} #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%} #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
Bước 2: Nhấn Ctrl + F trong khung tìm kiếm gõ </head> Sau đó copy đoạn code bên dưới vào phía trên thẻ </head>
<script type='text/javascript'>Bước 3: Xác định vị trí đặt để hiển thị bài viết chúng ta dùng code HTML để gọi. Bạn tìm trong Template của mình vị trí muốn đặt và dán đoạn code bên dưới vào. Thường code này se hay đặt dưới phần Header của Blog
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/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 c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);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+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><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)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('') //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"https://www.longanit.com/", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]>
</script>
<div id="featuredpost"></div>Bước 4: Bạn thay đổi các thông tin như tôi liệt kê bên dưới cho phù hợp với blog của bạn nhé
- blogURL:"https://www.longanit.com" (Thay đổi thành link blog của bạn)
- MaxPost:8, ( Số bài viết hiển thị mặc định là 8)
- idcontaint:"#featuredpost", ( lệnh gọi bài viết ra )
- ImageSize:500, ( Kính thước tối đa của ảnh hiển thị)
- interval:10000, ( Tốc độ Slide mặc định 10000)
- autoplay:true, ( Tự động slide bài viết khi load nếu set False sẽ không tự động )
- tagName:false ( Mặc định không hiển thị nhãn )
Nếu sử dụng trên Widget gặp lỗi bạn có thể sử dụng toàn bộ đoạn code dưới đây
<div id="longanit-seo" class="longanit-seo">
<h2><a href="https://www.longanit.com/"><i class="fa fa-bullhorn"></i> BÀI VIẾT MỚI NHẤT </a></h2>
<style>
.longanit-seo h2{background:#0073aa;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold;}
.longanit-seo ul{list-style:none;margin:0;padding:0}
.longanit-seo li{text-indent:0;background:url(https://4.bp.blogspot.com/-TVFMWMC-lZw/UasMPl5QstI/AAAAAAAADVw/Th-PSA_b3SI/s1600/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px;}
.longanit-seo h2 a:link, .longanit-seo h2 a:visited {color:#fff;}
#laslide{padding: 5px;border-bottom: 5px solid #337ab7; margin-bottom: 20px;background: #fff;border-radius: 4px;box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);overflow: hidden;transition: all ease-in-out 125ms; border-right: 3px solid #f1f1f1;}
#recentpostbsd {margin:15px auto;}#bsdslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#bsdslide ul,#bsdslide li{padding:0;margin:0;list-style:none;position:relative}#bsdslide ul{height:320px}#bsdslide li{width:48%;height:100%;position:absolute;display:none}#bsdslide li:nth-child(1), #bsdslide li:nth-child(2), #bsdslide li:nth-child(3), #bsdslide li:nth-child(4), #bsdslide li:nth-child(5){display:block}#bsdslide li:nth-child(1){left:0;top:0}#bsdslide li:nth-child(2){left:50%;width:25%;height:50%}#bsdslide li:nth-child(3){left:75%;width:25%;height:50%}#bsdslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%}#bsdslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%}#bsdslide li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}#bsdslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;padding:0;font-family:'Roboto';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}#bsdslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;background:#8ED557;margin:0;}#bsdslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0;}#bsdslide li:nth-child(1) span.dy, #bsdslide li:nth-child(1) span.autname{display:none;}#bsdslide a{display:block;width:100%;height:100%;overflow:hidden}#bsdslide img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}#bsdslide li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}#bsdslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZsYhhGKRqYqmFwetSROWIimH89yfEwp7iYadna6mZv_Nk0iCAF5v52UQmpXemdAXI4pATdS4UXOparYLTYcUX2uHBwVHIBQjLRa9_cvjsNqmQSM9yVChbiS9Z_52DWa7aSZl7ZxcJ6I/s1600/fade+bloggersstand.png);background-position:50% 40%;background-repeat:repeat-x;}#bsdslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Roboto';left:10px;padding:5px 10px;color:#fefefe;z-index:3;line-height:20px;font-weight:normal;background:rgba(40,40,40,0.6);text-align:left;text-transform:uppercase;margin-right:10px;}#bsdslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;position:absolute;background:rgba(142,213,87,0.8);padding:3px 6px;font-family:'Roboto';text-transform:uppercase;}#bsdslide li:nth-child(2) .autname,#bsdslide li:nth-child(3) .autname,#bsdslide li:nth-child(4) .autname,#bsdslide li:nth-child(5) .autname{display:none;}#bsdslide .overlayx,#bsdslide li{transition:all .4s ease-in-out}#bsdslide li:nth-child(1) .overlayx{display:none;}#bsdslide li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){#bsdslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){ #bsdslide ul{height:600px} #bsdslide li:nth-child(1){width:100%;height:50%} #bsdslide li:nth-child(2){top:50%;height:25%;left:0;width:50%} #bsdslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #bsdslide li:nth-child(4){left:0;top:75%;height:25%;width:100%} #bsdslide li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#bsdslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="recentpostbsd"></div>
<script type='text/javascript'>
function Recentpostbsd(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#recentpostbsd",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/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 c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="bsdslide"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);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+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><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)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#bsdslide li:first").before(e("#bsdslide li:last"));return false});e("#nextx").click(function(){e("#bsdslide li:last").after(e("#bsdslide li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#bsdslide li:first").before(e("#bsdslide li:last"));e("#bsdslide").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
Recentpostbsd({
blogURL:"https://www.longanit.com",
MaxPost:15,
container:"#recentpostbsd",
ImageSize:450,
Time:2000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
</div>
Chúc bạn thành công!
Không có nhận xét nào:
Đăng nhận xét