Dicas Blogger: Hacks

Home » Categories: Hacks

Mostrando postagens com marcador Hacks. Mostrar todas as postagens

Como inserir, editar e excluir marcadores no Blogger

O marcador ou etiqueta, que em inglês é nomeado como label, funciona como uma classificação de assuntos nos artigos do blog. Assim, por mais específico que um blog seja, sempre será possível tratar de determinadas áreas com mais atenção. É por isso que os marcadores são itens muitos importantes na estrutura de um blog, já que ajudam o leitor a identificar facilmente o assunto que mais tem interesse de conhecer. Neste artigo, o<a href="http://www.dicasblogger.com.br/" target="_blank"> Dicas Blogger</a> irá ensinar como inserir, editar e excluir os marcadores, tanto para um quanto para vários posts ao mesmo tempo.<div>
<br /></div>
<h3>
<span style="color: red;">Como inserir marcadores</span></h3>
<div>
Existem duas maneiras de inserir um marcador.</div>
<div>
1) Você poderá adicioná-lo diretamente na postagem, no <b>editor de textos do Blogger</b>: Acesse: Nova postagem > Marcadores > <b>digite o nome do marcador</b> ou <b>clique em uma das opções</b> que aparecerem. Em seguida, clique em concluído.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvdmSFK1JXAFh2Mx7xy5i_j8zRjtM9ID8YPWeE04MXcA0q5Y3NKkFTchV-siNkFC8qjjV6hPHaSgkf0WRu5jynfrbsWbaxmiE7p2r_ONs7vWDOTInArIYR-LcMY-3SzO5oi6VWirAljJG/s1600/Editar+marcadores+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvdmSFK1JXAFh2Mx7xy5i_j8zRjtM9ID8YPWeE04MXcA0q5Y3NKkFTchV-siNkFC8qjjV6hPHaSgkf0WRu5jynfrbsWbaxmiE7p2r_ONs7vWDOTInArIYR-LcMY-3SzO5oi6VWirAljJG/s1600/Editar+marcadores+blogger.jpg" /></a></div>
<div>
<br /></div>
<div>
2) Na área geral de postagens, selecione os artigos, clique em <b>novo marcador</b>, digite o nome na janela que irá abrir e clique em ok. Assim, o marcador será adicionado às postagens selecionadas ao mesmo tempo, sem a necessidade de configurar um a um.</div>
<div>
<br /></div>
<h3>
<span style="color: red;">Como excluir marcadores</span></h3>
<div>
<span style="color: red;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBbL5lmRwxhKUC3RVRhd_lsrtzkeh3sBcJjH4wTjrZXKxd0Mw9ge8rysvWayDeqAT3ezyqIgG0mdldL0qTyQpE-VONwpa7iZYOGyuhpwkQFKLvp29DImB0KieSkSV9ujtQsrxVmlRY0M8/s1600/Editar+marcadores+blogger+excluir.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBbL5lmRwxhKUC3RVRhd_lsrtzkeh3sBcJjH4wTjrZXKxd0Mw9ge8rysvWayDeqAT3ezyqIgG0mdldL0qTyQpE-VONwpa7iZYOGyuhpwkQFKLvp29DImB0KieSkSV9ujtQsrxVmlRY0M8/s1600/Editar+marcadores+blogger+excluir.jpg" /></a></div>
<div>
<br /></div>
<div>
Na área de geral de postagens, clique em <b>todos os marcadores</b>, no canto direito da tela. Em seguida, clique sobre o marcador que deseja excluir (Exemplo: arroz). Ele listará todas as postagens que possuem o marcador, em seguida, selecione as postagens (algumas ou todas, conforme preferir) e clique no ícone do marcador para que todos sejam listados. Agora, é só clicar novamente sobre o marcador que deseja excluir (Exemplo: arroz) e pronto. Observe que, rapidamente, aparecerá a mensagem: O marcador arroz foi removido das 2 postagens selecionadas.</div>
<div>
<div>
<br /></div>
<h3>
<span style="color: red;">Como editar os marcadores</span></h3>
<div>
<br /></div>
<div>
Digamos que você <b>escreveu o nome do marcador errado</b> e quer corrigir. Bom, não tem como editar diretamente o marcador. Para corrigir, será necessário inserir um novo marcador (com a palavra correta) e excluir o que está com problema.</div>
<div>
<br /></div>
<div>
Ou então, digamos que alguns marcadores não sejam mais atrativos e precisem ser substituídos. É muito comum, alguns blogs, no início da jornada, criarem um monte de etiquetas. Com o tempo, é necessário fazer uma limpezinha, inserindo novos e excluindo os que não são mais relevantes. Então, qual é o passo a passo para fazer isso? Siga as duas primeiras dicas, sempre inserindo o novo antes de excluir o antigo.</div>
<div>
<br /></div>
<div>
Para evitar algum erro durante a edição, opte sempre em inserir o novo marcador primeiro. Além disso, escolha artigos com poucos marcadores, para testar e ver como fica.</div>
<div>
<br /></div>
<div>
E atenção galera! Pelo amor de Deus, <b>não cliquem na lixeirinha</b>, por que assim vocês iram excluir os posts e não tem como corrigir isso. Só <a href="http://www.dicasblogger.com.br/2012/05/como-fazer-backup-no-novo-blogger.html" target="_blank">um backup atualizado pra salvar</a>.</div>
<div>
<br /></div>
<h3>
<b><span style="color: red;">Como instalar o gadget marcadores</span></b></h3>
<div>
<b><span style="color: red;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7MWH2exh1_apnJ_4oxq7SjuTg5hTJ0O7drZqhq-PP3nH_wjkvP0qEbhlFEZzyljHWQQVIgBLyCoRbyJuQypX7SNLPQHahOyO2R_19HA5Nb6ujTlzBTR2p8zqYYbkyoXkqrnPIJBOOZm5/s1600/novoblogger-adicionargadget.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7MWH2exh1_apnJ_4oxq7SjuTg5hTJ0O7drZqhq-PP3nH_wjkvP0qEbhlFEZzyljHWQQVIgBLyCoRbyJuQypX7SNLPQHahOyO2R_19HA5Nb6ujTlzBTR2p8zqYYbkyoXkqrnPIJBOOZm5/s320/novoblogger-adicionargadget.png" width="320" /></a></div>
<div>
<div>
Na aba <a href="http://www.dicasblogger.com.br/2012/05/como-mudar-o-layout-no-novo-blogger.html" target="_blank"><b>Layout</b>, clique em <b>adicionar gadget</b></a>. Escolha a opção marcadores e selecione as configurações de acordo com a sua preferência. Por exemplo, você poderá:</div>
</div>
<div>
<br /></div>
<div>
<ul>
<li>Mostrar todos ou selecionar alguns marcadores;</li>
<li>Listá-los em ordem alfabética ou por frequência;</li>
<li>Exibir em lista ou em modo cloud;</li>
<li>Além de poder mostrar o número de postagens por marcador. </li>
</ul>
</div>
<div>
<br /></div>
<div>
Após selecionar as configurações, clique em salvar.</div>
</div>
<div>
<br /></div>
<div>
É isso aí galera! Não quero ver mais ninguém com dificuldade para inserir ou excluir marcadores ;)</div>

