Tutorial: Postagens em destaque + Como tirar a atribuição do Blogger

01 dezembro 2015
  Hoje eu não trago o tutorial de como personalizar um layout, mas para quem está acompanhando, calma, eu irei continuar! :) O Tutorial hoje foi à pedido da leitora Any Duarte, ela quer saber como colocar as postagens em destaque assim como no meu blog e a Giih Nonato quer saber como tirar a atribuição do blogger: Tecnologia do Blogger. Bora lá?

Como colocar postagens em destaque no blog

  Vamos começar pelas postagens em destaque. Antes eu preciso dizer que aprendi essa forma lá no blog Sonhos de Giz (que agora está privado), não sei se os códigos são dela, mas os créditos eu darei à ela.

1° PASSO:

É importante sempre fazer o Backup do seu blog, caso haja algum erro. Para fazer isso é só ir em "Modelo" no canto superior à direita clique em "Fazer Backup/Restaurar" > "Fazer download do modelo completo". Com isso você terá uma cópia do seu blog e poderá voltar ao normal, caso haja erro. Vamos prosseguir...

Vá em "Modelo" > "Editar HTML" expanda a primeira setinha > Dê um clique na área dos códigos > Aperte CTRL+F. Na barra de pesquisa que aparecer digite ]]></b:skin> e dê enter. Quando encontrar essa tag, cole ACIMA dela o seguinte código:

