Tạo Slide Bài Viết Hiển Thị Tại Trang Chủ Cho Blogger
Hôm nay, mình sẽ viết bài chia sẻ cách tạo Slide bài viết hiển thị tại trang chủ Blogger Responsive, Code này mình Viewsource từ một THEME mình từng sử dụng mà mình quên :'((
Làm đẹp bằng CSS
.cycle-slideshow{width:100%;height:300px;display:block;text-align:center;z-index:0;overflow:hidden; margin-bottom: 10px;position:relative;}.cycle-slideshow ul{width:100%;height:100%;height:100vh;padding:0;}.cycle-slideshow li{width:100%;height:100%;margin:0;padding:0;}.cycle-prev,.cycle-next{position:absolute;top:0;width:11%;opacity:.92;filter:alpha(opacity=92);z-index:800;height:100%;cursor:pointer;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;opacity:0;}.cycle-slideshow:hover .cycle-prev,.cycle-slideshow:hover .cycle-next{opacity:1;}.cycle-prev{left:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;height:30px;width:30px;font-size:25px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;}.cycle-next{right:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;height:30px;width:30px;font-size:25px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s}.slide-inside{display:table;vertical-align:middle;height:100%;padding:0;width:100%;background:transparent;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-inside:hover{background:rgba(255,255,255,.1)}.slide-title,.slide-title a:hover{display:table-cell;vertical-align:bottom;background: linear-gradient(transparent, #000);}.slide-image{background-position:center;background-size:cover;height:100%;width:100%}.slide-cat{display:inline-block;margin-bottom:7px;background: rgba(31, 31, 31, 0.8);border-radius: 2px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:2px;padding:5px}.slide-h2{color:#fff;font-size:25px;line-height:1.4em;font-weight:400;text-transform:none;margin-bottom:16px;display:block;z-index:9}.slide-excerpt{color:#fff;font-size:12px;font-weight:300;letter-spacing:1px;padding:0 0 20px;display:none}.slide-divider{border-top:2px solid;display:block;max-width:50px;margin:0 auto;color:#fff}.slide-more{display:none;color:#fff;border-radius: 50px;padding:10px 50px;margin:10px auto 10px;font-size:10px;text-transform:uppercase;letter-spacing:2px;display:inline-block;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}#crosscol-overflow{margin:0 auto;}.mobile .cycle-slideshow{height:250px}.mobile .slide-resume,.mobile .slide-more{display:none;}
Javascript kích hoạt
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js' type='text/javascript'/> <script> //<![CDATA[ var showpostthumbnails=!0;var showpostsummary=!0;var random_posts=!1;var numchars=100;var numposts=10;function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i} if(random_posts==!0){indexPosts.sort(function(){return 10-Math.random()})} if(numposts>numPosts){numposts=numPosts} for(i=0;i<numposts;++i){var entry=json.feed.entry[indexPosts[i]];var posttitle=entry.title.$t; if(typeof cate=='undefined'){var cate="uncategorised"}else{var cate=json.feed.entry[i].category[0].term} for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}} if("content" in entry){var postcontent=entry.content.$t} s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl=d}else var thumburl='//placehold.it/1000x300';document.write('<li><div class="cycle-slideshow"><a href="'+posturl+'"><div class="slide-image" style="background-image:url('+sb_thumbnail_resize(thumburl)+');"/><div class="slide-inside"><div class="slide-title">');document.write('<div class="slide-container">');document.write('<div class="slide-cat">'+cate+'</div>');document.write('<div class="slide-h2">'+posttitle+'</div>');var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==!0){if(postcontent.length<numchars){document.write('<div class="slide-excerpt">'+postcontent+'... </div>')}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontentl=postcontent.substring(0,quoteEnd);document.write('<div class="slide-excerpt">'+postcontent+'... </div>')} document.write('<div class="slide-divider"></div>');document.write('<div class="slide-more">Xem Thêm</div></div></div></div>')} document.write('</a></div></li>')} document.write('</ul>');document.write("<div class='cycle-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></div><div class='cycle-next'><i class='fa fa-angle-right' aria-hidden='true'></i></div>")} function sb_thumbnail_resize(image_url) { image_tag = image_url.replace('/s320/','/s1600/'); return image_tag; } //]]> </script> <div class='cycle-slideshow' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-random='true' data-cycle-slides='li' data-cycle-speed='1600' data-cycle-timeout='0'> <script src='/feeds/posts/default/?max-results=20&orderby=published&alt=json-in-script&callback=showgalleryposts'/></div>