Como inserir, editar e excluir marcadores no Blogger

O marcador ou etiqueta, que em inglês é nomeado como label, funciona como uma classificação de assuntos nos artigos do blog. Assim, por mais...

Continue Lendo >>

17:42

Como colocar descrição dos autores no final dos posts do Blogger

Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recente template do Dicas Blogger. Vou tentar explicar, mas já adianto que o procedimento não é muito simples, sendo necessário ter conhecimentos em CSS.<br />
<br />
Na imagem abaixo, vemos a minha descrição em um post recente: <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9xSuUapPOj-x2gOgzRMUwJt-w7MYcHq-N7T7vsDvqiTgrh3tlatGDiEEhzgdAw9G9nJNb2_djfClqF4OPUW-IyWr9Szs3PW5RvJUe-5OVKdFhghy6EjLYB1mD9bmq4VttaIB3jaz0PWM/s1600/autor.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9xSuUapPOj-x2gOgzRMUwJt-w7MYcHq-N7T7vsDvqiTgrh3tlatGDiEEhzgdAw9G9nJNb2_djfClqF4OPUW-IyWr9Szs3PW5RvJUe-5OVKdFhghy6EjLYB1mD9bmq4VttaIB3jaz0PWM/s1600/autor.png" title=" " /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Descrição do autor</b></td></tr>
</tbody></table>
Vou ensinar um modelo um pouco diferente do que estamos usando aqui. Vamos lá?<br />
<br />
<span style="color: orange;"><span style="font-size: large;"><b>Etapa 1:</b></span></span><br />
Entre no HTML do template, clique em "expandir modelos de widgets" e cole o código abaixo <b><span style="color: red;">ANTES </span></b> da tag <b> ]]></b:skin></b><br />
<br />
**Para encontrar a tag, dê um Crtl+F com seu teclado e cole<b> <b>]]></b:skin></b></b><br />
<br />
**Para entrar no HTML, veja este post - <a href="http://www.dicasblogger.com.br/2012/10/como-editar-html-na-nova-interface.html" target="_blank">Como editar HTML na nova interface </a><b><b><br /></b></b><br />
<blockquote class="tr_bq">
/* Autores<br />
----------------------------------------------- */<br />
<br />
#post-footer-autor {<br />
width: 100%; <br />
height: 77px; <br />
background: #e6e6e6; <span style="color: red;">/*Cor do plano de fundo*/</span><br />
border: #ccc; <span style="color: red;">/*Cor da borda*/</span><br />
margin: 8px 0px 8px 0px; <br />
font-family: Verdana, Arial, Helvetica, sans-serif; <br />
border: 2px solid #ccc;<span style="color: red;"> /*Espessura da borda*/</span><br />
}<br />
<br />
#autor-img { <br />
width: 64px; <span style="color: red;">/*largura da imagem*/</span><br />
height: 64px; <span style="color: red;">/*altura da imagem*/</span><br />
background: #fff; <span style="color: red;">/*plano de fundo da imagem*/</span><br />
float: left;<br />
margin: 7px; <br />
<br />
} <br />
#autor-sobre { <br />
padding-right: 5px; <br />
margin: 0px;<br />
}<br />
<br />
#autor-sobre p{ <br />
font-size: 14px; <br />
padding: 10px; <br />
margin: 0;<br />
text-align: justify;<br />
text-transform: normal;<br />
color: #333; <span style="color: red;">/*Cor do texto*/</span><br />
}<br />
#autor-sobre a{ <br />
color: #3d85c6; <span style="color: red;">/*Cor dos links*/</span><br />
text-decoration:none; <br />
}<br />
#autor-sobre a:hover { <br />
color: #9A9A9A; <span style="color: red;">/*Cor dos links ao passar o mouse*/</span><br />
text-decoration:underline; <br />
}</blockquote>
Se você tiver conhecimentos em CSS, é possível mudar as cores de plano de fundo, bordas, links e texto, conforme assinalei em vermelho.<br />
<br />
<span style="font-size: large;"><span style="color: orange;"><b>Etapa 2: </b></span></span><br />
<br />
Depois, procure por  <b><div class='post-footer'> </b>e cole <span style="color: red;"><b>ANTES</b></span> dessa tag o seguinte código:<b></b><br />
<blockquote class="tr_bq">
<br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<b:if cond='data:post.author == &quot;<span style="color: magenta;"><b>Nome do autor</b></span>&quot;'><br />
<div id='post-footer-autor'><br />
<div id='autor-img'><br />
<br />
<img src='<span style="color: red;">URL DA IMAGEM</span>' style='border: 0px solid #fab805; padding: 0; margin: 0;'/><br />
</div><br />
<div id='autor-sobre'><br />
<p><br />
<b>Sobre o autor:</b><br />
<span style="color: blue;">Faça uma breve descrição</span>. <a href='<span style="color: #38761d;">link</span>'> <span style="color: orange;">Nome do link</span></a></p><br />
</div><br />
</div><br />
</b:if><br />
</b:if> </blockquote>
Antes de salvar, faça as seguintes alterações: <br />
<ul>
<li>Em  <b>Nome do autor</b>, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.</li>
<li>Em <b>URL da imagem</b>, coloque a url da foto do autor no tamanho 64 x 64. </li>
<li>Em <b>Faça uma breve descrição</b>, escreva algo sobre o autor.</li>
<li>Em <b>link,</b> coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) e em <b>Nome do Link </b>escreva o nome da página que está sendo linkada.</li>
</ul>
<b>Atenção!</b> Se o seu blog tiver mais de 1 autor,  repita a <b>etapa 2</b> para cada um deles.<br />
<br />
Se você não sabe como obter a URL da imagem, leia este post: <a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html" target="_blank">Como hospedar imagens no Picasa</a><br />
<br />
Clique em "visualizar" e se tudo estiver ok, clique em "salvar modelo"<br />
<br />
Vejam o resultado desse código no blog da Priscila:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTi-FEaM9Y14Bjm0yP0C5VwpBS0tZ9XzNByGVXc7SUX9EJUj7-ca-gz8dPn4airZKMU9CGhtCgJ82GEJLQZFnY8w2WPEZgGL_PI_IryAf7eg9a0DEuT9_fgBsdeMr7YuqJCcg_dbkt1iKh/s1600/descri%C3%A7%C3%A3o.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTi-FEaM9Y14Bjm0yP0C5VwpBS0tZ9XzNByGVXc7SUX9EJUj7-ca-gz8dPn4airZKMU9CGhtCgJ82GEJLQZFnY8w2WPEZgGL_PI_IryAf7eg9a0DEuT9_fgBsdeMr7YuqJCcg_dbkt1iKh/s1600/descri%C3%A7%C3%A3o.png" title=" " /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.priscilafago.com/" target="_blank">Blog Priscila Fago</a></td></tr>
</tbody></table>
Como eu disse anteriormente, trata-se de um hack complexo então é preciso bastante atenção. <br />
<br />