*/   Posts indicados por Sonhos de Giz
-------------------------------------------------------- */
#box_recentes{width: 100%; }
.recentes {overflow: hidden; position: relative; padding: 0px; float:left; margin-left: 30px; margin-bottom: -25px; opacity: 0.9; width: 200px; height: 200px; border-radius: 100px; }
.recentes .mask, .recentes .content { width: 200px; height: 200px; position: absolute; overflow: hidden; opacity: 0; transition: all 0.5s linear; top: 0; left: 0}
.recentes:hover .mask { background-image: linear-gradient( to top, transparent , rgba(235, 214, 205, 0.9) 50% ); opacity: 1;}
.recentes img { width: 200px; height: 200px; display: block; position: relative -webkit-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);  -moz-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);}
.recentes:hover img { width: 200px; height: 200px; -webkit-transform: scale(1.2); -moz-transform: scale(1.2);-ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);  opacity: 4;}
.recentes p {opacity: 0; font-family: 'Comfortaa', cursive; font-weight:normal;  font-style: none; line-height: 1.3em; font-size: 14px; position: reltive; color: #fff; padding: 30px 16px 0px; text-align: center; margin-top:20px;}
.recentes:hover p {opacity: 1;}

Visualize para ver se não alterou nada no seu layout e salve. Ainda não vai aparecer nada!

2° PASSO:

Agora vá em "Layout" e ABAIXO do gadget "Cabeçalho" clique em "Adicionar um gadget" > "HTML/Javascript". Na caixinha que vai abrir cole o seguinte código:

<div id='box_recentes'>
<a href="LINKDOPOST" class="info">
<div class="recentes"><img src="LINKDAIMAGEM" /><div class="mask">
<p>TÍTULO DO POST</p>
</div></div></a>
<a href="LINKDOPOST" class="info">
<div class="recentes"><img src="LINKDAIMAGEM" /><div class="mask">
<p>TÍTULO DO POST</p>
</div></div></a>
<a href="LINKDOPOST" class="info">
<div class="recentes"><img src="LINDAIMAGEM" /><div class="mask">
<p>TÍTULO DO POST</p>
</div></div></a>
<a href="LINKDOPOST" class="info">
<div class="recentes"><img src="LINKDAIMAGEM" /><div class="mask">
<p>TÍTULO DO POST</p>
</div></div></a></div><br/><br/>

LINKDOPOST: Coloque o link do post que você quer que apareça em destaque. (Não mexa nas aspas)
LINKDAIMAGEM: Link da imagem do post que você deseja que apareça em destaque. Não sabe como pegar um link de imagem? Visualize o post já publicado > coloque o mouse em cima da imagem > dê um clique com o lado direito do mouse > copiar URL da imagem. Pronto! (não mexa nas aspas)
TÍTULO DO POST: Aqui você coloca o título do seu post.

O bacana desse tutorial é que ao passar o mouse sobre os posts em destaque, aparece um efeito gradiente:

Como colocar postagens em destaque no blog

Caso você não queira que as imagens fiquem quadradas, é só retirar essa parte do primeiro código: border-radius: 100px; Só mexa nisso, e pronto!
Lembrando que esse não é um slide automático de postagens recentes, é para postagens em destaque e é você quem troca as imagens sempre que quiser, seguindo sempre o segundo passo.

Como tirar a atribuição do Blogger


  Agora vamos ao tuto de como tirar a atribuição do Blogger, aquela frase que fica no rodapé do blog "Tecnologia do Blogger". Antes você precisa saber que essa frase é os créditos à quem fez o layout base que você está usando, sendo assim, você deve acrescentá-la novamente no rodapé quando colocar os créditos a sua personalização. Lembre-se, você personalizou um template já pronto, os créditos ao dono original devem ser mantidos, e isso não for feito, pode te causar futuras punições no Blogger.
  Esse tutorial já é bem visto na internet, e eu aprendi lá no Papo Garota, então, os créditos vão para ela, assim como as imagens que serão usadas a seguir.

Vá em "Modelo" > "Editar Html" > "Ir para Widget" > nas opções que aparecer clique em "Atribuição".

Como tirar a atribuição do Blogger

Clique na seta que indica o widget attribution1.

Como tirar a atribuição do Blogger

Irá aparecer mais uma linha de código oculto, clique na seta novamente.

Como tirar a atribuição do Blogger

  Agora todo o código estará visível, apague o código de <b: widget id .... até </b: widget> como mostra a imagem a seguir:

Como tirar a atribuição do Blogger

  Visualize e salve. Pronto, a atribuição ao blogger foi retirada. Não mexa em mais nada no código além do que está marcado acima, ta? Qualquer virgula apagada a mais buga o código inteiro!

  Prontissímo, esse foi o tutorial de hoje. Espero que seja útil, não esqueça de comentar e compartilhar, ta? Me ajuda muito. Beijos ♥ 

12 comentários:

  1. Obrigada por me ajudar. Consegue e tô muito feliz, se quiser conferir como ficou no meu blog, aí está o link http://nossaquecharmosa.blogspot.com.br/
    Um bju, muito sucesso pra ti, teu blog é tudo de bom ♥

    ResponderExcluir
    Respostas
    1. Fico muito feliz que tenha conseguido ♥ Peço desculpas pela demora!
      Vou conferir como ficou :D

      Excluir
  2. Nanda linda amei! Eu queria muito fazer isso dos posts em destaque mais tinha ideia de como fazer. Você ajuda demais com esses posts Nanda, tirou muitas duvidas minha. Eu ainda não consegui mexer em muita coisa porque estou correndo atrás de coisas da minha filha e fim de ano, mais vou mudar muita coisa no blog e com certeza você me ajudou demais, obrigada, Beijão!!!

    ResponderExcluir
    Respostas
    1. Continuarei com a série de posts, Pri. Quando tiver um tempinho é só vir acompanhando, e qualquer dúvida que surgir você pode me perguntar! :D
      Beijos ♥

      Excluir
  3. Ai Nanda ♥ Obrigada eu sempre quis tirara aquela coisa mas nunca conseguia!
    Obrigada Amando mais e mais o seu Blog Anjo ♥

    ResponderExcluir
  4. Nanda, faz um post de como personalizar os comentários?E centralizar o nome dos posts e os links da barra lateral?
    Ajudaria de mais por que quero começar um blog ainda no começo do ano!
    Obigado = D

    ResponderExcluir
    Respostas
    1. Oie, estou precisando me organizar mais quanto aos tutoriais, mas assim que eu conseguir faço o post, ta? Beijos ♥

      Excluir
  5. Obrigada por não ter tirado os créditos e parabéns Nanda, já vi tanto plágio que não poderia deixar de comentar que fiquei feliz em ver que não é todo mundo que faz isso! Beijos.

    ResponderExcluir
  6. acaso eu queira colocar essas postagens em destaque no final da página, como eu faço?

    ResponderExcluir
    Respostas
    1. Não sei se esses códigos permitem, mas é só mover o gadget para o lugar que deseja!

      Excluir
  7. nanda, ameiii! obrigado a muito tempo eu queria colocar mas nao fazia idea de como.
    So queria ter perguntar se tem forma de deixar 3 destaques e cetralizarlos no blog

    ResponderExcluir

- Os comentários são de responsabilidade de seus respectivos autores!
- Não são permitidos links que redirecionam diretamente para um post, vídeo ou sorteio. Comente porque gostou e não para se promover. Comentários que contenham esse tipo de link serão removidos.
- Seu comentário é muito importante para o andamento do blog e é um grande incentivo para mim, deixe sua opinião, dica, elogio, critica (com fundamento) ou sugestão.
- Deixe APENAS o link do seu blog para que eu possa conhecer. Comentários cheios de links também serão excluídos.
- Não ofenda nem desrespeite ninguém.
- Deixe a opção "Notifique-me" marcada para ser notificado(a) quando eu responder seu comentário!