Posted by 
Halo sobat blogger pada postingan kali ini Maks Design ingin membagikan sebuah widget Featured Post Slider Otomatis di Blogger. Featured Post kali ini berfungsi untuk menampilkan postingan terbaru kalian berdasarkan label.
Featured Post yang akan saya bagikan kali ini sudah Responsive di semua ukuran layar, jadi kalian tidak perlu repot meng otak atik kode nya agar responsive.
Cara Memasang Featured Post Slider Otomatis di Blogger
Widget Featured Post ini akan berfungsi dengan baik pada jquery library versi 2 ke atas.Jika pada template blog sobat menggunakan jquery library seperti di bawah ini
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jsGanti dengan versi di bawah ini
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.jsPerlu kalian ketahui, mungkin ada beberapa widget pada template yang tidak berfungsi dengan baik jika versi jquery library kalian sudah di ubah ke versi 3.1.1.Ok lanjut, jika pada template blog sobat belum menggunkan ikon dari font awesome, tambahkan terlebih dahulu kode di bawah ini sebelum </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 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/AVvXsEjSwneEUeNOQZsR2a9FwFNMDzdzSLCvaPF4WtpiLDvkR5r0fwraUtLQD0v47US13xjEw3kGVMiL4eTFI5P6BZbbqR1QGzKpPObK7dSWtILaMeJ8cIS1xgPJXou24AiVn487PPEpKpov8XA/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/AVvXsEjSwneEUeNOQZsR2a9FwFNMDzdzSLCvaPF4WtpiLDvkR5r0fwraUtLQD0v47US13xjEw3kGVMiL4eTFI5P6BZbbqR1QGzKpPObK7dSWtILaMeJ8cIS1xgPJXou24AiVn487PPEpKpov8XA/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/AVvXsEjSwneEUeNOQZsR2a9FwFNMDzdzSLCvaPF4WtpiLDvkR5r0fwraUtLQD0v47US13xjEw3kGVMiL4eTFI5P6BZbbqR1QGzKpPObK7dSWtILaMeJ8cIS1xgPJXou24AiVn487PPEpKpov8XA/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/AVvXsEgSf82_EhGl12a9PEw_HIg-HVNPylbOoTcY8lSoetRAOMaWHN1f0YhTrWpBn9lb4e-hRZQtzvuzY-83vNZ0NTO84m-syT9zpQeUQoaOGcyjuZL19E_nXi1qFH8ysiJPQxke_UrOS6-kkwg/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>Panduan Seting
| Tipe | Keterangan |
|---|---|
| autoplay:true | Ganti True dengan False jika ingin menonaktifkan fitur autoplay |
| nav:true | Ganti True dengan False jika ingin menonaktifkan fitur navigasi |
| items:1 | Ganti angka 1 dengan jumlah postingan yang ingin di tampilkan pada media responsive |
| postnum4=4,postnum5=5 | Ganti angka 4 dan 5 dengan jumlah post yang akan di tampilkan pada widget |
Tambahkan kode di bawah ini di antara kode <body> dan </body> bebas dimanapun contohnya di dalam <div class='content-wrapper'>
<div class='content-wrapper'> ... ... ---KODE_WIDGET_DI_SINI--- ... ... </div>
Di bawah ini kode widget nya
<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 kalian hanya ingin menampilkan di halaman index saja, bungkus kode di atas dengan Tag Kondisional seperti pada contoh di bawah ini.
<b:if cond='data:view.isMultipleItems'> KODE WIDGET </b:if>Setelah semuanya selesai klik tombol Simpan Tema setelah itu lanjut ke menu Tataletak > klik Edit pada judul Slider dan Featured Post ganti nama label tersebut dengan nama label yang ingin di tampilkan pada widget Featured Post Slider setelah itu klik simpan lalu lihat hasil nya.
Jadi itulah yang bisa Maks Design bagikan kekalian semua tentang Cara Memasang Featured Post Slider Otomatis di Blogger sekian dari saya Terima Kasih.
comment 0 Comments
more_vert