Pada kesempatan kali ini Maks Miliyan ingin berbagi tutorial bagaimana Cara Memasang Featured Slider Otomatis di Blogger.
Berikut ini kelebihan dari Featured Slider yang akan saya bagikan ke kalian.
- Menampilkan postingan terbaru berdasarkan label.
- Animasi slider yang halus.
- Responsive, sudah mendukung di semua ukuran layar.
- Sedikit membebani loading blog
Bagi sobat blogger yang ingin mencoba Featured Slider ini langsung aja simak Cara Memasang Featured Slider Otomatis di Blogger berikut ini.
Cara Memasang Featured Slider Otomatis di Blogger
Pastikan template blog yang di gunakan menggunakan Jquery library versi ini
Jika versi Jquery library di template sobat menggunakan versi 2 ke bawah silahkan ubah menggunakan Jquery library di atas.
Tambahkan kode Fontawesome di bawah ini sebelum </head>
Lewati langkah di atas jika di template blog sobat sudah menggunakan kode Fontawesome.
Selanjutnya tambahkan kode di bawah ini sebelum </head> atau </head><!--<head/>-->
Dan kode di bawah ini
Berikut nya tambahkan kode di bawah ini di antara tag <body> dan </body>
Setelah selesai klik tombol Simpan jika ada peringatan abaikan saja. Selanjutnya pergi ke menu Tata letak klik edit pada widget dengan judul Slider dan Featured Post > ubah nama label dengan nama label yang ingin di tampilkan dan Selesai.
Bagi sobat blogger yang ingin melihat tampilan nya seperti apa silakan Result di sini
Jadi itulah Cara Memasang Featured Slider Otomatis di Blogger yang Maks Miliyan sampaikan, Terimakasih sudah berkunjung.
Source kode : Arlina Design
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
Jika versi Jquery library di template sobat menggunakan versi 2 ke bawah silahkan ubah menggunakan Jquery library di atas.
Tambahkan kode Fontawesome di bawah ini sebelum </head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Lewati langkah di atas jika di template blog sobat sudah menggunakan kode Fontawesome.
Selanjutnya tambahkan kode di bawah ini sebelum </head> atau </head><!--<head/>-->
<style id='owl-carousel' type='text/css'> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto} #featured-slider h2.title,#featured_slider .widget h2.title{display:none} #featured_slider{margin:0 0 30px} .slider-wrappper{max-width:970px;margin:0 auto;padding:0} .owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em} .slider-item{position:relative;height:100%} .slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1} a.slider-image{height:100%} .thumb.overlay{height:200px} .post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s} .slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)} .slider-wrapp .post-inner{padding:0 40px;margin:auto} .slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .slider-item h2.post-title a{color:#000;transition:all .3s} .slider-item h2.post-title a:hover{color:#aaa} .slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase} .slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .slider-item .post-tag a:hover{background:#000;color:#fff} .feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff} .featured-posts{display:inline-block;width:100%} .feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0} .feature-item:last-child{margin:0} .feature-item .thumb.overlay{height:150px;width:100%;position:static} .feature-item .thumb.overlay a.slider-image{} .feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s} .feature-item .post-descript:before{content:'';position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden} .feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)} .feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400} .feature-item h2.post-title a{color:#000} .feature-item:hover h2.post-title a{color:#aaa} .feature-item .post-meta{margin:0} .feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .feature-item .post-tag a:hover{background:#000;color:#fff} .feat-home{height:320px;margin:0 0 50px;position:relative} .feat-home:before,.slider-item:before{content:"";right:0} .feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1} .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative} .owl-carousel{display:none;width:100%;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden} .owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)} .owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none} .no-js .owl-carousel,.owl-carousel.owl-loaded{display:block} .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} .owl-carousel .animated{animation-duration:1s;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} .owl-height{transition:height .5s ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent} .owl-theme .owl-nav{margin-top:10px} .owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px} .owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none} .owl-theme .owl-nav .disabled{opacity:.5;cursor:default} .owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px} .owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1} .owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px} .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} .owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)} .owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)} .owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s} .owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0} .owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)} #HTML33 .widget-content{overflow:visible} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @media screen and (max-width: 768px){ .feature-item{width:50%;margin:0 auto 15px auto}} @media screen and (max-width: 640px){ .owl-prev,.owl-next{top:18%} .owl-carousel .owl-item{height:auto} .post-descript{padding:15px 10px;left:5%;right:5%} .slider-wrapp .post-inner{padding:0 10px} .slider-item h2.post-title{font-size:16px} .feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}} @media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}} </style>
Dan kode di bawah ini
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ function postarea4(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum5:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="owl_carouselle owl-carousel">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in l)g=l.summary.$t;else g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img class="owl-lazy" min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],y=postdate.split("-")[0],v=0;v<f.length;v++)if(parseInt(u)==f[v]){u=p[v];break}var k=e.feed.entry[t].content.$t,A=(v=$("<div>").html(k)).find("img:first").attr("src"),w=e.feed.entry[t].media$thumbnail.url;-1!=w.indexOf("img.youtube.com")&&(w=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),w=w.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiI1FRCalzz35xYLNczGovKre4VUCMHCGUYP6P2xraecmUdlWS9zvhiwgNYy6FO6xBaPVSleL1wGUCJLXIwY3yaSgZiycLUED9dVfAHVJ-0u5U581u5pVcifAKZm3Yw6OaIzg7FuGsjs/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===A)if(e.feed.entry[t].media$thumbnail)var x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover;width: 100%;height: 420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else x='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+') no-repeat center center; display:block;"/>';else x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover; display:block;"/>';var z='<div class="slider-item"><div class="slider-wrapp"><div class="thumb overlay">'+x+'</div><div class="post-descript"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2><div class="post-date">'+(h+" "+u+" "+y)+'</div></div></div><div class="clear"></div></div></div>';document.write(z),j++}document.write("</div></div>")}function postarea5(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="row"><div class="featured-posts">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in l)g=l.summary.$t;else g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),y=s.indexOf('"',b+5),d=s.substr(b+5,y-b-5),-1!=a&&-1!=b&&-1!=y&&""!=d&&(img[t]=0==t?'<img min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<f.length;u++)if(parseInt(h)==f[u]){h=p[u];break}var y=e.feed.entry[t].content.$t,v=(u=$("<div>").html(y)).find("img:first").attr("src"),k=e.feed.entry[t].media$thumbnail.url;-1!=k.indexOf("img.youtube.com")&&(k=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),k=k.replace("/s72-c/","/s1600/");y="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiI1FRCalzz35xYLNczGovKre4VUCMHCGUYP6P2xraecmUdlWS9zvhiwgNYy6FO6xBaPVSleL1wGUCJLXIwY3yaSgZiycLUED9dVfAHVJ-0u5U581u5pVcifAKZm3Yw6OaIzg7FuGsjs/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===v)if(e.feed.entry[t].media$thumbnail)var A='<a href="'+r+'" class="slider-image" style="background:url('+k+') no-repeat center center;background-size: cover;width: 100%;height: 420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else A='<a href="'+r+'" class="noimg slider-image" style="background:url('+y+') no-repeat center center; display:block;"/>';else A='<a href="'+r+'" class="slider-image" style="background:url('+k+') no-repeat center center;background-size: cover; display:block;"/>';var w='<div class="feature-item"><div class="thumb overlay">'+A+'</div><div class="post-descript"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2></div></div><div class="clear"></div></div>';document.write(w),j++}document.write("</div></div></div>")}function postarea1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="featured-posts">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in l)g=l.summary.$t;else g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img class="owl-lazy" min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],y=postdate.split("-")[0],v=0;v<f.length;v++)if(parseInt(u)==f[v]){u=p[v];break}var k=e.feed.entry[t].content.$t,A=(v=$("<div>").html(k)).find("img:first").attr("src"),w=e.feed.entry[t].media$thumbnail.url;-1!=w.indexOf("img.youtube.com")&&(w=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),w=w.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiI1FRCalzz35xYLNczGovKre4VUCMHCGUYP6P2xraecmUdlWS9zvhiwgNYy6FO6xBaPVSleL1wGUCJLXIwY3yaSgZiycLUED9dVfAHVJ-0u5U581u5pVcifAKZm3Yw6OaIzg7FuGsjs/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===A)if(e.feed.entry[t].media$thumbnail)var x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover;width: 100%;height: 420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else x='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+') no-repeat center center; display:block;"/>';else x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover; display:block;"/>';var z='<div class="feat-home"><div class="thumb overlay">'+x+'</div><div class="post-descript"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2><div class="post-date">'+(h+" "+u+" "+y)+'</div></div></div><div class="clear"></div></div>';document.write(z),j++}document.write("</div></div>")}cat1="Featured",imgr=new Array,imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAUhWJAu89PlMJ8qoCCtgoDAlUhfKnXc0c-429C-hQl4_FzxUF7yHMQgN_hByR3PShMYReGb6qGbFrdA6tbka4PeC4dJ3oNalBViNtOWV_6kSr8JzTnEmL1bU3A7Bwkr4sSPYNOZu7Gw/s1600/picture_not_available.png",showRandomImg=true,aBold=true,summaryPost=150,summaryTitle=50,postnum1=1,postnum4=4,postnum5=5; // Options $(document).ready(function(){$(".owl_carouselle").owlCarousel({autoplay:true,loop:true,lazyLoad:true,nav:true,dots:false,video:true,navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],smartSpeed:1200,responsiveClass:true,responsive:{0:{items:1},600:{items:1},1e3:{items:1}}})}); //]]> </script>
Berikut nya tambahkan kode di bawah ini di antara tag <body> dan </body>
<div class='slider-wrappper'> <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'> <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>Featured</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/> </h2> </b:if> <div class='widget-content'> <div class='widget-inner'> <script> document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>"); </script> </div> </div> </b:includable> </b:widget> <b:widget id='HTML33' locked='true' title='Featured Post' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>Fashion</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/> </h2> </b:if> <div class='widget-content'> <div class='widget-inner'> <script> document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+postnum4+"&orderby=published&alt=json-in-script&callback=postarea5\"><\/script>"); </script> </div> </div> </b:includable> </b:widget> </b:section> </div>Jika Featured Slider hanya ingin di tampilkan di halaman index bungkus kode di atas dengan kode ini
<b:if cond='data:view.isMultipleItems'>kode di atas</b:if>
Setelah selesai klik tombol Simpan jika ada peringatan abaikan saja. Selanjutnya pergi ke menu Tata letak klik edit pada widget dengan judul Slider dan Featured Post > ubah nama label dengan nama label yang ingin di tampilkan dan Selesai.
Bagi sobat blogger yang ingin melihat tampilan nya seperti apa silakan Result di sini
Jadi itulah Cara Memasang Featured Slider Otomatis di Blogger yang Maks Miliyan sampaikan, Terimakasih sudah berkunjung.
Source kode : Arlina Design
0 comments:
Post a Comment