Cara Memasang Featured Slider Keren Di Blogger

Pada postingan kali ini akan membuatkan sebuah widget Featured Slider dari Owl Carousel. Widget ini mempunyai kegunaan untuk menampilkan postingan terbaru menurut label dengan animasi slider yang halus dan sudah mendukung tampilan responsive.

Widget ini mungkin kurang cocok bagi teman yang sangat "menjunjung tinggi" dengan kecepatan, alasannya sebab memang akan membebani loading blog... Selalu ada harga yang mesti dibayar untuk sebuah keindahan dalam hal apapun dan itu sepadan, iya kan? Namun bagi teman yang tidak terlalu mementingkan hal tersebut dan kebetulan sedang mencari serta ingin memasang widget ini di blognya, mari kita simak Cara Memasang Featured Slider Keren di Blogger di bawah ini.

Cara Memasang Featured Slider Keren di Blogger

Sebelum melaksanakan tips di bawah ini, widget ini hanya dapat berjalan dengan baik dengan jquery library versi 2 ke atas.

Makara bagi teman yang ingin memasang instruksi ini, jikalau di templatenya memakai jquery library versi ini

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Ganti terlebih dahulu dengan versi ini

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

Perlu diperhatikan, mungkin ada widget di template yang tidak akan berjalan dengan baik jikalau sudah diganti ke versi 3.1.1.

Kode yang akan aku bagikan ini juga memakai ikon dari Fontawesome, jikalau belum ditambahkan. Tambahkan instruksi di bawah ini sebelum </head> pada Template editor.

<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>

Sudah selesai? Lanjut... Pertama buka dasbor Blogger > Klik sajian Tema dan Edit HTML > Tambahkan instruksi ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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:&#39;&#39;;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:&quot;&quot;;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:&quot;.&quot;;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 instruksi 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/AVvXsEhCpQ-DszZX2edZydVw8k14lJw2V68EZZJz4XFDu1R2Od0sBOlmwGHcDWFJ4pmPhifsx0DFM4hBBbMK_PY1FukcJxLCLmLxYGRJqDOUdkMF0-774oH5dxRkZWnAqiYAr30BnS4rhFs3lPM/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/AVvXsEhCpQ-DszZX2edZydVw8k14lJw2V68EZZJz4XFDu1R2Od0sBOlmwGHcDWFJ4pmPhifsx0DFM4hBBbMK_PY1FukcJxLCLmLxYGRJqDOUdkMF0-774oH5dxRkZWnAqiYAr30BnS4rhFs3lPM/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/AVvXsEhCpQ-DszZX2edZydVw8k14lJw2V68EZZJz4XFDu1R2Od0sBOlmwGHcDWFJ4pmPhifsx0DFM4hBBbMK_PY1FukcJxLCLmLxYGRJqDOUdkMF0-774oH5dxRkZWnAqiYAr30BnS4rhFs3lPM/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/AVvXsEgcnwqX2oQEeWGP6XddBrynGjZW_DhRXKxijHYVjhJOHTaYxtsFjDgCEdd703V2G0ShWqSQedP4OngUtMDsIAkkivYpHNQ7ZGLuEZqdxB8E17Lsoy1hU0WV1hFj1SN_7Xr3As2ChUfpk8Q/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>

Ganti instruksi yang ditandai sesuai dengan kebutuhan.

Setelan

Tipe	Keterangan
autoplay:true	Ganti nilai menjadi false jikalau ingin menonaktifkan fitur autoplay
nav:true	Ganti nilai menjadi false jikalau ingin menonaktifkan fitur navigasi
items:1	Ganti angka 1 dengan jumlah postingan yang akan tampil di depan pada media responsive
postnum4=4,postnum5=5	Ganti angka 4 dan 5 dengan jumlah post yang akan ditampilkan pada widget

Untuk setingan selengkapnya, dapat kunjungi Owl Carousel

Selanjutnya tambahkan instruksi ini bebas dimanapun diantara instruksi <body> dan </body>, misalnya di dalam <div class='content-wrapper'> menyerupai ini

<div class='content-wrapper'> ... ... ---KODE_WIDGET_DI_SINI--- ... ... </div>

Berikut instruksi widgetnya

<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 != &quot;&quot;'>                         <h2 class='title'>                              <data:title/>                           </h2>                         </b:if>                         <div class='widget-content'>                           <div class='widget-inner'>                             <script>                               document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);                             </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 != &quot;&quot;'>                         <h2 class='title'>                              <data:title/>                           </h2>                         </b:if>                         <div class='widget-content'>                           <div class='widget-inner'>                             <script>                               document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea5\&quot;&gt;&lt;\/script&gt;&quot;);                             </script>                           </div>                         </div>         </b:includable>   </b:widget> </b:section> </div>

Bungkus instruksi widget di atas dengan Tag Kondisional jikalau hanya ingin menampilkan di halaman index saja. Contohnya menyerupai ini

<b:if cond='data:view.isMultipleItems'> <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>   <b:widget id='HTML33' locked='true' title='Featured Post' type='HTML' version='1'>      ------   </b:widget> </b:section> </div> </b:if>

Setelah itu klik tombol Simpan tema. Refresh halaman dan abaikan jikalau ada peringatan, lanjut ke sajian Tata Letak > Klik Edit pada widget dengan judul Slider dan Featured Post > Ganti nama label dengan nama label yang akan ditampilkan pada widget Featured Slider dan Selesai!

• Result
• Cek Responsive

Demikian dari wacana Cara Memasang Featured Slider Keren di Blogger. Terima kasih dan wassalam.

Share this post