31/07/2012

Tutorial: Postagens populares com efeito deslizante

||

Bom algumas colegas minhas perguntaram como coloquei as postagens recentes do blog em movimento "rodando", na época tive dificuldade de encontrar, um que funcionasse, então futricando no HTML eu achei. Eu acho bem bacana, porque chama mais a atenção do leitor, e deixa o blog mais bonito. Então decidi colocar para vocês como fiz.  Demostração aqui.

Antes de tudo siga:
Design >> Editar HTML (Antiga interface)
Modelo >> Editar HTML >> Prosseguir (Nova interface)
Então use o atalho Ctrl+F

Tudo pronto? Clique em Expandir modelos de widgets e procure por esse codigo em seu template. Se não achar pegue pequenas partes para procurar em vez de copiar tudo.

<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>
<b:includable id='main'>  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
    [Outros Codigos]
    </ul>

Agora a parte em azul representa a outra parte dos codigos, mais isso não importa porque é a em vermelho sera onde vamos trabalhar. Assim que achar o ul e o /ul, você ira colar o seguinte codigo bem em acima do <ul> :

<marquee direction='up' scrolldelay='300'>

Desça as poucos para achar o </ul> e coloque o codigo a baixo antes dele:

</marquee>

O resultado do codigo sera assim

<b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
<marquee direction='up' scrolldelay='300'>
    <ul>
    [Outros Codigos]
    </ul>
</marquee>
Viu é mais facil do que parecia não é? rsrsrs Bom até a proxima galera

5 comentários:

  1. Ohayoo Wendy-chan , eu não consegui , quando vou procurar o código , não me apareçe esse código inteiro só uma linha de código as outras linhas já são os outros códigos , e não encontro o ultimo código que está a vermelho.
    Print : http://prntscr.com/1z1p9p
    Espero que me ajude :3

    Kissus :3
    Nyah! Anime Forever

    ResponderExcluir
    Respostas
    1. Claro linda ajudo sim! O safadinho do blogger mudou um pouco a arrumação dos códigos, mas consegui achar. rsrs Obrigada por enviar o print facilito muito para saber qual era o problema, mas vamos lá. Eu deixei tudo explicadinho na imagem:

      Print : hhttp://prntscr.com/1z1zy4

      Eles estão escondidinhos dentro dos (...) se na imagem não der para ver direito.
      A palavrinha caso queira procurar por ela e não precisa digitar:

      Mas você tem que abrir os que disse, se não mesmo que você pesquise por esta palavra o /ul não vai aparecer porque ele fica dentro e esse fora só fica abaixo dele.
      Espero que possa ajudar <3

      Excluir
  2. O seu blog foi o único que realmente me ajudou a fazer isso .. Thaanks :33'

    http://me-uasterisco.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. :3 Fico feliz por ajudar, eu que agradeço por visitar e comentar.

      Excluir
  3. Funcionou! Muito bom, obrigada amigo!

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram