Automatický slider do menu

Po pár hodinách práce se mi zadařilo upravit jeden slider, aby byl použitelný a univerzální pro všechny. Automaticky si načítá nové články a z obrázků uvnitř nich a z nadpisu vytváří slider, který si můžete vložit do menu. Všechno je přednastavené, jediné, co změníte, je adresa vašeho blogu a pak se už nemusíte o nic starat. Písmo se přizpůsobí vašemu nastavení... I samotné obrázky se upraví (berte v potaz, že jde o ořez obrázku, takže záleží na rozměrech a kvalitě obrázků, které do článků vkládáte). Snažila jsem se to vytvořit opravdu co nejjednoduší, aby se hodil každému.

Stačí otevřít administraci blogu - Rozvržení - Přidat gadget - HTML/JavaScript a vložit následující kód.

<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:100%;height:auto}
ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;left:0;top:0;}
ul.featured-widget-list .featuredbg:hover{}
ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:20px;left:25px;right:25px;color:#fff;margin:0;padding:10px 20px;line-height:1.3em;font-size: 13px;overflow:hidden;}
ul.featured-widget-list li:hover h5{bottom:20px;left:25px;right:25px;}
ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {background:#333;opacity:0.6;}
ul.featured-widget-list li:hover {filter: grayscale(100%);}
ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1;}
ul.featured-widget-list .featured-meta{color:transparent}
.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:transparent;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;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent;margin-left:-3px}

</style>
<div id="featuredbwidget"></div>
<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:"ADRESA-VAŠEHO-BLOGU",
featuredNum:5,
listbyLabel:false,
feathumbSize:350,
interval:4000,
autoplay:true,
featuredID:"#featuredbwidget"
}
);
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-s_LT6BUzRhF5eqT69329FrChdC6kmBZcoIbKUw8zEMTUgGHGSLGkgLt_WCJxpNzbAFM_nclNF79vU_42kSHD-_EP77OOI_AB7cS9RpTi-oRUbXL20H0-WGOT_Z3eqihNjLe277fJSUc/s500/no-image.png",byMonth:["leden","únor","březen","duben","květen","červen","červenec","srpen","září","říjen","listopad","prosinec"],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>

ADRESA-VAŠEHO-BLOGU - je potřeba zadat, aby měl z čeho načítat data
featuredNum:5, - tady si můžete změnit počet načítaných článků
listbyLabel:false, - můžete i zvolit konkrétní štítek a vepsat s uvozovkami (například listbyLabel:"recenze" - a budou se zobrazovat pouze články s tímto štítkem)
color:#fff; - určuje barvu písma
background:#333; - barva pozadí obdélníku s textem, nezapomeňte ale, že je lehce průhledný, takže nikdy nepůjde o úplně sytou barvu
opacity:0.6; - pokud chcete obdélník úplně neprůhledný, smažte tuto část
filter: grayscale(100%); - barevný efekt obrázku po najetí myši, pokud chcete nějak změnit, využijte tohoto článku


Tak co? Bude se vám hodit? :-) Doufám, že bude fungovat jak má, přece jen nejsem žádný expert a změny provádím často metodou pokus omyl. Kdyby něco, pište...