Estou devendo desde janeiro o código completo pronto para instalar o S3Slider com Posts Recentes. O código do widget é meio sensível para colocar parseado aqui nos posts do Blogger, por isso vou disponibilizar um arquivo txt para fazer download, copiar e colar no HTML do template. Mão à obra!
Colocar os estilos
Vamos começar pela CSS. Procure a tag
]]></b:skin> e cole o cógido logo ACIMA dessa tag:/* Slide de Posts Recentes */
#slide-wrapper{ /* estilos do container geral do slide - altere cores e medidas */
background:#fafafa;
border:5px solid #eee;
margin:0 0 10px 0;
padding:10px 0 10px 0;
width:628px}
#postslide{ /* estilos para o slide - altere medidas */
height:380px;
margin:auto;
overflow:hidden;
position:relative;
width:590px}
#postslideContent{ /* estilos para o conteúdo do slide - altere apenas a largura - é uma lista não ordenada */
position:absolute;
top:0;
width:590px}
.postslideImage{ /* estilos para o ítem de lista - não altere */
display:none;
float:left;
position:relative}
.postslideImage span{ /* estilos para os textos e fonte do título do post - altere cores e medidas */
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:20px 13px;
position:absolute;
width:590px}
.postslideImage span p{ /* estilos para o sumário do post - altere medidas */
font-size:12px;
line-height:1.6em;
padding:8px 20px 0 0}
.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{ /* cor dos links */
color:#fff}
Altere medidas e cores de acordo com seu template. Este exemplo (tanto estes estilos, como as medidas no widget) é para um slide igual ao do template Zélia, colocado acima da área de posts no main-wrapper.
A hierarquia com os seletores no widget é a seguinte:
div id="slide-wrapper" - container geral
div id="postslide" - container do widget (slide)
ul id="postslideContent" - lista com os posts
li class="postslideImage" - ítem de lista com os posts
(a)link com url do post
(img)imagem do post
fecha (a)
span
(a)link com url do post
título do post
fecha (a)
(p) sumário do post
fecha (p)
fecha span
fecha li
fecha ul
fecha div div
Colocar a chamada do JQuery da API do Google
Quem já tem o JQuery instalado no blog para outras aplicações, não precisa repetir este código. Quem ainda não instalou, copie o código a seguir e cole ABAIXO do tag
]]></b:skin> <script src='http://www.google.com/jsapi'/> <script> google.load("jquery", "1.3.1"); google.load("jqueryui", "1.5.3"); </script>
Instalar o script para o Slide
Logo depois do JQuery, cole o código do script do slide (se preferir hospede o script em seu site preferido de hospedagem).
A primeira linha (e o fechamento da b:if no final) deve ser deletada se você quiser o slide em todas as páginas. Neste caso está previsto para ser mostrado apenas na página inicial.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> 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=$("#"+element[0].id+"Content ."+element[0].id+"Image");var itemsSpan=$("#"+element[0].id+"Content ."+element[0].id+"Image span");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>0){timeOutFn=setTimeout(makeSlider,thisTimeOut);}else{console.log("Poof..");}};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('bottom')==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('bottom')==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() {
$('#postslide').postslide({
timeOut: 6000});
});
</script>
</b:if>
Você pode alterar o tempo de mudança das telas do slide, alterando o número 6000 para mais ou para menos.
ATENÇÃO!
Eu modifiquei o script do S3Slider para dar suporte aos mesmos seletores usados no widget, portanto, não adianta usar o código original do S3Slider e copiar os outros códigos deste post, ou o slide não vai funcionar.Instalar o widget de Posts Recentes vinculado ao slide
Agora vem o script chatinho. Não dá prá colocar o código aqui no post, pois, mesmo parseado, ele não funciona. Então, você deve fazer o download do arquivo txt do link abaixo, copiar o código e colar em seu template.
No Zélia eu coloquei o código logo abaixo da div do main-wrapper, antes da section class='main' (não precisa marcar para expandir os widgets)
Agora vejamos as partes do script que podem ser customizadas.
<b:if cond='data:blog.url == data:blog.homepageUrl'> CÓDIGO DO SCRIPT </b:if>
Assim como expliquei acima, retire a condicional e o fechamento da condicional se você quer que o slide apareça em todas as páginas.
imgr[0] = "http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif";
Essa é a imagem que irá aparecer quando não houver nenhuma imagem em seu post. Altere o endereço da imagem se quiser substitui-la.
imgwidth = 590; <!-- esta é a largura da imagem - deve ser a mesma medida que você colocou em postslide e postslideContent --> imgheight = 380; <!-- altura da imagem - deve ser a mesma medida que você colocou em postslide --> summaryPost = 140; <!-- numero de caracteres que você deseja para o sumário do post --> startpost = 6; <!-- a partir de qual post você deseja mostrar no slide - veja observação --> numposts = 6; <!-- numero de posts que você deseja que apareçam no slide - evite um numero muito alto para não deixar o slide muito pesado -->
Observação: Acrescentei o startpost no widget para não repetir posts que já estão mostrados na página inicial de seu blog. Você pode colocar numero 1 e o slide mostrará a partir do post mais recente. Se você optar por mostrar apenas a partir dos posts que não estão na página inicial, faça da seguinte forma:
- veja quantos posts você configurou para a página inicial - exemplo: 5 posts.
- coloque como startpost = 6 - o slide mostrará a partir do sexto post mais recente.
Visualize o template e se estiver tudo ok, salve.
Há outros modelos de slides onde podemos usar o widget de posts recentes e mostrarei em próximos artigos.
Comentários: 32
Esse script eh mais simples ainda que o S3 slider, ele realmente dava um aumento significativo no peso da pagina =]
Esse parece ser mais "light" :D
Fica mais leve sim, Vitor, do que colocar imagens no S3Slider original - alguns leitores daqui usam o Zélia e podem te confirmar que o carregamento não é demorado.
E você me lembrou de uma coisa que esqueci de mencionar no post. É possível mudar a URL no widget, e fazer um slide só de um determinado marcador, o que pode ser bem útil, dependendo do nicho do blog.
Abraços!
Muito bom Rô Zanchetta. Parabéns pelo trabalho. Vou testar qualquer hora.
Rô no meu templatenão deu certo. Será porquê? Fiz tudo certinho como está no blog.
Rô gostei muito do template do Zelia, me conceda esta oportunidade de usá-lo é para notícias de minha cidade.
Bom estou gostanto muito de seus artigos já li grande maioria deles comecei a trabakhar com o blogger ontem, sou programador PHP+MySQL e não intendo praticamente nada de js estou gostando, já coloquei sei slide no meu template do blogger e acho que estou evoluindo bem rápido no XML+CSS+JS do blogger, obrigado pela ajuda que me deu de ontem para hoje.
Oi..
Adorei esta dica...vou por no meu blog hoje...
Vc me ensina como eu faço para usar a dica lá de cima "É possível mudar a URL no widget, e fazer um slide só de um determinado marcador"
Mudar como ?
Valeu!
Rô, no meu template está aparecendo as fotos separadas, uma embaixo da outra. O que eu tem que fazer?
Obrigada, Helder! :D
Matheus: Se as imagens estão aparecendo uma embaixo da outra é o seguinte - o script do widget está funcionando certinho, mas o script do slide é que não está funcionando. Geralmente isso acontece pelas seguintes razões:
- o JQuery não está devidamente instalado;
- há algum outro script que está dando conflito com o JQuery.
Veja primeiro se você instalou certinho o JQuery. Se estiver ok, cheque se existe alguma outra biblioteca de scripts (Mootools, Prototype, etc) em seu template. Se algum outro script conflitante com o JQuery estiver instalado, um deles não vai funcionar.
Para fazer funcionar o JQuery com outros scripts que entram em conflito, existe um plugin específico, mas é super complicado de explicar como colocar no template.
Vou ver se consigo montar um tutorial "em lingua de gente" e não de programador (... hehe) para colocar as bibliotecas conflitantes no mesmo template, mas por ora, o conselho que dou é você escolher qual prefere em seu blog.
O template Zélia está disponível para download. Veja todos os posts com as instruções para instalar.
Drax: No final do script do widget tem um código assim:
script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"
Você precisa acrescentar o feed da categoria(marcador), por exemplo:
script src=\""+home_page+"feeds/posts/default/-/NOME-DO-MARCADOR?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"
O nome do marcador deve estar escrito com a ortografia exata que você tem no blog para funcionar.
Oi Juliano! Recebi seu email, mas ainda não arranjei um tempo prá responder. Mas já adianto que vou te encher para entender php, sim... hehe
Estou para me inscrever em um curso que vai abrir aqui na minha cidade, mas só para Julho. Preciso muuuuito começar a mexer com php e MySQL e me aprofundar em JS. O curso de php já achei onde fazer, mas é fogo achar onde aprender JS aqui na roça.. hehe
Abração!!
Rô,
Tá feito... show de bola... me economizou um tempão esta dica. Antes eu fazia a inclusão na unha, e agora vai automaticamente pro slide.
Valeu!
Rô, esta dica é muito boa...
Implantei lá no meu blog, mas notei que há diferenças na aparência quando vejo no firefox e no chrome...
Eu ando com a imagem e não acerto a posição neles dois..tá igual a cobertor curto...cubro a cabeça e descubro o pé...
hahaha
Vc conhece uma solução pra isso ?
Opa !
eu nem uso o S3slider...
ele e muito limitado , so vim p/ dizer que esta chamada de script é inutil neste tutorial.
google.load("jqueryui", "1.5.3");
pois esta chamando o Jquery UI e que não é necessario ...
abraços !
Obrigada por este post!
Adoro o Slide. Meu amor eterno ao Coralina mas o Zélia me conquistou por causa desse Slide.
Bjos
Oi Rô, tudo bem?
Como faço para mudar no Layout (rodapé) o endereço do Bloggersphera?
Quando clico vai para a página antiga e dá erro. Acredito que todos que usam seus Templates estão com mesmo problema.
Obrigada!
Beijos
Obrigada, pessoal! Que bom que gostaram! :D
Seu Noca: Tente o seguinte - antes de todos os estilos do slide, coloque:
#slide-wrapper ul li{
list-style:none;
margin:0;
padding:0;}
Oi Claudia! Realmente, perdi um monte de links.. :(
No caso do template Zelia, procure lá no finalzinho do código do template
div class='bottom' id='credits'
e troque o link do e acrescente o br no final do link para o bloggersphera.com, deixando www.bloggersphera.com.br
Beijão e obrigada!! :D
oooops... delete o pedaço e troque o link do... hehe
Rô!!!!
Consegui trocar... Agora está certinho.
Faz um tópico sobre isso, pessoal que curte seus templates (como eu) sempre estão por aqui e irão trocá-los.
Um beijo grande.
Sucesso sempre!
Rô!
Consegui trocar...
Faz um post sobre isso. Nós que curtimos e usamos os seus templates sempre estamos por aqui, assim todo mundo troca.
Beijo grande.
Sucesso sempre!
Eu achava que eu tinha um conhecimento basico sobre esse assunto , mas eu não consegui entender nada. Quer dizer , entendi algumas coisas , mas não entendo onde colocar os codigos e tem horas que você fala o codigo de uma forma que eu não entendo se é pra colocar ou não , por exemplo :
A hierarquia com os seletores no widget é a seguinte:
div id="slide-wrapper" - container geral
div id="postslide" - container do widget (slide)
ul id="postslideContent" - lista com os posts
li class="postslideImage" - ítem de lista com os posts
(a)link com url do post
(img)imagem do post
fecha (a)
span
(a)link com url do post
título do post
fecha (a)
(p) sumário do post
fecha (p)
fecha span
fecha li
fecha ul
fecha div div
olá Rô!!
utilizo o template Matino, e já vem com o slider instalado. Eu gostaria de saber como implemento somente o script que faz os slides mudarem automaticamente. Porque no matino o slider é manual, cada vez que voce posta algo tem que ir no Html e editar..
agradeço desde já !
Rô seguinte...Fiz tudo certinho como você mandou no post mas está aparecendo apenas uma tela branca sem foto alguma, apesar de meus posts estarem com fotos...Será que você poderia me dar uma mão? Eu estou editando um template que já veio pronto e estou tendo algumas dificuldades para colocar exatamente um slide igual ao da zelia num blogger...Me ajude por favor.
Elton: Você precisaria estudar um pouco de CSS para entender os seletores, listas, ítens de lista, etc. Aqui no BloggerSPhera existem alguns artigos com dicas para aprender CSS. Talvez ajudem um pouco.
No caso do slide, eu expliquei neste post quais são os seletores que podem ser usados para colocar estilos, caso você não use os estilos que coloquei como exemplo. Espero ter ajudado.
Abraços!
Romilio: O slide é o mesmo e você pode substituir o código do seu pelo deste post. Para manter a mesma aparência do slide que está em seu blog, você só precisa mudar os seletores na CSS, assim em vez do texto aparecer no rodapé do slide, irá aparecer à direita.
Abraços!
Caio: Sem acessar seu blog não consigo ver qual é o problema....
Abração!!
Olá novamente Rô!
consegui alterar o código do slider e a Css pro texto aparecer na direita, só que as imagens do slider não mudam e nem o texto está aparecendo, o que pode estar acontecendo?
eu coloquei, mas não deu certo. Simplesmente aparece um troço branco no lugar de onde deveria ser o slide. o fundo do meu blog eh branco!
ola o meu deu certo, mas ficou um pequeno problema. o texto do slide, fica "empurrando" o corpo da template pra baixo, ao inves de subir por cima da imagem. dai cada mudança de imagem, as postagens que ficam no centro da template de 3 colunas, desce e sobe. ao inves do texto subir em cima da imagem deixando o restante do blog parado.
ola, deui certo, mas as postagens descem quando o texto aparece ao inves de subir por cima da imagem. tipo minha templkate e 3 colunas e dai ele empurra as posatagem para baixo e depois volta quando o texto aparece.
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Observação: somente um membro deste blog pode postar um comentário.
Feed dos ComentáriosBlog This!