» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Posts em Destaque na Página Inicial

Já pensou em destacar alguns posts que gostaria de ter mais acessos em seu blog?

Com este tutorial  você poderá colocar um Gadget de 3 Posts em Destaque no início do seu blog com um estilo bem legal. Que, inclusive já estou utilizando aqui no TPV.
Antes »»» Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS.
Portanto:
♥ Sempre tente antes num blog de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ LEIA O TUTORIAL ATÉ O FIM E TENHA CERTEZA DE TER ENTENDIDO.


Observações Importantes:

»Para que o Gadget de Posts em Destaque apareça apenas nas páginas inicial, estáticas e de marcadores temos que usar as tags condicionais.
»Aqui no tutorial o gadget estará programado para NÃO aparecer apenas nas páginas dos posts. As demais páginas inicial, estática, de marcadores e de arquivos terão os posts em destaque.
»Caso você queira que este gadget não apareça nestas páginas basta colocar as tags condicionais correspondentes que estão neste post aqui do TPV:

Como colocar o Gadget de Posts em Destaque no Blog


→ Você deve ir em Layout » Clicar em Adicionar um gadget em cima da coluna dos posts.

Já sei!
Você foi em Layout e não tinha opção de Adicionar um Gadget em cima da coluna dos posts né?
Não se preocupe.
Basta criar uma seção para incluir os gadgets em cima da coluna dos posts.
Para isso:

Vá em Modelo » Editar HTML e procure pela tag:
<b:section class='main' id='main' showaddelement='no'>
E inclua este código abaixo acima desta tag:
<b:if cond='data:blog.pageType != "item"'>
        <b:section class='main' id='main1' preferred='yes'>
        </b:section>
</b:if>

Clique em [Salvar modelo]

Assim irá criar uma sessão que irá possibilitar criar gadgets acima dos posts.

Observação:

Note que a tag:
<b:if cond='data:blog.pageType != "item"'> </b:if>
É a condicional que define que o Gadget de Posts em Destaque NÃO apareça apenas nas páginas dos posts quando estão abertos. Se quiser colocar mais condicionais basta colocar a tag correspondente que aprendeu no post sobre condicionais no blogger  e não se esqueça de fechar com o </b:if> no final.


Agora vá em Layout, atualize a página (clique F5)
» Clique em Adicionar um gadget e escolha um gadget tipo HTML




Cole este código abaixo no Gadget tipo HTML e preencha os itens que são pedidos:

<style type="text/css">
/*--- Slides ---- */
.section-title {background: none repeat scroll 0 0 #FFFFFF; float: left; margin: -7px 0 0;}
.heading{border-top: 1px solid #E6E6E6; color: #929292; display: block; font-family: Tahoma,Geneva,sans-serif; font-size: 14px; line-height: 14px; margin: 7px 0 10px; text-transform: uppercase;}
.sect-container{padding:23px 0 6px 12px
}
#slider-cont{padding: 0px 0px 0px 0px;}
.slide-1,.slide-2,.slide-3,.slid-thumb{width:200px;}
.slide-1,.slide-2,.slide-3,.slid-thumb{height:200px; overflow:hidden; position:relative; display: block; -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
.slide-1:hover,.slide-2:hover,.slide-3:hover,.slid-thumb:hover{ opacity:.6;filter:alpha(opacity=60);-moz-opacity:.6;-khtml-opacity:.6}
.top-strip{ background:#111; opacity:0.7; filter:alpha(opacity = 70); color: #929292; display: block; font-family: Tahoma,Geneva,sans-serif; font-size: 11px; left: 0; line-height: 11px; padding: 5px; position: absolute; text-transform: uppercase; top: 10px;}
.slid-cont{position:absolute; bottom:0; left:0; right:0; background:#111; opacity:0.7; filter:alpha(opacity = 70); padding:10px; overflow:hidden; margin-bottom:0px;}
.slid-cont h3{color:#fff; padding:0; margin:0; font-family: Tahoma,Geneva,sans-serif;}
.slid-cont a{color:#fff; line-height:11px; font-size:14px; font-weight:bold;}
.slid-cont a:hover{text-decoration:underline;}
.slide-1{float: left; margin-left:10px;}
.slide-2,.slide-3{float:left; margin-left:10px;
</style>

<div class='sect-container'>
<div class='heading'>
  <span class='section-title'>Posts em Destaque</span>
</div>
</div>
<div style='clear: both;'></div>
<div id='slider-cont'>
<!-- Slide 1 image here -->
<li class='slide-1'>
<a href='Link_Post'>
<img class='slid-thumb' src='Link_Imagem' title='Titulo_do_Post' style='width:200px;height:200px;'/>
</a>
<span class='top-strip'>Destaque1</span>
<h3 class="slid-cont"><a href="Link_Post">Título_do_Post_1</a>
</h3>
</li>  
  
  <!-- Slide 2 image here -->
<li class='slide-2'>
<a href='Link_Post'>
<img class='slid-thumb' src='Link_Imagem' title='Titulo_do_Post' style='width:200px;height:200px;'/>
</a>
<span class='top-strip'>Destaque2</span>  
<h3 class="slid-cont"><a href="Link_Post">Título_do_Post_2</a>
</h3>
</li>

<!-- Slide 3 image here -->
<li class='slide-3'>
<a href='Link_Post'>
<img class='slid-thumb' src='Link_Imagem' title='Titulo_do_Post' style='width:200px;height:200px;'/>
</a>
<span class='top-strip'>Destaque3</span>
<h3 class="slid-cont"><a href="Link_Post">Título_do_Post_3</a>
</h3>
</li>
</div>

Como configurar o Gadget:

♦ Em Link_Post» Coloque o Link do post que deseja destacar.

♦ Em Link_Imagem» Coloque uma imagem que represente o post.

♦ Em Titulo_do_Post» Você vai repetir o Título do Post neste local para quando passarmos o mouse em cima da imagem o título irá aparecer graças ao recurso Tooltip.

Dica para Você

♥ Uma dica que utilizei no Farmacêutico Digital foi destacar 3 marcadores que considero importantes no blog. Coloquei o Título dos marcadores onde se escreve Destaque1, 2 e 3 e onde seria o título dos posts (Título_do_Post_1) coloquei uma frase sobre o marcador correspondente..

Fonte:
Template: http://freshlife-bloggertheme9.blogspot.com.br/
Posts em Destaque na Página Inicial Posts em Destaque na Página Inicial Reviewed by Aurea R C on 3/08/2015 Rating: 5

7 comentários:

  1. Tem tanto tempo que nao mexo no meu blog que fico com medo de fazer besteira.

    ResponderExcluir
  2. alguem air pra me dar uma ajuda pra eu configurar sertinho meu blog

    ResponderExcluir
  3. Suas dicas são valiosas, os tutoriais muito bem explicados e os templates, cada um mais lindo e original que o outro! Adoro estar aqui, aprendendo tudo! Obrigada!

    ResponderExcluir
  4. aí, como poderei inserir mais gadgets desse jeito, mas com imagens reduzidas?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.