18 de mar de 2015

Como fazer posts destacados responsivos no WordPress

Ter uma área de posts em destaque é maravilhosa para chamar o seu leitor à assuntos que você acredita que merece aquele olhar diferente. Vários blogs adotam esta técnica pois, além de direcionar o leitor aos melhores posts, também incentiva o leitor a navegar mais no blog. O tutorial de hoje é sobre como fazer estes posts destacados de uma forma fácil (e responsiva!), onde você vai ter total autonomia para selecionar qual post irá para o destaque no topo do blog. E neste tutorial também explicarei várias coisas sobre responsividade e teorias de proporção para deixar tudo lindo em qualquer dispositivo!

O tutorial é grandinho, mas garanto que vale muito a pena!

Visual dos posts em destaque que será ensinado neste tutorial

Visual dos posts em destaque que será ensinado neste tutorial // Fonte das imagens: 001, 002, 003, 004

Introdução

Antes de mais nada, é bom saber o que você está lidando por aqui. O CSS é responsivo, ou seja, ele vai mudar de acordo com a largura do dispositivo para adequar. Na medida que ele for diminuindo, o número de posts também diminui, e os recursos de mouseover são eliminados, já que no celular não temos um pouse para pousar em cima do elemento, mas sim um dedo que obrigatoriamente deverá dar um “tap” — um clique — para que a ação aconteça. Além disso, vamos pensar também que estes são uma espécie de lista, onde cada um é um item de lista. Veja abaixo a demonstração que fiz para você visualizar, bem como é a estrutura do html abaixo:

Ver Demonstração

<div class="wrap-posts-destaque">
	<div class="posts-destaque">
		<ul>
			<li>
				<div class="mostra-post">
					<div class="thumb"><img src="http://imagem-thumbnail.jpg" alt=""></div>
					<a href="http://link">
						<h4>Titulo post <span>Data</span></h4>
					</a>
				</div>
			</li>
		</ul>
	</div>
</div>

O código PHP do posts em destaque pode ser personalizado em duas formas:

  1. Por seleção do último post de uma ou várias categorias específicas;
  2. Por posts que receberam mais visualizações.

O código para estes tipos de posts no WordPress é chamado de loop. Isso significa que este recebe uma atualização constante e sempre de forma repetitiva, como na área de posts nativa em que aparece nossas postagens do blog. O que vamos fazer em nosso tema é fazer uma nova chamada de loop para personalizar e realizar uma tarefa específica. O loop que usaremos no tutorial de hoje é o primeiro item da lista: seleção do último post de uma ou várias categorias específicas.

Os códigos podem parecer um pouco complicados, mas prometo que o deixarei o mais explicadinho possível para não houver confusão hehe. Vamos botar a mão na massa agora?

1. O CSS