Como colocar descrição dos autores no final dos posts do Blogger

Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recen...

Continue Lendo >>

10:30

Personalizando o gadget Postagens Populares

<img align="left" alt="" border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraSCm0LmYF3QL7-AyjxSZNC67A66yZLqn0lQ4b_3Y7Yj7-PE_Q8q1gii0_TK-_qquqtWUFyDHmwhmIvm7GqZaIJupZovSMfw3oAOqHB7sSWItI_unMWWguOP56aYpfibGOkKIHcptEJn2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 7px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="107" />Um dos vários recursos recém lançados pelo Blogger, foi o gadget <strong>Postagens Populares</strong>, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo.   <br />
No post <a href="http://www.dicasblogger.com.br/2010/08/gadget-postagens-populares.html">Novo gadget – Postagens populares,</a> ensinei como colocar o gadget na barra lateral (sidebar) do blog.<br />
O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo:<br />
<img alt="postagens-populares" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8fOYpLy2xyHiWF8PA7CVPJSqdJmF2SEdMxpj5xMCAH5PCefibpe5qQMUxS53ddBG36_qR0b-kutUcFFywntb1Fw2LC7xt3i8JRWonmAc8DF4aWKmG1bwPCGvJzvNGnaegLlck9lmGzRY/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br />
Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  <a href="http://www.mundoblogger.com.br/2010/10/instalar-e-personalizar-o-gadget-de.html">Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger</a> e fiz as alterações necessárias para o meu template.<br />
Acredito que o código deve variar de template para template, mas vamos lá.<br />
Entrem em design>editar HTML. Antes de <strong>]]></b:skin>,</strong> colem o código abaixo:<br />
<blockquote>
#PopularPosts1 li{      <br />padding-left: 15px;       <br />padding-top: 3px;       <br />}</blockquote>
A parte <strong>padding-left,</strong> se refere à distância que deve existir entre a imagem e o texto. Já <strong>padding-top</strong>, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.<br />
<img alt="" border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL-ZrrflYUTy-6QuLGDEJyd7S0GOR0KTK3CuGYIsWHrEhZTWuxChBgYIEJVIAykcazid31_Io1kZu5TjjjXAKwp4TJGcrqT_vpT-X0W3X5IIRMGNS_aEvlEarZ-mhH2E_Ow0a40QV17tHs/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br />
Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:<br />
<blockquote>
#PopularPosts1 li{      <br />padding-left: 15px;       <br />padding-top: 3px;       <br />}       <br />#PopularPosts1 .widget-content{       <br />border: 1px solid #ccc;       <br />background: #efefef;       <br />}</blockquote>
<img alt="" border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UUbe648dqwKOro2-hOTzQP6NGlL-IFeNGVPdoaw9kGuSeNryxZfISJCpSis-YQgnYShud3YtxmPeQIs0ZY3Bv2KRSwehj1ZL7mJlC4UNDoqxw3YxvQyeEJNX98vU4geqTwNJ0J8D-aHy/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br />
Para mudar a cor do resumo dos posts, acrescente este trecho:<br />
<blockquote>
.item-content{      <br />color: #1d85dd;       <br />}</blockquote>
<img alt="" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRd7haDEGllGmiIrLoLMK5BrXtyCm8hyphenhyphenVS6PQBa_2aolHEMbq0ll9pXe0eMI0CAdhSfGrxvZefpC65OR2xCOHp0psu4sC-kavmE1g405pLrDtsBnhBLAtc6YntdeOAz8Tr8d0MiLtWfndS/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br />
Mude as cores a seu gosto. Se não sabe os códigos , acesse uma <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">tabela de cores</a><br />
O CSS final seria este, com as devidas modificações de acordo com cada template:<br />
<blockquote>
#PopularPosts1 li{ /*Estilo para acertar a imagem*/      <br />padding-left: 15px;       <br />padding-top: 3px;       <br />}       <br />#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/       <br />border: 1px solid #ccc;       <br />background: #efefef;       <br />}       <br />.item-content{ /*Estilo para o resumo dos posts*/       <br />color: #1d85dd;       <br />}</blockquote>
<strong>ATUALIZAÇÃO:</strong> Para retirar o ícone que vem antes do texto, substitua:<br />
<blockquote>
#PopularPosts1 li{ /*Estilo para acertar a imagem*/      <br />padding-left: 15px;       <br />padding-top: 3px;       <br />} </blockquote>
por este outro código:<br />
<blockquote>
#PopularPosts1 li{ /*Estilo para retirar o ícone*/      <br />background-image:none;       <br />}</blockquote>
Este post foi criado à pedido de querida leitora <a href="http://amorepazsemfronteiras.blogspot.com/">Lucy – Amor e Paz Sem Fronteiras</a><br />
Créditos de parte do código CSS ao <a href="http://www.mundoblogger.com.br/2010/10/instalar-e-personalizar-o-gadget-de.html">Mundo Blogger</a>, um dos meus blogs favoritos <img alt="Smiley piscando" class="wlEmoticon wlEmoticon-winkingsmile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76R-Sd7CV0d2B3_ZpfHSdWK5TG76kw6DLQkj-2B4GJZ67TWivVQbqxPzjkqO-wEbbmh1Pewd51bV6LZ8pV0tj9sEthkJoqlTBCWHxavBY_9YKaI5fEzVfD4ehinK_C8k0ec1hnPwk5Fxf/?imgmax=800" style="border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none;" />

Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares , que exibe os posts mais acessados, baseando-se no ser...

Continue Lendo >>

11:12

Personalizando os links de navegação do Blogger

<img align="left" alt="image" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnRLkVpVHNbdj9rw0HtOIBrSoaq-IX8GlLRQr3oVh4MEuObJyIGTEdSC4jX4gNLDKnSTnFLo7Gr_sPARhK-Pnj562OVYtYB8yWEzhZWhJ6r3yX_SOoc1OH7miAggHK6ZgNJnqSCDJur3fr/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 6px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="130" />   <br />
Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo.   <br />
<br />
<img alt="blog-pager-blogger" border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoyUHmmdl_c0v-mUPEpkgVzTsRP8GMxohHflBBApTGqXNwFiA1iruil3o3Rbqdg1RK_ExZj9t18bH8ztNb6P0dettdr7z1iVCVG_pAQQs-lHeD1S0ZUcZ1o7bcTYjepHvSYqt0gG0_P3P/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Links de navegação" width="491" />   <br />
Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial.   <br />
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/03/recuperar-links-de-navegacao-do-blogger.html">Como recuperar os links de navegação do Blogger</a> </li>
</ul>
Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação.   <br />
<br />
Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup completo do template</a> ou use um blog de testes.   <br />
<br />
Entre em design>editar HTML, marque a caixa<b> expandir modelos de widgets</b>  e, usando o comando Crtl+F do teclado, procure por:   <br />
<blockquote>
<br />
<b:includable id='nextprev'>     <br />
<div class='blog-pager' id='blog-pager'>     <br />
<b:if cond='data:newerPageUrl'>     <br />
<span id='blog-pager-newer-link'>     <br />
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>     <br />
</span>     <br />
</b:if>     <br />
<b:if cond='data:olderPageUrl'>     <br />
<span id='blog-pager-older-link'>     <br />
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>     <br />
</span>     <br />
</b:if>     <br />
<b:if cond='data:blog.homepageUrl != data:blog.url'>     <br />
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>     <br />
<b:else/>     <br />
<b:if cond='data:newerPageUrl'>     <br />
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>     <br />
</b:if>     <br />
</b:if>     <br />
</div>     <br />
<div class='clear'/>     <br />
</b:includable>     </blockquote>
<br />
Substitua tudo por:   <br />
<blockquote>
<b:includable id='nextprev'>      <br /><div class='blog-pager' id='blog-pager'>       <br /><b:if cond='data:newerPageUrl'>       <br /><span id='blog-pager-newer-link'>       <br /><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a>       <br /></span>       <br /></b:if>       <br /><b:if cond='data:olderPageUrl'>       <br /><span id='blog-pager-older-link'>       <br /><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a>       <br /></span>       <br /></b:if>       <br /></div>       <br /><div class='clear'/>       <br /></b:includable></blockquote>
<br />Salve o template. <br />
Agora iremos aplicar o CSS.  Procure por este trecho:    <br />
<blockquote>
#blog-pager-newer-link {   <br />
float: $startSide;      <br />}       <br />      <br />#blog-pager-older-link {       <br />  float: $endSide;       <br />}       <br />      <br />#blog-pager {       <br />  text-align: center;       <br />}</blockquote>
**Para blogs com template do <strong><span style="color: #ff8000;">Designer do modelo</span></strong>, o trecho é este:<br />
<blockquote>
<br />.blog-pager {  <br />background: $(paging.background);       <br />}<br />
.blog-pager-older-link, .home-link,      <br />.blog-pager-newer-link {       <br />  background-color: $(content.background.color);       <br />  padding: 5px;       <br />}</blockquote>
Substitua tudo por:<br />
<blockquote>
#blog-pager a {      <br />font-family: Arial;       <br />color: #333; <span style="color: red;">/*Cor da letra*/        </span>font-size: 13px; <span style="color: red;">/*tamanho da letra*/</span>       <br />padding: 5px;       <br />text-decoration: none;       <br />background: #e6e6e6;<span style="color: red;"> /* cor do fundo*/        </span>border: solid #ccc 1px; <span style="color: red;">/*cor da borda*/        </span>}<br />
#blog-pager a:hover {      <br />color:#fff;  <span style="color: red;">/*Cor da letra ao passar o mouse*/        </span>background-color:#0071bb;  <span style="color: red;">/*Cor da fundo ao passar o mouse*/        </span>}<br />
.blog-pager-older-link {      <br />float: right;       <br />}<br />
.blog-pager-newer-link {      <br />float: right;       <br />}</blockquote>
<img alt="image" border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncEvhcYfkmsiLIEoepqnNawBr2ylitPTlIUF_GaVORBnF0eQL22vMR-5QeU2caLh9PeqmbSH0QUJ8FphbFar-5gsWD_bgjAE9Funi9jwFIXrVAvYy5TNnk-eo7o4a7KkYYbAvkH2uJCw2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="resultado" width="547" /><br />
Os ítens em vermelho, podem ser modificados livremente. Veja a <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">tabela de cores</a>.<br />
Para colocar numeração nos links, vá até o Mundo Blogger: <a href="http://www.mundoblogger.com.br/2010/01/numerar-paginas-no-blog-corrigido.html">Numerar Páginas no Blog</a>

