Cara Membuat Slide Show Otomatis di Blog

Banyak kalangan blog yang ingin website atau blognya mempunyai tampilan Slide atau Slide Show, makannya untuk postingan kali ini saya akan membagikan script slide show yang mungkin berguna bagi para sahabat blogger di indonesia, Salah satu contoh slide seperti yang saya gunakan di blog saya.

Cara Menggunakan Script Slide Show :

1. Masuk ke Blog sobat
2. Tambahkan Gadget
3. Cari HTML Javasript
4. Copy Paste Kode Dibawah Ini

<style type="text/css"> ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:970px;height:300px;}ul.featured-widget-list .featuredbg{width:970px;height:300px;position:absolute;z-index:2;left:0;top:0;opacity:.4;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwYnT5ECNAfDYQsbdFAAHRCXLTWVJWFg-Co_1BJHObEn4x6RScTePow7t0dLqj3v1wROk9qAgAILe1O-E_3DRa6rVdOqLTn-N9sWmar-GfLINeghPFWvMoD8QeUN0y1hOWrePdq7r3IUM/s400/overlay-bg.png);background-position:50% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#DDD;margin:0;text-transform: Sans Serif;padding:0px 0px;line-height:1.9em;letter-spacing:0.3px;font: 30px 'Abel', Sans Serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%} .feat-buttons a{text-indent:-9999px;margin:0 7px;width:0px;height:0px;padding:5px;background:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%} .feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px} </style> <div id="featuredbwidget"> </div> <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ featuredbwidget({ listURL:"https://www.ronalmb.com/", featuredNum:5, listbyLabel:false, feathumbSize:0, interval:5000, autoplay:true, featuredID:"#featuredbwidget" }); function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:0,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVpJP5dAm5A6ap_KuhOBYfKrfmg-WVZIT_N2ObIq4C_dzVYqx7FsWShwnbQ0kA-Ji23QVlxXU6F0vcFi5AsHyHAzpsvJSA7QjpvUSfT4_ff-SsqUkmYV_XEcd14Wlc1iIrAhINujaNOI/s500/no+image.jpg",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"> <ul class="featured-widget-list"></ul> <div class="feat-buttons"> <a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div> </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.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+=' <li><a href="'+q+'"><div class="featuredbg"> </div> <img class="featuredthumb" src="'+u+'"/><h5> '+k+'</h5> </a><div class="featured-meta"> <span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div> </li> "}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)}; //]]> </script>

Keterangan Penggunaan :

1. Cari Kode listURL:"https://www.ronalmb.com/", Lalu ganti dengan url kamu
2. Kode  featuredNum:5,  Kegunaanya untuk mengatur berapa banyak postingan yang tampil
3. Kode img{border:0;width:970px;height:300px;  dan  featuredbg{width:970px;height:300px;  Kegunaanya untuk Mengatur Panjang dan Lebar Tampilan Slide atur sesuai keinginan anda.
4. Kode  interval:5000,  Kegunaanya untuk mengatur kecepatan slide.

Baiklah itulah cara untuk membuat postingan slide otomatis di blog dan jangan lupa untuk komen terimaksih. (rmb)

Tags: Blog Cara

Share: