Cara Membuat Carousel Responsive Auto Slide Keren

Versi Desktop
Versi Mobile

Cara Membuat Carousel Responsive Auto Slide Di Blogspot

1.Buka Blogger Kalian
2.Pergi ke Tata letak "Add Gadget" Dan Masukkan Kode di Bawah Ini

 
<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:200px }ul.rcentside li{height:100%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4),ul.rcentside li:nth-child(5){display:block }ul.rcentside img{border:0;width:100%;height:100%}ul.rcentside li:nth-child(1){width:20%;height:100%;margin:0 0 2px;left:0; }ul.rcentside li:nth-child(2){width:20%;height:100%;margin:0 0 2px;left:20%;}ul.rcentside li:nth-child(3){width:20%;height:100%;margin:0 0 2px;left:40%;}ul.rcentside li:nth-child(4){width:20%;height:100%;margin:0 0 2px;left:60%;}ul.rcentside li:nth-child(5){width:20%;height:100%;margin:0 0 2px;left:80%;}ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://i.pinimg.com/originals/ee/ee/97/eeee97a250e4bb12bda3053acd2f2829.jpg);background-size:100% 100%;background-repeat:no-repeat }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
@media screen and (max-width:600px){
ul.rcentside li:nth-child(1){width:50%;height:100%;margin:0 0 2px;left:0; }
ul.rcentside li:nth-child(2){width:50%;height:100%;margin:0 0 2px;left:50%;}
ul.rcentside li:nth-child(3){display:none;}
ul.rcentside li:nth-child(4){display:none;}
ul.rcentside li:nth-child(5){display:none;}
    ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4),ul.rcentside li:nth-child(5){display:none}
}
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://linkkalian.blogspot.com",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

SETTING:
Ubah kode "linkkalian" Menjadi Link blog Kalian.
Ubah kode "8" untuk berapa postingan yang akan di tampilkan misalnya 10/7.
Kode false Untuk menampilkan artikel terbaru Ganti Jika kalian ingin berdasarkan label Menjadi "LABELkalian" Misalnya Tutorial.
Kode "true" untuk non-aktifkan slide "false" untuk aktifkan slide.
ubah yang berwarna 200px Menjadi yang kalian inginkan.

5.Kemudian Save
Oke Sudah Selesai Tutorial Cara membuat Dropdown Menu
Mudah Bukan :D SELAMAT MENCOBA
Jika Error/Ada pertanyaan Boleh comment di bawah ya sobat

Cara Membuat Carousel Responsive Auto Slide Keren

2 comments:

Label