Cara Membuat Widget Featured Slider di Blogger
Assalamualaikum Sahabat Blogger.
Cara Membuat Widget Featured Slider di Blogger - Dalam artikel kali ini Mas Putro akan berbagi widget Featured Slider dari Owl Carousel. Widget ini berguna untuk menampilkan postingan terbaru berdasarkan label dengan animasi slider yang halus dan juga sudah mendukung tampilan responsive. Widget ini mungkin tidak cocok untuk anda yang sangat "menjunjung tinggi" kecepatan loading blog, dengan alasan bahwa hal itu akan membuat lambat sebuah blog.

Tetapi untuk anda yang tidak terlalu mementingkan hal seperti itu dan ingin memasang widget ini di blog anda, silakan anda ikuti langkah demi langkah tutorial yang akan saya berikan ini.

Cara Membuat Widget Featured Slider di Blogger

Sebelum melakukan tutorial di bawah ini, widget ini hanya dapat berfungsi dengan baik dengan library jquery versi 2 ke atas. Jadi untuk anda yang ingin memasang fitur ini, silakan anda update dulu library jquery ke versi terbaru. biasanya pada template blog sudah terpasang jquery seperti ini.

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

Silakan anda rubah ke versi dibawah ini.

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

Catatan : Kemungkinan ada beberapa widget yang tidak support dengan jquery versi 3.1.1. 

Tambahkan juga kode di bawah ini sebelum kode </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>

Jika kode di atas sudah tersedia di template blog anda, anda tidak perlu ikuti langkah diatas, anda cukup ikuti langkah - langkah di bawah ini :

Baca Juga : Cara Memasang Script Anti AdBlock di Blog 100% Ampuh

Tahap #1
Buka dasbor Blogger anda -> Klik menu "Tema" -> dan pilih "Edit HTML". Kemudian tambahkan kode dibawah sebelum kode </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>

Tahap #2
Kemudian letakkan kode dibawah ini tepat pada kode Tahap #1

<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="http://1.bp.blogspot.com/-S5pmP6Y0KUs/V6CsQEqKNGI/AAAAAAAAEFY/LZigJ20wKVkpzFLJSuzvjJDkC9z9IFy5wCK4B/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="http://1.bp.blogspot.com/-S5pmP6Y0KUs/V6CsQEqKNGI/AAAAAAAAEFY/LZigJ20wKVkpzFLJSuzvjJDkC9z9IFy5wCK4B/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="http://1.bp.blogspot.com/-S5pmP6Y0KUs/V6CsQEqKNGI/AAAAAAAAEFY/LZigJ20wKVkpzFLJSuzvjJDkC9z9IFy5wCK4B/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]="http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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>

Baca Juga : Cara Membuat Widget Breaking News di Blogger

Ubahlah kode yang sudah ditandai sesuai dengan kebutuhan.

Setting :
  1. autoplay: true : Ubah nilainya menjadi false jika anda ingin menonaktifkan fitur autoplay 
  2. nav: true : Ubah nilainya menjadi false jika anda ingin menonaktifkan fitur navigasi 
  3. item: 1 : Ubah angka 1 dengan jumlah postingan yang akan muncul di halaman depan 
  4. postnum4 = 4, postnum5 = 5 : Ubah angka 4 dan 5 dengan jumlah postingan yang akan ditampilkan pada widget 

Untuk pengaturan lengkap, kunjungi Owl Carousel

Tahap #3
Selanjutnya tambahkan kode dibawah antara kode <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 != &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 kode widget di atas dengan Tag Conditional jika anda hanya ingin menampilkannya di halaman indeks.

Baca Juga : Cara Membuat Widget FansPage Facebook di Blog

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

Tahap #4
Setelah itu klik tombol Simpan. Kemudian refresh halaman dan abaikan jika ada peringatan,

Tahap #5
Buka menu Layout -> Klik Edit pada widget dengan judul Slider dan Featured Post -> Ubah nama label dengan nama label yang akan ditampilkan dalam Widget Featured Slide dan Selesai!

Demikian tutorial yang bisa saya bagikan tentang Cara Membuat Widget Featured Slider di Blogger . Semoga bermanfaat dan selamat mencoba. Terimakasih Wassalamualaikum.
Penulis : MasPutro.com

Post a Comment

Lebih baru Lebih lama