Já que possuímos uma estrutura HTML predefinida, é hora de aplicar o CSS para estiliza-lo para fazer os efeitos que queremos. O código é grandinho porque eu deixei bem destrinchado (então, não me mate, please, haha) >u< Garanto que cada detalhe está sendo explicado no código, hehe. Melhor explicar do que entregar o código e pronto, néah? Entendendo o código você poderá edita-lo da forma que preferir! Te garanto que terá menos dúvidas, mas caso tenha é só dizer, ok? Segue abaixo todo o código de CSS: [code]/* ***************************************** * POSTS DESTACADOS * madlyluv.com para coisasdeblogueiras.com.br * *************************************** */ /*div que engloba a lista de posts*/ .wrap-posts-destaque { max-width: 1000px; /*largura máxima definida (aplique aqui a largura que seu blog possui)*/ width: 100%; /*o que deteca largura dos despositivos menores que 1000px*/ margin: 20px auto; /*margens 20px para cima e para baixo, onde o "auto" realiza a centralização*/ } /*definindo a div*/ .posts-destaque { width: 100%; height: auto; position: relative; margin: 0 auto } /*zerando definições padrões da lista de posts*/ .posts-destaque ul { width: 100%; margin: 0; padding: 0; list-style: none; } /* clearfix - evitar que a lista ou itens fora dela flutuem ou se sobrepõem */ .posts-destaque ul:before, .posts-destaque ul:after {display: table; content: " ";} .posts-destaque ul:after {clear: both;} /*estilizando o item da lista por porcentagem*/ .posts-destaque ul li { width: 25%; float: left; margin: 0; padding: 0; } /*div que mostra o post*/ .posts-destaque ul li .mostra-post { width: 100%; height: 0; /*sempre mantenha altura zerada*/ margin: 0 auto; padding-bottom: 65%; /*o padding-bottom que definirá altura, e isso faz com que o retângulo seja sempre porporcional*/ background: #fff; overflow: hidden; position: relative; display: block; } /*definindo posicao do thumbnail*/ .posts-destaque ul li .mostra-post .thumb { position: absolute; top: 0; left: 0 } /*atribuindo valores à imagem*/ .posts-destaque ul li .mostra-post .thumb img { width: 100%; height: auto; margin: 0; display: block; -webkit-transition: all 0.3s ease; /*faz a animação*/ -moz-transition: all 0.3s ease; transition: all 0.3s ease; opacity: .87; /*opacidade inicial*/ filter: alpha(opacity=87); /*opacidade inicial*/ } /*definindo posicao de link (sempre na largura e altura do retangulo)*/ .posts-destaque ul li .mostra-post a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } /*definindo posicao do titulo do post*/ .posts-destaque ul li .mostra-post a h4 { font-size: 18px; line-height: 14px; color: #000; text-align: center; font-style: normal; font-weight: bold; width: 100%; text-shadow: 1px 1px 2px #fff; margin: 0; vertical-align: middle; position: absolute; top: -35%; /*com top negativo o titulo fica oculto*/ -webkit-transition: all 0.3s ease; /*faz a animação*/ -moz-transition: all 0.3s ease; transition: all 0.3s ease; } /*definindo posicao da data */ .posts-destaque ul li .mostra-post a h4 span { font-size: 10px; color: #666; font-style: italic; display: block; margin-top: 5px; font-weight: normal; text-align: center; } /*tracinhos ao lado da data*/ .posts-destaque ul li .mostra-post a h4 span:before, .posts-destaque ul li .mostra-post a h4 span:after { content: "-"; padding: 0 5px; } /*NO HOVER DO <LI>, o thumb aumenta a opacidade*/ .posts-destaque ul li:hover .mostra-post .thumb img { opacity: 0.2; /*opacidade final*/ filter: alpha(opacity=20); /*opacidade final*/ } /*NO HOVER DO <LI>, o titulo do post aparece*/ .posts-destaque ul li:hover .mostra-post a h4 { top: 35%; } /* * AREA RESPONSIVA DO POST EM DESTAQUE */ /*para dispositos com largura máxima de 620px*/ @media (max-width:620px) { /*em vez de 4, transforma-se em 3 itens =>> 100% / 3 = 33.33% */ .posts-destaque ul li { width: 33.33%; } /*tirando efeitos de hover e animação e aparecendo titulo desde o inicio*/ .posts-destaque ul li .mostra-post .thumb img { opacity: 0.2; filter: alpha(opacity=20); } .posts-destaque ul li .mostra-post a h4 { top: 35%; } /*ultimo post é oculto*/ .posts-destaque ul li:nth-of-type(4) { display: none; } } /*para dispositos com largura máxima de 420px*/ @media (max-width:420px) { .posts-destaque ul li { width: 33.33%; } /*ultimo post adicionado (que aparece em primeiro da lista), é destacado como principal*/ .posts-destaque ul li:nth-of-type(1) { width: 100%; } /*dois outros posts ficam abaixo do primeiro da lista */ .posts-destaque ul li:nth-of-type(2), .posts-destaque ul li:nth-of-type(3) { width: 50%; } .posts-destaque ul li:nth-of-type(4) { display: none; } }[/code] Salve este arquivo da folha de estilo de seu layout, que normalmente é style.css.

Trabalhando com responsivo

Quando trabalhamos com itens responsivos, tudo é tratado com porcentagem — então não podemos fugir da matemática básica e regrinha de 3 que vimos na escola. Imagina a largura de seu blog, que é a soma de uma extremidade do post até a outra ponta da sidebar, seja 100% (mesmo sendo numa largura de 980px num blog não responsivo, por exemplo). Imaginou? Agora, vamos imaginar que queremos 4 posts em destaque que irão ocupar acima da área de posts do blog e também a sidebar. Desta forma, vamos então dividir o 100% por 4, e isso resulta 25%. Por isso que no item de lista <li> assume esta configuração:

/*estilizando o item da lista por porcentagem*/
.posts-destaque ul li {
	width: 25%;
	float: left;
	margin: 0;
	padding: 0;
}

Mantendo a proporção dos retângulos

É muito difícil manter a proporcionalidade de um item que não seja um quadrado ou um círculo nos itens responsivos quando se trata do CSS. A propriedade height é muito relativa ao conteúdo da div que ela está englobando ao invés de se ligar à largura do mesmo, e para nos livrarmos disso de uma vez por todas zeramos a altura. Com a altura zerada, utilizamos a propriedade padding-bottom (que é margem interna, o espaço entre o conteúdo e a borda de uma div), pois esta propriedade consegue captar a largura de nosso div. WHAT? Não entendi, Ana!!! Me dê um exemplo!

Vamos supor que queremos um retângulo, do qual sua altura gostaríamos que seja exatamente metade do valor de eu comprimento (largura). Como fazemos isso no CSS? Simples: qual é metade de 100? 50, certo? Então seu padding-bottom é igual a 50%! É mais ou menos o que aconteceu com nosso caso do formato de nossos thumbnails. Eu coloquei padding-bottom: 65%; para seguir o formato de uma foto em paisagem. Veja só:

/*div que mostra o post*/
.posts-destaque ul li .mostra-post {
	width: 100%;
	height: 0; /*sempre mantenha altura zerada*/
	margin: 0 auto;
	padding-bottom: 65%; /*o padding-bottom que definirá altura, e isso faz com que o retângulo seja sempre porporcional*/
	background: #fff;
	overflow: hidden;
	position: relative;
	display: block;
}

Como saberei qual será a proporção em outros casos, Ana? Você poderá fazer pela regrinha de 3 mesmo, na qual a proporção de comprimento em pixels da foto é igual 100%, onde a altura em pixels será igual a x. Mas há uma forma menos chatinha de conta, haha. Como dentro da div da foto sempre colocamos que a imagem se ajusta 100% à largura da div, nós veremos o local exato onde a foto termina. E, com o inspetor de código do Chrome ou do Firefox (ambos navegadores já vem com seus inspetores, então é só ativar com botão direito do mouse clicando em “Inspect Element”), podemos fazer a edição temporária do CSS para ele se ajustar ao tamanho que queremos. Foi testando pelo inspetor de código que julguei que minha melhor altura seria em 65%!

Exemplo de inspeção de código pelo Chrome.

Exemplo de inspeção de código pelo Chrome. Obs: Vale lembrar que o inspetor não salva a edição do CSS em nenhum lugar, pois ele é só para testes. Depois que atualiza a página tudo volta ao normal.

E veja abaixo um exemplo de como seria se nossa largura com um padding-bottom: 100%;. Note que eu coloquei uma cor cinza de fundo e na div da primeira foto eu coloquei uma borda preta para visualizar os limites entre topo e rodapé da mesma.

Percebeu que a div de cada foto formaria um quadrado? Graças ao inspetor do navegador sabemos qual é a proporção certa! :D

Percebeu que a div de cada foto formaria um quadrado? Isso porque tanto a largura, como altura correspondem a 100%! Graças ao inspetor do navegador sabemos qual é a proporção certa! 😀

Seu blog não é responsivo? Não se preocupe!

É só você substituir as linhas 8 e 9 do código do CSS (onde define largura máxima) e coloque apenas a largura exata em pixels de seu layout do blog — e também pode apagar toda a área responsiva, a partir da linha 124. Os demais itens funcionam normalmente, inclusive os itens em porcentagem podem continuar pois serão relativos à largura que você for definir em .wrap-posts-destaque.


2. O código PHP dos posts

Mas antes de mais nada, é necessário fazer a pergunta: seu template tem suporte às imagens destacadas? Se sim, você já pode ir diretamente ao códigos dos posts no passo seguinte. Se não, é só abrir o seu functions.php e adicionar a seguinte linha abaixo para habilitar:

// thumbnails no tema
add_theme_support( 'post-thumbnails' );

Ter um suporte para thumbnails é muito importante, pois toda vez que fazemos um post, devemos cadastrar uma imagem destacada para ele. E esta mesma pode ser usada para posts relacionados, destacados, bem como compartilhamento nas redes sociais.

Feito isso vamos aonde começa a mágica dos posts, haha. Tal código abaixo deve ser colocado acima dos posts e da sidebar, e normalmente nos templates wordpress o arquivo que devemos colocar as coisas acima das colunas é em header.php.

<div class="wrap-posts-destaque">
	<div class="posts-destaque">
		<ul>
			<?php $postsdestacados = get_posts('cat=3&numberposts=4&offset=0');foreach($postsdestacados as $post) : setup_postdata($post);?>
				<li>
					<div class="mostra-post">
						<div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div>
						<a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a>
					</div>
				</li>
			<?php endforeach; ?>
		</ul>
	</div>
</div>

O código acima fará o resgate dos 4 últimos posts da categoria de ID 3, mostrada em WP_Query na área cat=3&numberposts=4. Você pode mudar para a categoria que você quiser, ou então criar uma especialmente para os posts destacados — que, particularmente, acho que é bem melhor — pois, quando você postar é só adicionar a categoria que você criou para os destaque!

O código também fará o resgate do thumbnail e coloquei no tamanho medium, que é o tamanho médio da foto destacada, que possui uma largura cerca de 300px (e será adaptada no CSS automaticamente). Caso você queira ter mais liberdade em mexer com os tamanhos do thumbnails e proporções, sugiro que você leia um tutorial que fiz sobre como ter vários tamanhos diferentes de thumbnails.

E caso você queria fazer a chamada dos posts com uma tag, é só trocar o cat para tag. Vale lembrar que, para categorias é necessário colocar o ID (número), e para tags é necessário colocar o slug (nome em letras minusculas).

Descobrindo ID da categoria e Slug da tag

Para descobrir uma ID de uma categoria, vá no painel de controle em Posts > Categorias e clique na categoria que você quer. Vai aparecer a página de edição da categoria, e na URL dela, vai aparecer a id da categoria. Veja abaixo:

Pegando a ID de uma categoria no WordPress.

Pegando a ID de uma categoria no WordPress.

Percebeu acima a parte da url selecionada? Onde há ID=5, significa que minha categoria possui o ID 5. Agora, nas tags, para saber o slug é só fazer o mesmo procedimento das categorias, só que em vez de ver o ID na url, você vê na área Slug, logo abaixo do nome.

Pegar slug de uma tag no WordPress

Pegar slug de uma tag no WordPress

Como destacar os últimos posts de minhas categorias preferidas?

Simples. Percebeu que no código original fizemos um loop de categoria, e por isso colocamos apenas um item de lista? Desta vez você irá utilizar 4 loops, sendo que cada um terá a sua própria lista, bem como o número de posts será limitado apenas 1. Veja como que ficará:

<div class="wrap-posts-destaque">
	<div class="posts-destaque">
		<ul>
			<?php $destaquecategoriaum = get_posts('cat=1&numberposts=1&offset=0');foreach($destaquecategoriaum as $post) : setup_postdata($post);?>
				<li>
					<div class="mostra-post">
						<div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div>
						<a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a>
					</div>
				</li>
			<?php endforeach; ?>



			<?php $destaquecategoriadois = get_posts('cat=2&numberposts=1&offset=0');foreach($destaquecategoriadois as $post) : setup_postdata($post);?>
				<li>
					<div class="mostra-post">
						<div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div>
						<a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a>
					</div>
				</li>
			<?php endforeach; ?>



			<?php $destaquecategoriatres = get_posts('cat=3&numberposts=1&offset=0');foreach($destaquecategoriatres as $post) : setup_postdata($post);?>
				<li>
					<div class="mostra-post">
						<div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div>
						<a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a>
					</div>
				</li>
			<?php endforeach; ?>



			<?php $destaquecategoriaquatro = get_posts('cat=4&numberposts=1&offset=0');foreach($destaquecategoriaquatro as $post) : setup_postdata($post);?>
				<li>
					<div class="mostra-post">
						<div class="thumb"><?php if (has_post_thumbnail()) { the_post_thumbnail( 'medium' ); } else { echo '<img src="http://imagem-padrao.jpg" />';}?></div>
						<a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?><span>Em <?php the_time('d') ?>.<?php the_time('m') ?>.<?php the_time('Y') ?></span></h4></a>
					</div>
				</li>
			<?php endforeach; ?>
		</ul>
	</div>
</div>

Eu defini um loop para cada categoria, então criei o $destaquecategoriaum, $destaquecategoriadois, $destaquecategoriatres e $destaquecategoriaquatro. Nenhum loop pode conter código repetido para não entrar em conflito, e o nome do loop não pode ter nome com caracteres diferentes como espaços, números, acentos ou tracinhos. Sempre tem que ser tudo junto e com letra minúscula para evitar qualquer tipo de erro. 😉


Ver Demonstração Download dos códigos

Ufa! Finalmente terminado, haha. Mas fala que não vale a pena? Me conta se usar este tutorial! Seria um prazer ver ele instalado no seu bloguitcho e ver que você aprendeu *u* E tem alguma dúvida? É só dizer!



  • Luanna

    Em 18.03.2015

    Aninha, socorro!! Tá aparecendo 5 posts da categoria que coloco lá. Exemplo: A primeira é fotografia, então aparece os 5 últimos posts de fotografia e assim acontece com todos os outros. Mas de resto tá tudo bonitinho, responsivo ok e tal. Muuuito obrigada por esse tutorial.
    Beijão ♥
    (E desculpe se tá acontecendo isso porque deixei de ler algo, mas li umas três vezes antes de comentar ><)

    Responder

  • Ana Flávia Cador

    março 18th, 2015

    @Luanna, qual estilo que você colocou? Foi aquele de uma categoria só ou de várias categorias? O restante que você diz é os posts normais do blog?

    Responder

  • Camila Martins

    Em 18.03.2015

    Ai, chessus! *o*
    To esperando essa belezura de post desde aquele dia que vc falou! No fim de semana vou colocar em prática e conto tudo! Tomara que eu consiga! hauaahahu
    Mas está explicadinho e tudo perfeitamente organizado, então aposto que conseguirei.
    Obrigada, Aninha! Você é DIVA! <3 <3 <3

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Camila, conta mesmo! Qualquer dúvida é só falar por aqui *-*

    Beijocas e boa sorte!

    Responder

  • Camila Martins

    março 28th, 2015

    @Ana Flávia Cador, Conseguiiiiiii o/ 😀 😀 😀
    Obrigada, Aninha, pelo tuto maravilindo! *-*
    Apanhei um pouco pois só queria 3 posts destacados e estava ficando um espaço enorme entre eles que não conseguia identificar, mas aí prestei mais atenção e descobri que era o tamanho da thumbnail que precisava aumentar… aí botei o “Large” lá e deu td certo! 😀
    Tô tãão feliz! Minha gambiarra até enganava na resolução grande, mas em tablet e principalmente celular, havia um espaço enoooorme entre as imagens destacadas e o inicio do primeiro post. Agora ficou td perfeito! 😀

  • Camila Martins

    março 29th, 2015

    @Ana Flávia Cador, Acabei esquecendo de falar, por causa da empolgação! hauahauh
    Quando coloquei o meu no header.php não deu certo e não apareceu (aí não sei se coloquei no lugar errado – embora eu tenha tentado colocar em todos os lugares – ou se ele demora para atualizar – igual o style.css) aí eu coloquei no cabecalho.php e deu td certo! 😀

  • Ana Flávia Cador

    março 31st, 2015

    @Camila Martins, ficou maravilhoso seus posts destacados!! *O* Adorei!

    Responder

  • Amanda Almeida

    Em 18.03.2015

    Ana você é uma linda *-*
    Estou atrás de um tuto assim há tempos e nunca encontro. Com certeza vou testar esse tuto. Obrigada.
    Abraços,
    Amanda

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Amanda, que bom que gostou! Depois me conta se deu tudo certo *-*

    Beijocas!

    Responder

  • Rafaella Ribeiro

    Em 18.03.2015

    SOMENTE APLAUSOS,
    APLAUSOS,
    APLAUSOS
    E MAIS APLAUSOS!!!!!!!

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Rafaella AEE!!11 o/

    Responder

  • Nayara Cristina

    Em 18.03.2015

    Adorei! 🙂
    Mas esse tutorial é só pra wordpress?

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Nayara, como foi dito no post, sim. Estamos vendo se é possível também fazer este tipo de post para blogger, mas caso você tenha conhecimento dos códigos ovcê pode pegar o mesmo CSS e o código html (que mostrei beeem no comecinho do post como exemplo de estrutura) e aplicar no blogger 🙂

    Responder

  • Douglas Vasquez

    Em 18.03.2015

    Loop deu na minha cabeça com tanta informação!
    Tá tudo muito bem explicadinho, mas eu sou uma negação com códigos!
    Vou tentar fazer alguma mágica por aqui! obrigado pelo tuto ♥

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Douglas, tenha calma que tudo vai dar certo. ^^ Qualquer dúvida é só dizer por aqui!
    Beijos e boa sorte!

    Responder

  • Alice Saraiva

    Em 18.03.2015

    Adoreeeeeeeeeeeeeeeei, Flavia!! Tava mesmo super afim de colocar este recurso no blog.
    Obrigada pelo tutorial maravilhoso!
    Um beijo!
    Alice

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Alice, depois me conta se gostou! *-*
    Beijocas e boa sorte!

    Responder

  • Marta

    Em 18.03.2015

    OMG!
    Era tudo que eu estava procurando! Vou colocar a mão na massa esse final de semana! Depois conto no que deu! Mais já agradeço!!!!! Vi o seu trabalho no blog da Fran, e achei o máximo! Super programadora.

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Marta, aaai que legal! Imagina, eu que agradeço! *-*
    Beijão!

    Responder

  • Marta

    Em 18.03.2015

    AÊÊÊ!!!!!! Eu fiz, segui o tutorial, no entanto, tive que adaptar. Invés de colocar no head.php, tive que colocar no index.php!
    Quebrei a cabeça, mas achei o local exato!
    Muito obrigada!

    Responder

  • Ana Flávia Cador

    março 21st, 2015

    @Marta, sim, o local dependerá de cada template, hehe. Fico super feliz que tenha dado certo! Vi ele no seu blog e ficou show! *-*
    Beijão e volte sempre!

    Responder

  • Stephanie

    Em 18.03.2015

    Nossa, estou chocada!!! Estava querendo colocar algo assim no blog mas não tinha idéia de como fazer. Tentei vários plugins mas nenhum ficava como eu queria. Esse tutorial caiu como uma luva. Amei!!!

    Responder

  • Ana Flávia Cador

    maio 3rd, 2015

    @Stephanie, que bom que gostou! Use e abuse dele! Depois conta como foi sua experiência 😀

    Responder

  • Vanessa

    Em 18.03.2015

    Oi Ana!!! Adorei o post! Segui o passo a passo, copiei os códigos e adicionei no style e no header, mas as imagens ficaram uma abaixo da outra, não ao lado. Sabes o que pode ter acontecido? Obrigada.
    http://www.refarq.com/

    Responder

  • Gyy Gomez

    Em 18.03.2015

    Tem algum para o sistema do blogger?

    Responder

  • La

    Em 18.03.2015

    Oi, faz um assim mas para blogger, please!!!! preciso urgente, não acho nem um tutu ensinando a fazer assim que nem esse mas para blogger, ou teria o link de outro blog ensinando a fazer assim mas pra blogger, flores ? bjxx

    Responder

  • Mariana Maia

    Em 18.03.2015

    Oi, Aninha! Segui o tutorial direitinho, mas não aparece de jeito nenhum. Já tentei colocar o código em index.php tbm, como já falaram aqui e não aparece. 🙁
    Ps. Utilizo o seu tema.

    Responder

  • Ohara

    Em 18.03.2015

    Adorei esse tutorial, de verdade, sério haha.

    Responder

  • Camile Carvalho

    Em 18.03.2015

    Aninha, muito obrigada por este tutorial! Super explicadinho! Tive um pequeno problema apenas com os marcadores. Quando foi pra anulá-los, eles continuaram aparecendo a bolinha, então tive que colocar ul li: none e então deu tudo certo.

    Fiz o destaque com a tag, assim posso misturar várias categorias no topo e apenas adiciono a tag “destaque” quando quero que vá lá pra cima. Se quiser, dê uma olhada como ficou. http://www.camilecarvalho.com

    Obrigada <3

    Responder

  • steh

    Em 18.03.2015

    que lindoo <3 tava querendo isso há tempos! Só um help, coloquei no meu só que dependendo do tamanho da janela fica um espaço branco entre as fotos, tem como arrumar isso?

    Responder

  • Amanda Léllis

    Em 18.03.2015

    Ah.. Eu amei tudo, lindo demais! Tentei fazer tudo certinho, mas não aparece nada. Editei e colei o CSS na página Style.CSS. E o outro código na Header.php sem alterações. No index não colei, por que não sabia onde colar… Não entendo nada de códigos, se você puder me ajudar, agradeço muito. Beijinhos

    Responder

  • Nathália

    Em 18.03.2015

    Ana, me ajuda? eu estou usando uma base sua, e fiz o tutorial, porém ficou tudo desalinhado e os efeitos hover nao funcionaram, o que faco?

    Responder

  • Nicolle Por Deus

    Em 18.03.2015

    Achei linda a sua iniciativa de vir nos ensinar isso :~~

    Eu, por um lado, fiquei triste. Não entendo nada de HTML/CSS. Nada mesmo. Por mais que eu leia o tutorial (e acredite, eu já li várias), não entendo o que tá aí e ainda assim tentei executar de alguma forma. Não deu certo. A coluna onde fica a parte do perfil, fanpage, instagram, etc sumiu todas as vezes e até a cor do background mudou. Não rolou ):

    Responder

  • Nicolle Por Deus

    março 25th, 2016

    Eu não consegui colocar, mas a minha amiga sim :3 Obrigada pelo tutorial, Aninha!

    Responder

  • Barbara

    Em 18.03.2015

    Não funcionou :/ vou revisar tudo de novo e tentar novamente

    Responder

  • Barbara

    abril 5th, 2016

    @Barbara, fui tirar o código e fazer de novo ai deu erro pior 🙁

    Responder