29/10/2014

Tutorial: Posts Relacionados Candy Lland

||

Yo minna-san!!!! Como vão? Ein? Ein? Bem dando uma olhada nos meus antigos layouts eu vi um modelinho muito fofo de postagens relacionadas que eu usava, bom então resolvi colocar aqui para vocês. Só que houve um pequeno problema o site não existe mais... D: agora é um site de venda de templates mas, de toda forma deixarei os créditos ao antigo e novo site bem aqui. Não sei se ela permitia reblogar seus códigos então já sabem, se ela pedir que remover terei que tirar, mas os créditos vão para Candy Lland || Candy Template || Zaa Design. Já tinha visto esse site de templates porém nem sabia que era o antigo CL, achei bem legal os modelinhos alguns são um tiquinho caro mas vale muito a pena. Agora vamos ao tutorial!




Resultado: Imagem de Candy Lland

Primeiramente faça um backup do seu modelo, assim poderá recolocar caso algo de errado. ok? Então vamos lá.

1. Entre no seu HTML e procure por  </head>, para facilitar busque só por /head assim que achar acima dele cole esse código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://gizaa.googlecode.com/files/relacionados-candylland.js' type='text/javascript'/>
</b:if>

2.  Agora procure por  <div class='post-footer-line post-footer-line-3'> dependendo de seu modelo pode ser um pouco diferente mas é só achar o post-footer do seu template e cole abaixo:

<div id='related'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4; //numero de posts relacionados a mostrar
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>

A parte que marquei em vermelho é a quantidade de postagem que vai aparecer, após colocar todos os códigos volte nessa parte para trocar ou deixe assim mesmo.

3. Procure por ]]></b:skin> e acima dele cole o código abaixo:

/***********************************************************
          POSTS RELACIONADOS by CANDYLLAND.org
************************************************************/

#related{/* area geral do widget - diminua se necessário */
width:620px; /* largura total - altere */
height:160px;
margin-top:30px;
position:static;
margin-left:-30px /* margin da esquerda - altere se necessario */
}

#related a{/* area das imagens */
width:130px !important; /* largura total - altere se necessario */
height:120px !important; 
overflow:hidden;
border:1px #ddd dashed;
color:#fff;
margin-left:13px;  /* margin entre as imagens - altere se necessario */
border-radius:5px;
text-transform:lowercase;
text-shadow:0 0;
font:normal 17px tahoma  /* tamanho e tipo da fonte */
}

#related a:hover{background:#ff1490;border:1px #fff solid !important}

#related img{
border-radius:5px;
background:#fff;
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition: all 1s;
transition: all 1s
}

#related .thumbImg{
float:left;
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
overflow:hidden
}

#related .texto {
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
padding:10px
}

#related .thumbImg:hover{
opacity:0;
margin-bottom:-210px
}

#related .texto:hover{
float:left;
width:130px !important; /* largura total - altere se necessario - mesma largura de #related a */
height:120px !important;
display:block;
color:#000;
margin-top:-120px
}

/***********************************************************
        POSTS RELACIONADOS by CANDYLLAND.org FIM
************************************************************/

Nessa parte é a onde você personaliza as cores tamanho etc... Altere só as partes que estão com instruções As partes que não contem instruções não devem ser mexidas, isso é muito importante para que ele fique alinhado e o efeito em hover também.

