Posts em Destaque na Página Inicial
Autor: Aurea R C | Publicado: 2015-03-08T21:51:00-03:00


Já pensou em destacar alguns posts que gostaria de ter mais acessos em seu blog?
Com este tutorial &nbsp;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.





  
  Demonstração
  Click aqui


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:

♥Condicionais no Blogger–Parte 01–Ocultando Elementos em Páginas Específicas♥

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:
&lt;b:section class='main' id='main' showaddelement='no'&gt;
E inclua este código abaixo acima desta tag:
&lt;b:if cond='data:blog.pageType != "item"'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;b:section class='main' id='main1' preferred='yes'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/b:section&gt;
&lt;/b:if&gt;

Clique em [Salvar modelo]

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


Observação:
Note que a tag:
&lt;b:if cond='data:blog.pageType != "item"'&gt; &lt;/b:if&gt;
É 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&nbsp;&nbsp;e não se esqueça de fechar com o &lt;/b:if&gt; 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:

&lt;style type="text/css"&gt;
/*--- 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;
&lt;/style&gt;

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

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

Como configurar o Gadget:
♦ Em&nbsp;Link_Post» Coloque o Link do post que deseja destacar.

♦ Em&nbsp;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:&nbsp;http://freshlife-bloggertheme9.blogspot.com.br/