Personalizando os links de navegação do Blogger

Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visita...

Continue Lendo >>

17:03

Slideshow em cima dos posts do Blogger

Ontem eu publiquei um tutorial, ensinando como colocar um slideshow nos templates personalizados para Blogger/Blogspot -  <a href="http://www.dicasblogger.com.br/2010/10/slide-show-no-blogger.html">Slideshow no Blogger</a> <br />
No tutorial em questão, o slide tem 980px de largura e as imagens ficam dispostas lado a lado, abrindo-se a medida em que passamos o mouse sobre elas. <br />
<a href="http://demo-animal.blogspot.com/"><img alt="image" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8tSZtC96WIrf-Lp7xaI4e9cPZxUJLgKXcZprzVNOMM8rqdpJ1exzhWP6vRMncy0ngzuqk1jskXzvMPK3oiJlFx62FZuRg7Ov-1s5_S8bzO8nhrTbW47XQOgXSMHT9NTnC02KqB2dFSVp/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="532" /></a>   <br />
Hoje irei mostrar dois outros modelos, que ficam muito bonitos quando colocados em cima da área de postagem ou mesmo no topo da sidebar <br />
<b>IMPORTANTE!</b> Vale lembrar que a largura dos elementos de página do Blogger, variam de template para template e que é necessário que vocês façam os ajustes no CSS de acordo com as suas necessidades. Os dois modelos que irei apresentar foram testados nos <a href="http://www.templates.dicasblogger.com.br/">Templates do Dicas Blogger</a>, com sidebar à direita. <br />
<b><span style="font-size: large;">Modelo 1 – largura 500px</span></b>   <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku6KPPvcmI2Q8sZAAtJlZP56omdiM6ZPvKVcL0Zppo3cqGo8unFKCBHxbc_0V35Sm5Uf_L3tRJPmwurPip-k2_p8TVf39zaNCsxQ99jBS-cPePu4oZFhUy3PE9zST-AzLXMv84PbEfb0m/s1600/slider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku6KPPvcmI2Q8sZAAtJlZP56omdiM6ZPvKVcL0Zppo3cqGo8unFKCBHxbc_0V35Sm5Uf_L3tRJPmwurPip-k2_p8TVf39zaNCsxQ99jBS-cPePu4oZFhUy3PE9zST-AzLXMv84PbEfb0m/s1600/slider.png" /></a></div>
Neste modelo, deve-se usar imagens de 500 x 280px. <br />
<b>Passo 1- </b>entre no HTML do template e procure por <b>]]></b:skin></b> <br />
Cole <b>ANTES </b>dessa tag o seguinte código <br />
<pre><code>
/* Image Slideshow */
#s3slider{margin:15px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden;}
#s3sliderContent{width:100%; position:absolute; bottom: 0; margin:0px; padding-left:0px; }
.s3sliderImage{float:left; position:relative;display:none; }
.s3sliderImage span{position:absolute; left:0; font:normal 12px 'Arial',Helvetica,sans-serif; padding:0px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;bottom: 0; }</code></pre>
<br />
<b>Passo 2-</b> procure pela tag </head> e cole ACIMA dela: <br />
<br />
<pre><code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'><![CDATA[//><!--
/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban KariÃ…Â¡ik -> http://www.serie3.info/
CSS Help: MÃƒÂ©szÃƒÂ¡ros RÃƒÂ³bert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

