22 de jun de 2011

Slide 3slider com as últimas postagens

A Rô do Bloggersphera desenvolveu parte deste slide, coloco aqui para vcs.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

Mais uma vez o Blogger mudou toda a configuração e com isso, os antigos templates "Minima" no qual todas as dicas e tutoriais feitas por quase todos os problogers deixarm de ter efeito. Vou aos poucos refazendo as dicas em cima do template "Simple"





Vá até o HTML de seu blog e clique em "Editar modelo, ao pé da página.



Ao abrir a janela, procure por:

<div class='main-outer'>



Para encontrar com facilidade, clique em F3 no seu teclado




Cole então este código abaixo dele


<b:if cond='data:blog.url == data:blog.homepageUrl'>
       <div id='slide-wrapper'><div id='postslide'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif&quot;;
showRandomImg = true;
imgwidth = 630;
imgheight = 260;
summaryPost = 140;
startpost = 6;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
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){document.write('<ul id="postslideContent">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;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;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";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 item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></span></li>';if(summaryPost==0){item='<li class="postslideImage"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div> 
</div>
</b:if>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- s3Slider
Developped By: Boban Karišik -&gt; http://www.serie3.info/
CSS Help: Mészáros Róbert -&gt; http://www.perspectived.com/ -->
<script type='text/javascript'>
(function($){$.fn.postslide=function(vars){var element=this;var timeOut=(vars.timeOut!=undefined)?vars.timeOut:6000;var current=null;var timeOutFn=null;var faderStat=true;var mOver=false;var items=$(&quot;#&quot;+element[0].id+&quot;Content .&quot;+element[0].id+&quot;Image&quot;);var itemsSpan=$(&quot;#&quot;+element[0].id+&quot;Content .&quot;+element[0].id+&quot;Image span&quot;);items.each(function(i){$(items[i]).mouseover(function(){mOver=true;});$(items[i]).mouseout(function(){mOver=false;fadeElement(true);});});
var fadeElement=function(isMouseOut){var thisTimeOut=(isMouseOut)?(timeOut/2):timeOut;thisTimeOut=(faderStat)?10:thisTimeOut;if(items.length&gt;0){timeOutFn=setTimeout(makeSlider,thisTimeOut);}else{console.log(&quot;Poof..&quot;);}};var makeSlider=function(){current=(current!=null)?current:items[(items.length-1)];var currNo=jQuery.inArray(current,items)+1;currNo=(currNo==items.length)?0:(currNo-1);var newMargin=$(element).width()*currNo;if(faderStat==true){if(!mOver){$(items[currNo]).fadeIn((timeOut/6),function(){if($(itemsSpan[currNo]).css(&#39;bottom&#39;)==0){$(itemsSpan[currNo]).slideUp((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}else{$(itemsSpan[currNo]).slideDown((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}});}}else{if(!mOver){if($(itemsSpan[currNo]).css(&#39;bottom&#39;)==0){$(itemsSpan[currNo]).slideDown((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}else{$(itemsSpan[currNo]).slideUp((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}}}};makeSlider();};})(jQuery); 
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#postslide&#39;).postslide({
timeOut: 6000});
});
</script>
</b:if>

Salve.

Agora procure por:

]]></b:skin>

e substitua por:



/*  s3Slider
--------------------------- */
#slide-wrapper {
border: 3px solid #eee;
background: #fff;
padding: 10px;
margin: 10px;
}

#slide-wrapper ul li{
list-style:none;
margin:0;
padding:0;
}

#postslide{
height:250px;
width:auto;
margin:5px auto;
overflow:hidden;
position:relative;
}

#postslideContent{
position:absolute;
top:0;
right:0;
width:auto;
}

.postslideImage{
display:none;
float:left;
position:relative;
}


.postslideImage span{
background-color:#000;
color:#fff;
display:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
font-size:20px;
left:0;
bottom:0;
padding:30px 25px;
position:absolute;
width:auto;
}


.postslideImage span p{
font-size:12px;
line-height:1.6em;
padding:10px 25px 15px 0;
margin:auto;
}

.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{
color:#fff;
}
]]></b:skin>

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>

8 comentários:

  1. no meu blog nao tem esse codigo a ser procurado ! :/

    ResponderExcluir
  2. Mozart, veja qual o modelo de seu blog. Perceba que as minhas dicas são para os antigos modelos de templates do blogger. Beijos

    ResponderExcluir
  3. Muito bom o post ^^
    Era exatamete o que eu procurava!!!!
    Um detalhe: quiser que o slider fique tramsparente tira o background.
    E para ele ficar em sima da postagem do blog e so colcar o codigo em vez de em baixo de :
    div class='main-outer'
    Coloca abaixo de:
    div class='column-center-inner'

    Como no caso do meu: http://emcontoscommorte.blogspot.com/

    Brigada ^^

    ResponderExcluir
  4. Como assim substitua?apar e colocar ???

    ResponderExcluir
  5. tentei adicionar esse slide no meu blog , mas so apareceu uma tela do tamanho do slid, branca, sem nada , o q fazer , ou o q aconteceu

    ResponderExcluir
  6. mas no meu blog n funcio so apareceu uma tela do tamanho do slid, branca, sem nada , o q fazer , ou o q aconteceu quero muito isso no meu blog :(

    ResponderExcluir
  7. tbm s'o apareceu uma tela branca sem nada :/

    ResponderExcluir
  8. é verdade no meu tb só apareceu uma tela branca sem nada....que pena!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube