Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Cara Mudah Membuat Slider (Slide Show) Keren di Blog,

Cara Mudah Membuat Slider (Slide Show) Keren di Blog,

Posting Komentar

 <style>

    #featuredpost {margin:15px auto;margin-top:0px;}
    #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative;border:1px solid #fff}
       #slides ul{height:300px}
    #slides li{width:50%;height:100%;position:absolute;display:none}
    #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
    #slides li:nth-child(1){left:0;top:0}
    #slides li:nth-child(2){left:50%;width:25%;height:50%}
    #slides li:nth-child(3){left:75%;width:25%;height:50%}
    #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
    #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
    #slides li:nth-child(1) h4 {overflow:hidden;font-size:17px;bottom:0;color:#fafafa;width:100%;
    padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
    height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:25px;left:0;}
    #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
    padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
    #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
    background:#ff6553;margin:0;}
    #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
    padding:5px 21px;text-transform:uppercase;margin:0;}
    #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
    #slides a{display:block;width:100%;height:100%;overflow:hidden}
    #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
    #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
    #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-position:50% 40%;background-repeat:repeat-x;}
    #slides h4{position:absolute;bottom:5px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
    left:5px;padding:5px 5px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
    background:rgba(0,0,0,0.3);text-align:left;text-transform:uppercase;margin-right:0px;}
    #slides .label_text{font-size:12px;color:#fff;bottom:5px;z-index:3;left:5px;
    position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
    text-transform:uppercase;}
    #slides li:nth-child(2) .autname,#slides li:nth-child(3)  .autname{display:none;}.label_text{display:none;}
    #slides .overlayx,#slides li{transition:all .4s ease-in-out}
    #slides li:nth-child(1) .overlayx{display:none;}
    #slides li:hover .overlayx{opacity:0.1}
    @media only screen and (max-width:800px){
    #slides li:nth-child(1) h4{font-size:18px;line-height:24px;}}
    @media only screen and (max-width:600px){
      #slides ul{height:425px;margin-top:5px;}
      #slides li:nth-child(1){width:100%;height:65%}
      #slides li:nth-child(2){top:65%;height:35%;left:0;width:50%}
      #slides li:nth-child(3){left:50%;top:65%;width:50%;height:35%}
      #slides li:nth-child(4){display:none;}
      #slides li:nth-child(5){display:none;}
      }
    @media only screen and (max-width:480px){
    #slides li:nth-child(1) h4 {font-size:15px;line-height:20px;}}
    </style>
    <script>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/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 c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);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+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><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)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
</script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"https://bloganda.blogspot.co.id/",
    MaxPost:20,
    idcontaint:"#featuredpost",
    ImageSize:300,
    interval:10000,
    autoplay:true,
    tagName:false
    });
    });
    //]]>
    </script>
    <div id="featuredpost"></div>




Keterangan:
  • Silahkan ganti tulisan berwarna merah dengan Url alamat blog anda. 
  • Pengaturan di atas berfungsi layaknya widget Recent Posts. Jika ingin menampilkan artikel-artikel berdasarkan label tertentu, anda bisa ganti kode false (ditandai warna hijau) dengan label (kategori) pilihan di blog anda. Contoh: tagName:"Kesehatan"
  • 10000 (warna biru) untuk kecepatan pergerakan slider. Anda bisa merubahnya agar lebih cepat atau lebih lambat. Misal ganti menjadi 8000 agar lebih cepat atau 12000 agar lebih lambat, dst. 


Posting Komentar untuk "Cara Mudah Membuat Slider (Slide Show) Keren di Blog,"