var element     = this;
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current     = null;
var timeOutFn   = null;
var faderStat   = true;
var mOver       = false;
var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver   = false;
fadeElement(true);
});

});

makeSlider();

};

})(jQuery);  
//--><!]]></script>

<span>DESCRIÇÃO</span></a></li>

<span>DESCRIÇÃO.</span></a></li>

<span>DESCRIÇÃO.</span></a></li>

<span>DESCRIÇÃO.</span></a></li>

<span>DESCRIÇÃO.</span></a></li>

</ul>

</div>

<span style="color: #38761d;"></b:if></span></code></pre>
<br />
Substitua “url do link” pelo endereço do post, "url da imagem", pelo endereço da imagem e em DESCRIÇÃO, escreva algo sobre aquela imagem. <br />
<br />
Apague as partes que estão em verde, se quiser que os slides apareçam em todas as páginas e não somente na home. <br />
<br />
<span style="font-size: large;">Modelo 2 -largura 610px</span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmm7E7vZBOtFxh3xRQ_mu-su2_bMm7C8qqsjjl924b3aridjCdD_hbKxGeBTYqNUwQ1LY3SQr4Ffbvqk7fLhtlZaou2ZPr4bfY6yNc2kiBSEltkX5IH7L5iv_4Aq1k1icY8Pzj9wGbvo5/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmm7E7vZBOtFxh3xRQ_mu-su2_bMm7C8qqsjjl924b3aridjCdD_hbKxGeBTYqNUwQ1LY3SQr4Ffbvqk7fLhtlZaou2ZPr4bfY6yNc2kiBSEltkX5IH7L5iv_4Aq1k1icY8Pzj9wGbvo5/s1600/img1.png" /></a></div>
<br />
Utlize imagens de 610 x 320 px ou de acordo com sua necessidade <br />
<br />
Entre no HTML do template e cole este código antes da tag <b>]]></b:skin></b> <br />
<br />
<pre><code>
#slider-holder{width: 610px;height: 320px;overflow: hidden;
margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;}
#s3slider { width: 610px; /* largura da imagem */
height: 320px; /* altura da imagem */position: relative; /* important */overflow: hidden; /* important */}
#s3sliderContent {width: 610px; /* largura */
position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */}
.s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */}
.s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff;  padding: 20px 15px 50px 13px;  height: 73px;  width: 600px;  background-color: #4e4d3c;
filter: alpha(opacity=70); /* opacidade do box */
-moz-opacity: 0.7; /* opacidade do box */
-khtml-opacity: 0.7; /* opacidade do box */
opacity: 0.7; 
display: none; bottom: 0;
}
.s3sliderImage span a.featured-title:link,
.s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;}
.s3sliderImage span a.featured-title:hover{color: #999;}
.s3sliderImage span a:link,
.s3sliderImage span a:visited{color: #888;}
.s3sliderImage span a:hover{color: #555;}
</code></pre>
<br />
Siga o passo 2 do modelo1. <br />
<br />
Siga o passo 3 do modelo 1, mas use este código: <br />
<br />
<pre><code>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='black-bg' id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<span style="color: red;"><li class='s3sliderImage' style='display: list-item;'></span>
<span style="color: red;"><a href='LINKS'><img alt='Imagen 1' src='URL DA IMAGEM' style='width: 610px; height: 320px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#LINK' rel='bookmark' title='TÍTULO DO POST'>TÍTULO</a><br/>
DESCRIÇÃO
</span></span>
<span style="color: red;"></li></span>

</div> 
</div>
</b:if></b:if></code></pre>
<br />
<br />
<ul>
<li>A parte em vermelho deve se repetir para cada nova imagem. </li>
<li>Em <b>Link</b>, coloque a url que será associada à imagem. </li>
<li>Em <b>url da imagem</b>, cole o endereço da imagem. </li>
<li>De um <b>título </b>e uma <b>descrição</b> às imagens. </li>
</ul>
<br />
Nos dois modelos, foram utilizados javascript. O endereço do arquivo é: <br />
<br />
<ul>
<li><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js</a> </li>
</ul>
<br />
Recomendo salvar o arquivo .js, hospedar em algum site de sua preferência e substituir a url nesta parte do código:<br />
<br />
<blockquote>
<br />
<script src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js%27">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'</a> type='text/javascript'/> </blockquote>
<br />
<b>O script pode ser colocado diretamente no template. Preste muita atenção! </b><br />
<br />
Abra o arquivo .js no bloco de notas. No código do passo 2, apague esta linha:<br />
<br />
<blockquote>
<script src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js%27">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'</a> type='text/javascript'/> </blockquote>
Agora, copie este código, colando todo o script (JS) no local indicado. <br />
<blockquote>
<script type='text/javascript'> <br />
//<![CDATA[ <br />
<b>COLE AQUI O SCRIPT</b><br />
//]]><br />
</script></blockquote>

Slideshow em cima dos posts do Blogger

Ontem eu publiquei um tutorial, ensinando como colocar um slideshow nos templates personalizados para Blogger/Blogspot - Slideshow no Blogg...

Continue Lendo >>

01:24

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho.<br />
<br />
Já existiam várias formas de se colocar um slideshow no Blogger, mas a maioria delas dependia de  hospedar externamente um arquivo do tipo .js (javascript).<br />
<br />
Por que isso era ruim? Porque no Blogger não existe um serviço de hospedagem de arquivos; dos serviços gratuitos, muitos mudam as regras sem aviso prévio, apagando os arquivos ou mudando as URLs (endereços) dos mesmos.<br />
<br />
Hoje eu vi no excelente metablog espanhol <a href="http://gemablog-.blogspot.com/">Gema Blog</a>, uma forma de usar um slideshow sem precisar de hospedagem externa do arquivo em javascript.<br />
<br />
Vejam um exemplo neste lindo template da <b>Mamanunes</b> – <a href="http://demo-animal.blogspot.com/">Template Animal</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-animal.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWn7mqXu1SnfIiEsCdJXscKzGoXKN6AKXwuJBIvu-7Hc4xXMQtOA0nuYJxLVWAwxdRapYMa-qvYQ0LCKUXTbjTXJ2yrieYyJKb8Nij4c910ac_tFl1sR9BJEcADPXIZZD-TV58H-AkIAey/?imgmax=800" /></a></div>
  <br />
<div align="center">
<a href="http://demo-animal.blogspot.com/">Demo</a> – <a href="http://blogger-dicasmamanunes.blogspot.com/2010/10/template-animal-blogger-templates.html">Download e Instruções</a> </div>
Para colocar um slideshow em seu blog, antes de mais nada é preciso encontrar as imagens que farão parte do conjunto de slides. No tutorial da amiga Gema, foram utilizadas imagens no tamanho 750 x 250 px. Edite as imagens de sua preferência, usando um site ou programa apropriado e hospede-as no Picasa.<br />
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> <br />
</li>
<li><a href="http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html">Imagem para o cabeçalho do Blogger com Photoshop</a> <br />
</li>
<li><a href="http://www.google.com.br/url?sa=t&source=web&cd=1&ved=0CBkQFjAA&url=http%3A%2F%2Fpixlr.com%2F&ei=9GHNTNCbII-q8Ab8h7CdAQ&usg=AFQjCNFXHCnqgSKhbFb5IdckiuqHXI8c6g&sig2=UiLyr6HL8AG4u9asV0sw2A">Photo editor online - Pixlr.com edit image</a> </li>
</ul>
Faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup do template</a>. Vá em design>editar HTML e, usando o comando Crtl+F do teclado,  procure pela tag <b></head>.</b> Cole <b>antes</b> dela o seguinte código:<br />
<br />
<pre><code>
<style>

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 196px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyXd7XhKfVra9GMEfICujKFGbZ86JWtw5l7g4cSRysuPQTynCt41m8YUSk59KxNqXj_y2v5PvzLFgu5b95J0lQ1w4ydTWcJvMFs98On1cJcHwj28RTh1iVC4mxk0lZVsWjR92hH7hwVM/s1600/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>

Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//--><!]]></script>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
<p>Conteúdo</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div> </code></pre>
<br />
A cada slide que você for incluir, faça as seguintes substituições:<br />
<br />
<blockquote>
<a href='<b>#</b>'> <b>(coloque o link que será associado à imagem)</b> <br />
<img alt="" class="slidimg" src="<b>URL da imagem</b>" style="width: 750px; height: 250px;" /> <br />
</a> <b>(cole a URL e o tamanho da da imagem)</b><br />
<div class='kwikmet rounded'> <br />
<h2><a href='#' rel='bookmark' title=''><b>Título</b></a></h2> <b>(dê um título à imagem)</b> <br />
<p><b>Conteúdo</b></p> <b>(escreva uma descrição)</b></blockquote>
<br />
Vejam um exemplo, usando o template Style:<br />
<br />
<blockquote>
<a href='<a href="http://www.templates.dicasblogger.com.br/2010/09/template-style.html" title="http://www.templates.dicasblogger.com.br/2010/09/template-style.html">http://www.templates.dicasblogger.com.br/2010/09/template-style.html</a>'> <b>(link que será associado à imagem)</b> <br />
<img alt="" class="slidimg" src="<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?imgmax=800" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?imgmax=800">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?imgmax=800</a>" style="width: 750px; height: 250px;" /> <br />
</a> <b>( URL e tamanho da imagem)</b><br />
<div class='kwikmet rounded'> <br />
<h2><a href='#' rel='bookmark' title=''>Template Style</a></h2> <b>(título)</b> <br />
<p>O template Style possui  1 coluna de cada lado etc…</p> <b>(descrição)</b></blockquote>
<blockquote>
</blockquote>
<br />
Gostou da caixinha de códigos?Aprendi a fazer lá no Mundo Blogger ;) <br />
<ul>
<li><a href="http://www.mundoblogger.com.br/2010/10/caixa-de-codigos-personalizada-com.html">CAIXA DE CÓDIGOS PERSONALIZADA COM IMAGEM NO TOPO</a> </li>
</ul>
<br />
<b>Fonte do tutorial:</b> Gema Blog – <a href="http://gemablog-.blogspot.com/2010/10/otro-slider-de-jquery.html">Otro slider de JQuery</a>

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho. Já ex...

Continue Lendo >>

11:36