22 comentários:

  1. Adorei o tutorial, super útil!
    Me responde uma coisa? Caso a resposta for sim (q) hsuehsue, é sempre bom salvarmos os tutoriais no pc? Pois a maioria dos blogs que eu gostava foram excluídos ou desativados e isso me dificultou muito. E obviamente, eu daria os créditos a pessoa mesmo com o blog não estando no ar.
    Besitos! Ah, e como você colocou esse coraçãozinho do lado do título do post? Se puder, faz tuto? Agora sim, é tchau mesmo u.u' hseuhsue

    ResponderExcluir
    Respostas
    1. Obrigada, fico feliz por isso! Aconselho sim a guardar, mas não no computador pois as vezes o corre de perder tudo por ele dar problema (digo por experiencia), mas guardar em um pendrive. Tenho uma amiga que guarda em um blog aparte e fechado apenas para ela, lá ela coloca o tutorial e o link da própria postagem que pegou. Assim sempre que precisa está guardadinho, essa é as duas opções que conheço. Claro posto sim :3
      Obrigada por comentar e por sua visita, beijokas.

      Excluir
  2. Que fofo ♥ Fica muito lindo, e é bem útil. Faz o blog ser mais visualizado, e as postagens ficam mais famosas, além de entreter melhor o leitor. Amei o tutorial! :)

    The Lord of Thrones

    ResponderExcluir
    Respostas
    1. Verdade!!! Acho esse tuto bem legal e útil é um dos meus favoritos. Muito obrigada por gostar Karla.

      Excluir
  3. Eu não invisto em lay com valores aushaus, mas eu compraria se eu fosse acostumada
    Achei muuuito útil a postagem, vou favoritar

    Beijos ❤
    http://www.p-perfectsthings.com/ | Quietly Pink

    ResponderExcluir
    Respostas
    1. Compreendo, mas obrigada por gostar do tutorial Estefani :3

      Excluir
  4. Nossa amei o tutorial, infelizmente o Candy Land morreu :( mais um blog de qualidade que foi pro lixo abraços adorei o tutorial.

    cherry--berry.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada por gostar. É uma grande pena...gostava muito do CL... Mas obrigada por gostar.

      Excluir
  5. Amei o tuto ! Já estou te seguindo pois amei o blog ! Beijos ;3 .
    http://diamondiamonds.blogspot.com.br/

    ResponderExcluir
  6. Ótimo tuto, já usei. Ajuda muito os/as leitores(a).
    Mais então, eu andei vendo alguns lays que você disponibiliza e tal... Mais já usei muito preto no meu blog. Estou usando um até, e eu queria cores agora entende? Então, eu vim te perguntar se eu posso alterar somente as cores de algum layout seu, pra usar. Irei creditar tudo *3* bom, me avise:

    prince modern.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade é muito bom, espero que muitos gostem também.
      Claro pode mudar sim, fique a vontade. :3 Quando fizer, me avisa? Adoraria poder ver.

      Excluir
  7. Ameei o layout novo *u* Queria saber se o blog se afiliaria ao meu.

    http://amnesiadeverao.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada amor linda. Deixarei a mensagem em seu blog, tudo bem?

      Excluir
  8. Olá linda, eu tenho um blog e, estava dando uma olhadinha no seu. (Não sei se estou no lugar certo de comentar isto, mas vai mesmo assim!) Bem, eu queria começar uma parceria com o teu Blog. (Caso você quiser, se não quiser é só falar nãu :3) Enfim... Eu sou meio tímida, mas pelo menos a internet me ajuda... -.-' Enfim, eu queria propor uma parceria, topa? Eu gosto tanto dos teus Layouts que colocou free, achei super fofos! Eu baixei um Dark no meu blog, e esse layout que usei foi o teu! Claro que, sem retirar os créditos! Se você quiser, por favor responda :3

    - Arigatou, kissus no ♥

    Link do Blog: http://ai-sasaki.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ohayoo Yuna, como vai? Espero que bem! Bom tem uma pagina mas no momento esta desativada, por isso não há problema perguntar aqui. Eu farei uma visita em seu blog e deixarei a resposta lá, está bem? ^^ Fico realmente feliz que goste do meu blog, o seu também é muito lindo!!! Muito obrigada por seu carinho, viu? Logo mais deixo a resposta lá no seu blog divo. Ah eu lhe entendo também sou bem tímida, mas a internet sempre ajuda um pouco. Mas não se preocupe irei responder sim. :3 Só eu entrar pelo computador.

      Excluir
  9. Oi brunny levo tempo buscando esse tutorial, eu tinha visto ele no blog da Gizaa mas nao tinha guardado e depois que ela excluiu o blog ficou dificil.

    Mas tenho um problema as imagens nao sai no blog fica so o espaço em branco onde tinha que ficas as postagem relacionadas. Me ajuda please. Beijo

    ResponderExcluir
    Respostas
    1. Olá Lud, realmente esse tutorial é difícil de encontrar. Claro que ajudo, qual é o uplad que usa para hospedar suas imagens? As vezes pode ser isso, que esteja tando esse resultado.

      Excluir
    2. Acabei de reparar que o link de um dos js está quebrado =/ assim que coloquei estava direito, eu irie procurar por um novo link. Peço desculpas esse infortúnio.

      Excluir
  10. Fuuncionou, finalmente um que deu certo <3

    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