Slide de Filmes com Efeito JQuery - Exclusivo

Nesta postagem compartilho com vocês este slide de filmes, recomendado mais para sites relacionados a filmes. Consertar vai dar uma boa melhorada no design do site.

O Slide é semelhante a este abaixo:

O Slide é bem legal mesmo!!!

Para colocá-lo no seu blogger é bem simples... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

/*Slide com efeito Jquery*/
#carousel{border-radius:5px;width:960px;height:330px;border-bottom:1px solid #222;position:relative;display:block;background-image:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Menu-Navigation-Effect/pattern_40.gif)}
#carousel .container{position:absolute;left:23px;width:99%;height:330px;overflow:hidden}
#carousel #previous_button{position:absolute;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOQvTWHjbZslNRoDGbrNGI0vv5ipmlaUr8YOfe5m4NjiLXiQtrc0QesUNHXGsfvQrhSkAN8U3uYcB1o9y0JP3LZqAprDLH39wmcww-uoIIPCBJSQ22AnYCmHsgRIira3z1gLelGXH2yM/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjlcBPGUhAnYw6eMEJMbmacm90xaEQRTXaDE8aEFjq3QJ1uYnHLlPetWTV7iI_2CjWMSwFJWkuW_unin_UgepVorzik-BHngcx1iWObJmnxd76Ei73eSGPtVY93mljCDv0OfIjn7T7ro/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{cursor:move;filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYMQtYZhtn3CI9LBoSvkt4c2tDb1dK6_-_CKFQGd76hQ5xrLmdsHm0jdM48mjbVUOAb0T60bjhlqJs6s9fz3ntKbxEs5AUh9t01wuyVstPONIAbAqy6-28AIf9_L01ZUs16ClXQBJ9ec/s1600/sliderbg.png) repeat-x top;display:inline;float:left;text-align:center;font-family:arial;font-weight:700;font-size:.9em;line-height:1.2em;width:200px;height:300px;margin:0 1px 20px 12px;padding:6px}
#carousel ul li a.slider_title{text-shadow: 0px 0px 1px #000;color:#555;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#2FC9FF}

Agora, procure pela tag 

</head>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/carouselakaUTta.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUD2veQYWhVZyz-9AuK0Jy3q3UU2ZSMpG4Yw3Z_teMsHte2GKknC6ouktPeN3JCF0JwmRZ29_NVoR34oorV_02bq_WCnQwNH7BDqC32b5IUr3ahRWTwZh1EicrCcZTU_LFu7yRdmhJP0wB/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

Caso você já tenha o Ajax instalado em seu blog, retire a parte

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Agora, procure pela tag

<div id='main-wrapper'>

Ou 

main-wrapper

Ou 

<div class='main-wrapper'>

Tendo encontrado um dos códigos, cole ABAIXO dele o seguinte código

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>document.write(&quot; &lt;script src=\&quot;http://dicashot.blogspot.com/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script>    
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,    
visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)    
</script>
</b:if>

Coloque a URL do seu blog na parte destacada de VERMELHO no código.

Tendo feito isto no código, basta salvar e pronto!!!