Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

Template Diary

Esta semana me encantei com este tema para wordpress, criado por Site5.com e decidi compartilhá-lo com os usuários do Blogger:

template Diary

Configurações:

Search
procure por:
<div id='topSearch'>
<form action='http://diary-notebook-template.blogspot.com/search' id='searchform' method='get'>

onde está em negrito, coloque o nome do seu blog

Social Icons
procure por:
<!-- Begin Social Icons -->
<div id='socialIcons'>
<ul>
<li><a class='twitter tip' href='http://twitter.com/ArianeN_' title='Follow Us on Twitter!'>Follow Us on Twitter!</a></li>
<li><a class='facebook' href='https://www.facebook.com/pages/Templates-Novo-Blogger/208491902533894' title='Join Us on Facebook!'>&quot;Join Us on Facebook!</a></li>
<li><a class='rss' href='http://feeds2.feedburner.com/TemplatesNovoBlogger' title='RSS'>RSS</a></li>
</ul>
<a href='http://templatesparanovoblogger.blogspot.com/2009/02/templates-novo-blogger.html' id='butContact'>Contact</a>
</div>
<!-- End Social Icons -->
altere o que está em negrito por suas url's

Twitter Updates
procure por: 
<div id='twitter'>
<h3>Latest Tweets</h3>
<script>
$(function(){
$(&quot;#twitter&quot;).tweet({
avatar_size: 24,
count: 3,
username: &quot;ArianeN_&quot;,

altere o que está em negrito pelo seu nick no Twitter

JavaScript

este tema usa uma série de scripts. Para sua segurança, hospede os códigos em seu site de preferência e troque as url's em:
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/jquery.tweet.js' type='text/javascript'/>
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/jquery.prettyPhoto.js' type='text/javascript'/>
<script src='http://www.wpdiarytheme.com/preview/wp-content/themes/diary/js/custom.js' type='text/javascript'/>
O script prettyPhoto (vale à pena visitar o site e conhecer todos os recursos disponíveis) permite uma visualização das imagens em estilo Lightbox. Para usar este recurso, acrescente ao código da imagem o trecho: rel='prettyPhoto', como no exemplo abaixo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-NHqyTrcd5qk/TlELKp_tOaI/AAAAAAAAaFs/TIvm_zZWcxA/s1600/bg3.jpg" imageanchor="1" rel="prettyPhoto"><img border="0" height="266" src="http://3.bp.blogspot.com/-NHqyTrcd5qk/TlELKp_tOaI/AAAAAAAAaFs/TIvm_zZWcxA/s400/bg3.jpg" width="400" /></a></div>

Para usar o recurso galeria (veja no primeiro post do Demo) acrescente ao código da imagem o trecho: rel="prettyPhoto[pp_gal]"
Para usar os outros recursos, visite o site do desenvolvedor.

É expressamente proibido retirar os créditos do autor e do TNB.


Leia Mais

Links para o final de semana - Icones

Segue a indicação de alguns pacotes de ícones gratuitos bem  bacanas, para você aproveitar o fim de semana e dar aquela repaginada no visual do seu blog :)












Leia Mais

Lista de Postagens Populares na Horizontal

 
Um dos novos widgets que eu mais gosto (e uso nos meus outros blogs) é o de Postagens Populares. É uma maneira interessante de atrair seus visitantes para outros textos que talvez não se apresentem na página inicial, além de mostrar os assuntos que mais agradam seus leitores. No entanto, por padrão, a lista aparece na vertical, limitando a possibilidade de mostrá-la em outras áreas do blog que não a sidebar, além de ocupar bastante espaço da coluna lateral, mesmo que se escolha poucos posts a serem mostrados.
Uma maneira que considerei interessante foi mostrar esta mesma lista na horizontal, dentro de alguma div que ocupe toda a largura da página, como a div #crosscol-wrapper (e neste caso, apareceria abaixo do cabeçalho, como neste blog).

Também é possível arrastar o widget para o Footer, por exemplo, e a apresentação dos Posts Populares ficaria no final da página

Tutorial para quem usa os Modelos de Layout(2006)

A primeira coisa que se deve fazer é se certificar da largura total de #outer-wrapper (a div que engloba todas as outras). Procure no CSS do seu template por #outer-wrapper e veja o valor que está em width. Se no seu template este valor for 100%, será preciso então definir um valor para #content-wrapper (a div que engloba #main-wrapper e #sidebar-wrapper). Se o valor de width em #outer-wrapper for algo como 980px, não será preciso definir #content-wrapper.

Para definir uma largura para content-wrapper, acrescente no CSS (imediatamente acima da tag ]]></b:skin> ):

#content-wrapper{margin: 0 auto; width: 990px}

o valor de width deve ser alterado conforme a largura que você desejar.

Tendo definido uma largura para content-wrapper, acrescente também este trecho (ainda acima da tag ]]></b:skin> ):

#crosscol-wrapper{margin: 0 auto; padding: 0px}
#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px} /*define que o widget ocupe 100% de largura */
#PopularPosts1 h2{font-size:18px;text-align:left; border-bottom: 1px dotted #fff} /*estilo para o título do widget */
.PopularPosts .widget-content{float:left;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.PopularPosts .widget-content ul {margin: 0px auto;padding: 0px 0px;width: 100%; list-style:none; } /* estilo para a lista de posts */
.PopularPosts .widget-content li {margin: 0px 6px 10px 6px;width: 182px;padding: 0px;height: 180px; overflow:hidden;list-style:none; float:left; border: 1px solid #fff;} /*estilo para cada item da lista. Altere os valores de width, height, border, etc, para que se encaixem na largura total. */
.item-content{font-size: 12px; text-align:left; padding: 5px 10px} /* estilo para o resumo do post */
.PopularPosts img{margin: 0px 0px;padding: 4px; background: #fff; float:right} /*estilo para a imagem */
.PopularPosts .item-title{line-height:1.3em} /* estilo para o titulo de cada post */

Salve a modificação. Em Elementos de Página, arraste o widget Postagens Populares para sob o cabeçalho (ao arrastar, deve aparecer um retângulo  onde se deve encaixar o widget), ou para #footer.

Se você desejar, poderá também colocar no início ou final da coluna dos posts, mas deverá modificar as medidas para que se encaixem na largura da coluna.  No meu exemplo, as medidas são ideais para #content-wrapper com width: 990px; mostrando cinco posts populares por 'linha'.

Se quiser mostrar os posts populares apenas na primeira página, vá em Editar HTML, clique em Expandir Modelo de Widget e encontre o widget PopularPosts expandido. É um código bastante extenso e a condicional (em vermelho) deve ser colocada logo após <b:includable id='main'> e seu fechamento logo antes de </b:includable> como mostrado abaixo:


<b:widget id='PopularPosts1' locked='false' title='Populares' type='PopularPosts'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
 ......... mais código .........


  </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:if></b:includable>
</b:widget>

Para os que usam os Modelos de Designer

Para os que usam os novos modelos, fiz este teste mas é necessário fazer algumas aterações no HTML. Primeiro vá em Designer do Modelo => Avançado e em Adicionar CSS, acrescente os códigos passados acima (aqui, a única diferença será que você deve especificar uma medida exata de largura e altura para #crosscol-wrapper, como na imagem abaixo - clique para ampliar -):


Salve a modificação e vá em Editar HTML e procure por:

<div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
    </div>

E acrescente depois de </div>:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
Salve as modificações e em Elementos de Página, arraste o widget Posts Populares para o espaço abaixo do cabeçalho.

Se quiser mostrar os posts populares apenas na primeira página, deixe desta maneira:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>

</b:if>

Como sempre, acho muito mais fácil fazer do que explicar, por isso, se tiverem dúvidas, não hesitem em deixar nos comentários.
Leia Mais

Template Pin-Up 2

Este é o Template Pin-Up reformulado: o formato dos resumos automáticos foram modificados, bem como detalhes nos títulos dos posts e sidebar. Além disso, acrescentei os posts relacionados em forma de slide, que foram usados no Template Blogger Games. O script utilizado é de autoria do JMiur, blog Vagabundia:

Posts Relacionados em Slide


Para editar os links do Menu1 (no alto, à direita), basta criar uma lista de links e arrastar para o espaço acima do cabeçalho, em Elementos de Página.
Para editar os links do Menu2 (abaixo do título do blog) você deve procurar o seguinte trecho no código HTML do template:

<!-- Inicio do Menu2 -->
<div id='subscribe'>
<ul>
<li class='link1'><a href='coloque aqui o seu link'>Categorias</a></li>
<li class='link2'><a href='coloque aqui o seu link'>Fotos</a></li>
<li class='link3'><a href='coloque aqui o seu link'>Arquivos</a></li>
<li class='link4'><a href='coloque aqui o seu link'>Sites</a></li>
</ul>
</div>
<!-- Fim Menu -->

Coloque os links entre as aspas, depois de a href= e modifique os nomes Categorias, Fotos, Arquivos e Sites.

Todas as fontes e cores podem ser modificadas no painel de fontes e cores do Blogger (Designer do Modelo => Avançado)

Um template bem feminino, espero que gostem :)
Download
Leia Mais

Template Blogger Games

Antes de apresentar o novo template TNB, devo fazer uma confissão: costumo gastar muitas horas de internet entretida com joguinhos em flash. Me diverte, distrai, estimula o meu raciocínio e minha agilidade mental. Enfim, eu gosto. E gosto tanto que tenho vários blogs de jogos no Blogger (os meus jogos preferidos são os do tipo Physics e Escape Room). Para criar meus blogs procurei  por templates que pudessem apresentar na página inicial uma grande quantidade de jogos, mas não tive muita sorte. Assim, passei a modificar o Template Mínima usando o hack de resumos automáticos e um pouco de condicionais. O template que disponibilizo agora é uma versão melhorada dos templates que eu mesma uso e espero que seja útil para quem tem ou pretende ter um blog de games no Blogger.

Blogger Games Template: versão sem slide na sidebar (clique na imagem para ver o blog).



A versão com slide na sidebar pode ser conferida AQUI

    O Arquivo para Download contém:
    • XML: dois arquivos xml; um com a versão sem slide e outro com slide; escolha um modelo para fazer o Upload.
    • Backgrounds: 10 backgrounds diferentes (na verdade só muda a cor do cabeçalho);
    • Imagens: as imagens utilizadas no template;
    • Screenshot: captura de telas com indicações dos trechos que devem ser modificados no template (e que constam no tutorial abaixo).
    Por favor, antes de instalar o template, leia atentamente as explicações abaixo!
    O Template Blogger Games utiliza o hack de resumos automático juntamente com o mesmo script utilizado no Template Feminina, que mostra na página inicial resumos de postagens por categoria. A diferença aqui é que, além de mostrar os resumos por categoria também aparecem os últimos posts publicados. Em Formatação, determine que apareça um número múltiplo de 3 na página inicial. Os resumos por categorias aparecerão abaixo das últimas postagens publicadas (Last Games).
    Para editar o script, leia o tutorial do Template Feminina, o procedimento é o mesmo.

    Não se esqueça: Você deve colocar o nome dos Marcadores exatamente como os criou, ou seja, se você criou um  marcador todo em letra minúscula (ou só com a primeira em maiúscula, seja como for) você deve colocar exatamente igual no script! Cuidado para não apagar nenhuma aspa ou vírgula. Não se esqueça de colocar a url do seu blog nos locais indicados e o nome dos marcadores na mesma ordem do início do script.

    Passo 1: Localize este trecho do código e coloque o nome dos marcadores, exatamente como foram criados, entre aspas duplas e separados por vírgulas. Faça isso, na mesma ordem, na primeira e segunda linha.

    Passo 2- Coloque a url do seu blog onde indicado.

    Passo 03- Coloque o link do seu blog e o nome do Marcador (na mesma ordem do Passo 01) onde indicado. Não modifique mais nada!

    Atenção! :No script está determinado que deve aparecer 3 posts por categoria; se você não tiver no mínimo 3 posts publicados em uma categoria, nada vai aparecer. Por isso, certifique-se de publicar primeiro um mínimo de 3 posts em cada categoria!

    Social e Linkbar:

    Social é o menu horizontal à esquerda com links para Twitter, Facebook e RSS. Estes links devem ser colocados diretamente no código do template, como mostra a imagem abaixo:


    Linkbar: é o menu à direita. Basta criar uma lista de links e arrastar para o topo, em Elementos de Página, como mostra a imagem:


    Menu: menu horizontal abaixo do cabeçalho; tal qual a Linkbar, é criado à partir de uma lista de Links em Elementos de Página.

    Galeria: uma série de 10 widgets de imagens fixas abaixo do menu. Para editá-las, clicar em Editar, remova a imagem e coloque a imagem do jogo e o link para o post onde ele se encontra. A Galeria é mostrada em todas as páginas mas se você desejar mostrar apenas na página inicial, procure pelo trecho: <div id='galeria'> e acrescente os códigos em vermelho:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <div id='galeria'>

    <b:section class='galeria' id='galeria1' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Image89' locked='true' title='' type='Image'/>
    </b:section>

    .......................................

    </div>
    </b:if>

    Posts: os posts foram adaptados para mostrar jogos e suas descrições, com miniatura das imagens dos mesmo. A estrutura do post que usei foi: código do jogo + class description. Dentro desta class deve ser colocada a imagem do jogo mais a descrição. Para utilizar a class description, vá em Configurações, Formatação e em Modelo de Postagem coloque o código:
    <div class='description'>
    </div>

    salve a alteração e note que em todo post que iniciar (clicando na Aba HTML do Editor de Postagem) o código aparecerá. Coloque o código do jogo acima de <div class='description'> e antes de </div>, a imagem e a descrição. Deve ficar assim:


    Toda imagem colocada dentro de <div class='description'> será reduzida automaticamente. Se não quiser ter uma imagem reduzida ou se desejar escrever um texto que não seja uma descrição do jogo, basta apagar o código antes de escrever seu post.


    Post Footer: além dos dados costumeiro (postado por, marcadores, reações, etc), o post-footer conta com os links de compartilhamento do AddThis e posts-relacionados em forma de slide, mais um presente que o JMiur nos oferece (e fiz questão de acrescentar os créditos por seu trabalho no script que ele criou).

    Slide: para quem pretende usar a versão com o slide na sidebar, saiba que ele é automático, ou seja, não é preciso editar nada, ele mostra as últimas publicações automaticamente. Este slide é tão bacana que você pode escolher mostrar publicações que não estão na home. Ou seja, se você mostra 9 publicações em Last Games, não vai querer que estas 9 apareçam no slide também, então você determina no script que ele mostre os posts anteriores a estas 9 publicações. Para isso, procure o trecho que aparece na imagem abaixo e modifique o valor apontado para o número de posts que pretende exibir na página inicial:

    Aqui, quem nos oferece este recurso genial é a Rô Zanchetta do excelente BloggerSphera. (Aliás, os dois blogs que mais consulto na internet: BloggerSphera e Vagabundia).


    Background: o arquivo contém 10 imagens diferentes de backgrounds (na verdade só alterei a cor do cabeçalho). Hospede as imagens em um post, copie a url da imagem escolhida e coloque em body, conforme abaixo:


    Outras alterações: Como alterar ícones, favicon, logo, link Jogar!: o arquivo contém imagens apontando para os locais exatos onde as modificações devem ser feitas.

    Todas as fontes e cores podem ser alteradas pelo painel do Blogger: clique em Desiner do Modelo e em Avançado.


    DEMO 01
    DEMO 02
    Download

    • Testado nas últimas versões dos navegadores: Internet Explore, Chrome e Firefox. 
    • Os jogos e imagens incluídos nos dois blogs onde se encontram os Demos foram retirados do site MochiMedia, que fornece uma quantidade enorme de códigos de jogos em flash de várias categorias.
    • A barra no rodapé do Demo 01 é um serviço oferecido pelo site Wibiya (é necessário fazer  cadastro).
    • O link para o Templates Novo Blogger não deve ser retirado do rodapé do template!
    • Espero que gostem ;)

    Obs: se desejar, você pode entrar em contato para contratar o serviço de instalação deste template (apenas instalação e edição dos códigos. Suporte para modificações no modelo não disponível).
    Leia Mais

    Ocultando elementos das páginas internas

    Hoje, pela manhã, recebi a seguinte pergunta, através do formulário de contato, do leitor Victor Hugo Filgueiras:

    "[...] Queria só tirar uma dúvida sobre gifs, queria saber se tem algum jeito da Gif rodar somente dentro do post e não rodar na página inicial, como esse site aqui: www.forgifs.com, [...] obrigado,
    Victor."
    Sobre gifs:

    Colocar gifs animadas nos posts do Blogger sempre foi um tanto problemático por que a imagem perdia seu movimento e a saída era hospedar a imagem em outro site que não o Blogger. Porém, a pergunta do Victor me chamou a atenção para o assunto e fui fazer meus testes. Notei que a imagem se comporta de maneira diferente dependendo do modo em que é inserida no post. Se a imagem for colocada pela aba Escrever, o gif não perde seu movimento, o que não ocorre se for colocada na aba Editar HTML. Veja aqui os testes que fiz (tanto no Blogger in Draft quanto no Blogger.com). Isto por que, quando se coloca a imagem no modo HTML ela é automaticamente redimensionada, o que não ocorre quando se coloca no modo Escrever.



    Nos testes que fiz, se a imagem é colocada no modo HTML, perde seu movimento definitivamente, independente de suas dimensões. Talvez por que  na aba Editar HTML é obrigatório escolher uma dimensão para a imagem, o que não ocorre na aba Escrever e isso talvez influencie o comportamento da imagem, não sei. Quem souber, por favor, me avise :)

    Antes de prosseguir e definitivamente responder a pergunta do Victor, só mais uma observação: se você colocar um gif animado pela aba Escrever e ele não apresentar movimento, clique na imagem e selecione a opção Tamanho Original

    Agora, respondendo definitivamente ao Victor...

    Como fazer um gif apresentar movimento apenas dentro do post (página interna)

    1) Se você usa o resumo de postagem do Blogger: 
     
    A primeira coisa que devemos fazer é criar uma condicional para garantir que um determinado conteúdo não apareça na página interna (no post), apenas na página inicial (home). Para isso, vá em Design =>Editar HTML (o código html do seu template), e coloque o seguinte trecho acima da tag  </head>:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    .home{display:none}
    </style>
    </b:if>

    Esta condicional envia a seguinte mensagem: o que estiver contido na class home não deve aparecer na página interna (post).

    Salve a alteração, abra uma nova postagem e nela coloque o gif animado duas vezes, ambas pela Aba Escrever e redimensione a primeira imagem, para que ela perca o movimento (deixe-a maior ou menor que o original) e garanta que a segunda esteja no seu tamanho original. Se está usando um resumo de postagem, insira a segunda imagem após o link do resumo (more), assim:


    <div class='home'>
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"><img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /></a></div>
    </div>

    < !--more-- >

    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-Xs1EvktHrFY/Th8TtUJ2UgI/AAAAAAAAXvA/xsO2m8TbdMs/s1600/Clap-Clap.gif" /></a></div>

    Note que o código da primeira imagem está entre <div class='home'> </div>.  Isso faz com que a primeira imagem não apareça na página interna. Tudo o que for colocado dentro destas tags ficará oculto na página interna. Veja o exemplo no último post que aparece nesta página: a primeira imagem e o texto em lilás não aparece na página interna (clique em Leia Mais).

    Você também pode simplesmente trocar o separator (a classe da imagem no Blogger) por home:

    <div class="home" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s1600/Clap-Clap.gif" imageanchor="1"><img border="0" height="240" src="http://1.bp.blogspot.com/-ttsN1VCFBik/Th8quu7ZvFI/AAAAAAAAXvw/oNz3tDgQP7w/s400/Clap-Clap.gif" width="320" /></a></div>


    2) Se não usa resumo de postagem :

    Agora, vamos supor que você não use nenhum recurso de resumo de postagem. Apenas deseja mostrar uma imagem estática na página inicial e que, clicando nesta imagem, você seja levado para a página interna, onde ela ganha movimento (como no exemplo do site que o Victor passou). Para isso, faremos o seguinte, criaremos duas condicionais e duas classes:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    .home{display:none}
    </style>
    </b:if>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    .pagina{display:none}
    </style>
    </b:if>
    </head>

    No post, trocaremos, na primeira imagem, o separator (a class para imagem do Blogger) por home e na segunda, por pagina e alteraremos a  url da primeira, direcionando-a para o post. Mas como direcionar uma imagem para um post que ainda não foi nem publicado? 

    Por padrão, a url do post tem este formato:

    http://testenovasidebar.blogspot.com/2011/07/gif01.html

    url do blog + ano e mês da publicação + nome do post (todo em letra minúscula) + html.

    Se o titulo do post contiver mais de uma palavra, elas serão separadas por traços:

    http://testenovasidebar.blogspot.com/2011/07/uma-imagem-qualquer-de-teste.html

    Assim, basta acrescentar no código da primeira imagem a url que o post terá (com o título que você criou):

    <div class="home" style="clear: both; text-align: center;">
    <a href="http://testenovasidebar.blogspot.com/2011/07/gif01.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s200/Clap-Clap.gif" width="200" /></a></div>

    <div class="pagina" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s1600/Clap-Clap.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-6ZOc5FH2DHQ/Th9eKHSLXyI/AAAAAAAAXxk/560Dt6OmcrY/s1600/Clap-Clap.gif" /></a></div>

    No pior dos casos, se você não acertar a url, publique normalmente, verifique como ficou a url e acrescente o link na imagem, editando o post :)


    Veja este exemplo em funcionamento aqui (clique na imagem do primeiro post que aparece). Você pode depois editar e apagar o título da postagem, para que fique apenas a imagem (como eu fiz).

    ********************************************************************************
    Este post ficou muito maior do que eu havia planejado mas espero, sinceramente, que não esteja muito confuso e que tenha conseguido responder a pergunta do Victor ;)
    Leia Mais

    Retirar marcadores dos posts

    Algumas pessoas me perguntam como manter a lista de marcadores na sidebar sem que os mesmos apareçam nos finais das postagens.

     

    Para isso, vá em Editar HTML, clique em Expandir Modelo de Widget, procure  e apague todo o trecho abaixo:

    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span>

    Feito isso, clique em Visualizar e se tudo estiver ok, clique em Salvar.
    A lista de Marcadores continuará aparecendo na coluna lateral (sidebar), porém, não mais aparecerá  abaixo das postagens.
    Leia Mais

    Botão 'ir ao topo da página'


    Esta eu vi no WebDesignerWall e achei o efeito bacana. Um botão de 'ir ao topo da página' (Animated Scroll to Top) com  JQuery. Para ver como fica, aqui o Demo (role a página para baixo). Vou ensinar a colocar este botão no blogger.

    1- Vá em Editar HTML e antes da tag </head>, coloque os scripts:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>

    <script>
    $(document).ready(function(){

        // hide #back-top first
        $(&quot;#back-top&quot;).hide();
      
        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() &gt; 100) {
                    $(&#39;#back-top&#39;).fadeIn();
                } else {
                    $(&#39;#back-top&#39;).fadeOut();
                }
            });

            // scroll body to 0px on click
            $(&#39;#back-top a&#39;).click(function () {
                $(&#39;body,html&#39;).animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });

    });
    </script>

    2- Coloque no CSS* do template o seguinte trecho:
    #back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
    }

    #back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;}

    #back-top a:hover {color: #000;}

    /* arrow icon (span tag) */
    #back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(http://1.bp.blogspot.com/-sC3qXtoirKo/TdEO99T9TWI/AAAAAAAATbY/e8zExwrL3yM/s1600/up-arrow.png) no-repeat center center;

    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;}

    #back-top a:hover span {   background-color: #777;}

    *CSS: pode ser logo após do trecho:
    body {
      font: $(body.font);
      color: $(body.text.color);
      background: $(body.background);
      padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
      $(body.background.override)
    }

    3- No HTML, antes de  <footer><div class='footer-outer'>, coloque:
    <div id='back-top'>
    <a href='#top'><span/>Back to Top</a>
    </div>

    E pronto. Veja como ficou em um dos novos modelos do Blogger.



    Leia Mais

    Links para o final de semana X

    Leia Mais

    Dividir o Header (cabeçalho) - Novos Modelos

    Este tutorial se aplica aos novos modelos de template (Designer do Modelo)

    Para dividir o cabeçalho (header) nos novos modelos de template:

    1- procure pelo seguinte trecho de código, no template (Editar HTML):
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Novo Design Blogger (Cabeçalho)' type='Header'/>
    </b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    </div>
    </header>

    2- Substitua tudo por:
    <div class='fauxborder-left header-fauxborder-left'>  
    <div class='region-inner header-inner' style='width:49%; float:left'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Designer do Modelo (Cabeçalho)' type='Header'/>
    </b:section></div>

    <div class='fauxborder-right header-fauxborder-right' style='width:49%;float:right;height: auto;'>
    <b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
    </b:section>

    </div>
    </div>

    <div class='header-cap-bottom cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    </div>
    </header>
    <div style='clear:both;'/>

    3- Salve a modificação e veja em Elementos de Página, como deve ficar o cabeçalho já dividido:


    4- Dependendo da largura do layout (eu usei 990px) será preciso fazer ajustes na posição do banner. Para isso, vá em Designer do Modelo -> Avançado e em Adicionar CSS coloque o seguinte código:

    #banner{margin: 20px 20px 0px 0px;}

    Vá alterando os valores de margin até que o banner ocupe a posição desejada.

    Meu modelo, antes e depois da alteração:

    Antes
    Depois
    Leia Mais

    Novidade: editar imagens nos posts com Picnik

    Hoje, enquanto preparava o tutorial sobre imagens na sidebar, notei um novo recurso que, ao que parece, está disponível por enquanto apenas para o Blogger in Draft. É a integração do site Picnik, (um site de edição de imagens online) com o Blogger. Ao adicionar uma imagem no post e clicar sobre ela, aparece a opção Editar Imagem, como abaixo:


    Clicando no link, uma janela do Picnik se abre com várias alternativas de edição, como Autocorreção, Girar, Cortar, Olhos Vermelhos e Cores.
    Clicando em Criar vem a melhor parte: você poderá inserir molduras, textos, adesivos e diversos efeitos, como sépia, preto e branco, vinheta e fosco.

    Painel do Picnik
     Alguns recursos só estão disponíveis para a versão premium (US$ 2,08 por mês) mas com a ferramenta gratuita é possível 'brincar' bastante.
    Imagem original

    Moldura, adesivo (balão) e texto na imagem
    A única coisa chata até agora é que não consegui aplicar efeitos em mais de uma imagem por post. Se alguém souber como fazer isso e quiser compartilhar nos comentários, agradeço :)
    Leia Mais

    Colocar imagem nos títulos da sidebar - Novos Modelos

    Este tutorial se aplica aos novos modelos de templates (Designer de Modelo).

    Colocar uma imagem junto aos títulos dos widgets da sidebar nos novos modelos do Blogger é bastante simples e isso pode ser feito através do painel Designer de Modelo.

    1- Clique no link Design e depois em Designer de Modelo;
    2- Já no painel escuro que se abre, clique em Avançado (última opção do menu à esquerda);
    3- Clique em 'Adicionar CSS' (também última opção da lista);
    4- Na caixa em branco que se abre, acrescente o seguinte código:
    .sidebar .widget h2{background: url(aqui a url da imagem) no-repeat center right; padding: 10px 0px;}

    center right determina que a imagem apareça à direita do título na sidebar, como na imagem abaixo (estrela):

    Imagem da estrela à direita do título 'Lista 01'

    Note que ao inserir o código CSS a visualização do resultado é imediata. Para salvar, basta clicar em Aplicar ao Blog

    Você pode salvar sua imagem no próprio Blogger (Picasa) seguindo estes passos:

    1- Clique em Nova Postagem e hospede a imagem já salva em seu computador, dentro da área do post;

     2- Clique em Editar HTML, copie a url da imagem e transfira para o código acima (no lugar de 'aqui a url da imagem');
     
    3- salve o post como Rascunho. Você poderá também excluir esta postagem posteriormente (sem clicar na opção de excluir a imagem).

    Neste exemplo, além de acrescentar a imagem, coloquei uma borda dupla abaixo do título:


    E o código acrescentado foi:

    .sidebar .widget h2{background: url(http://4.bp.blogspot.com/-BMkR1jw_tVo/TbVcNgzWq1I/AAAAAAAATRw/__D2bm8Vf8w/s1600/star.png) no-repeat 99% 0%; padding: 8px 0px 2px;border-bottom: 3px double #fff; margin: 3px 0px; }
    Se você quiser acrescentar imagens diferentes para cada widget, é preciso primeiro saber o nome que cada um recebe. Para isso, clique em Editar HTML e procure no código do template
    trechos semelhantes a:
    <b:widget id='CustomSearch1' locked='false' title='Pesquisar' type='CustomSearch'/>


    o modelo será sempre assim, iniciando por <b:widget id= e o que vier logo depois, entre aspas, é a id do elemento que foi acrescentado na sidebar; neste caso, CustomSearch1, que é o widget de Pesquisa. Agora que já sei a id correta, volto para Designer de Modelo e em Avançado -> Adicionar CSS, coloco o seguinte código:
    #CustomSearch1 h2{background: url(url da imagem) no-repeat 99% 0%;padding: 18px 0px 5px;}

    Resultado:
    Uma imagem para cada widget

    Note que no primeiro caso que expliquei lá no começo do tutorial, determinamos estilo para todos os títulos da sidebar, com .sidebar .widget h2 e neste último caso estamos especificando um widget em particular.O que foi determinado no primeiro caso prevalecerá sobre todos os outros e por isso a borda branca aparece abaixo do título. Caso não queira que a borda apareça em um determinado widget, basta acrescentar border:none;
    Leia Mais

    Links para o final de semana IX

    Como anunciei no meu último post, voltarei a publicar, todas às sextas-feiras, uma seleção de links interessantes enviados pelos leitores e alguns que eu mesma selecionei durante a semana, sobre diversos assuntos.

    A Vida sobre Rodas enviado por @edvandojr

    Saiba se algum blog esta copiando seus posts enviado por @blogsentreblogs

    Melanoma, a prevenção é o melhor remédio por @pharispoa

    A história de Natanna enviado por @profBauru

    Cotas raciais: solução para as desigualdades sociais? indicado por Caipira Zé Do Mér 

    Links externos ou internos? enviado por Ana Karenina

    Como enviar atualizações de páginas do Facebook para o Twitter 

    Adicionando o link “Tweet This!” ao final das postagens

    Text Fade Out con jQuery

    Concurso de contos Conto vidas via @Teilor
     
    110 Free WordPress Themes For 2011

    A revista feminina da Al-Qaeda e a mídia como reflexo da sociedade.

    Brasil: preconceituoso com orgulho!

    Mulheres, Machos e Blogs de Sucesso via @AnaKinT

    Quer dividir com os outros leitores do TNB um texto ou tutorial bacana que você encontrou? Quer divulgar aqui as suas próprias publicações? Envie quantos links desejar através do formulário de contato ou twitter.

    Bom final de semana! :)
    Leia Mais

    Voltando com o 'links para o final de semana'


    Quando criei o TNB em 2006, existiam bem poucos metablogs e as informações disponíveis partiam sempre dos mesmos cinco ou seis autores. De lá para cá, muitos blogs novos foram surgindo e muitas informações importantes e interessantes ( para usuários do Blogger ou não ) merecem destaque e divulgação. Por isso, decidi voltar com o 'Links para o final de semana' e você pode colaborar com indicações de textos e tutoriais interessantes que encontra por aí. Basta enviar o link e o título do post pelo formulário de contato para que ele seja analisado. Você poderá também enviar os links através do twitter.

    Segundo as estatísticas do Blogger, o TNB tem em média 500 mil visualizações de páginas (pageviews) por mês e acho justo compartilhar esta audiência com blogueiros talentosos que às vezes  podem encontrar dificuldades na divulgação de suas ideias e conteúdos.

    Então, se você deseja colaborar, o que desde já agradeço muito, saiba apenas que:
    • Devem ser indicados os links dos posts, não da home dos blogs (nada do tipo: visita aê e o link do blog);
    • Posts que indicam outros posts não vale, certamente divulgarei a fonte original;
    • As indicações não serão restritas a metablogs, vale qualquer assunto interessante. Basta que o texto seja original.
    Conto com a colaboração de vocês para conhecer e divulgar outros blogs :)
    Leia Mais

    Problemas com o link 'Postagens Anteriores' erro bX-67oaj1

    Hoje pela manhã recebi um email de uma pessoa que usa o Template Oggi reportando-me um erro ao clicar no link 'Postagens Anteriores': o resumo de postagem não funcionava nesta página. Aqui mesmo no TNB ocorria o mesmo problema. No twitter, alguns relataram que, ao clicar no mesmo link, aparece erro bX-67oaj1 e não é possível visualizar os posts anteriores. Encontrei na página de ajuda do Blogger (em inglês) uma solução postada pelo usuário Dmusicteam  que resolveu o problema, pelo menos aqui no TNB.

    Se você usa uma imagem no ligar dos links 'Postagens Anteriores' e 'Postagens Recentes':

    1- Clique em Editar HTML;
    2- Clique em Expandir Modelo de Widget;
    3- Procure pelos trechos:

    <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' target='_blank'> <img src='url da sua imagem'></a>
    e 
    <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'> <img src='url da sua imagem'> </a> 
    e substitua por:

    <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><img src='url da sua imagem'/></a>
     e
    <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><img src='url da sua imagem'/> </a> 

    Se você não utiliza imagem, substitua os trechos:

    <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' target='_blank'><data:newerPageTitle/></a>
     e
    <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> 
    Por estes códigos:
    <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a>
    e
    <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a>

    Importante!
    Antes de salvar as mudanças, clique em Visualizar e no link (ou imagem) 'Postagens Anteriores, para ver se tudo voltou ao normal. Só então salve. Se ocorrer algum problema, clique em 'Limpar Edições".
    Leia Mais

    Como colocar jogos em flash no blog


    Disponibilizar jogos em flash na sua página do Blogger é bastante simples. Há casos em que um site oferece gratuitamente o arquivo swf para baixar e basta fazer o download do jogo e hospedar no Google Sites, como mostra este tutorial.
    Em certos casos, porém, alguns sites de jogos permitem que os mesmos sejam publicados em outras páginas mas não disponibilizam links para download. Neste caso você deve usar o iWisoft Flash SWF, um software gratuito que permite copiar as animações em Flash (.swf) de qualquer página. Depois de instalado, abra o programa e cole a url da página onde se encontra o jogo, escolha a pasta de destino e clique em Download. Feito isso, hospede o arquivo do jogo no Google Sites como mostra o tutorial.
    Sites como 123Bee e Mochimedia (é necessário fazer registro neste último) disponibilizam os jogos para download gratuitamente, dispensando o uso do iWisoft.
    Depois de hospedar o jogo no Google Sites, abra uma postagem, clique em Editar HTML e cole o seguinte código:

    <embed height="550px" name="plugin" src="aqui você colocará o link do jogo hospedado no google sites" type="application/x-shockwave-flash" width="720px"></embed>

    No Google Sites, clique com o botão direito do mouse sobre download e copie o link:


    O link será semelhante à esse:
    https://sites.google.com/site/osmeusjogos73/jogos/temple-escape.swf?attredirects=0&d=1

    O que você deve fazer é apagar toda a parte em vermelho, que vem depois de .swf. Feito isso, cole a url dentro do código mostrado acima, ficando assim:

    <embed height="550px" name="plugin" src="https://sites.google.com/site/osmeusjogos73/jogos/temple-escape.swf" type="application/x-shockwave-flash" width="720px"></embed>

    Height define a altura da tela do jogo e width a largura. Você pode mudar estes valores para que se encaixem na largura do seu post.

    O resultado :

    Leia Mais

    Template Feminina



    Template com menu horizontal, slide, postagens resumidas e posts relacionados.
    Apesar de usar o modelo 'antigo' para criar este template, alguns detalhes podem ser modificados em Designer de Modelo (como algumas fontes).

    Sobre o template: Ano passado eu conheci o blog SimplexDesign e tomei conhecimento do uso de um script que possibilitava mostrar na página inicial, não os últimos posts publicados, mas sim os últimos posts publicados por categoria (marcadores) escolhidas. A ideia de mostrar na página inicial somente os posts de determinados marcadores me pareceu muito interessante e comecei a trabalhar no sentido de entender e aplicar o script. Porém, ele demostrava problemas de exibição no navegador Internet Explore e sem conseguir obter suporte do criador/distribuidor do script, procurei a ajuda de amigos blogueiros. Pude, então, mais uma vez contar com a incrível colaboração do meu amigo JMiur do blog Vagabundia, que novamente me 'salvou' e fez suas magias, me entregando um script limpo e enxuto, pronto para uso. JMiur, mais uma vez, obrigada :)

    Enfim, como expliquei acima, neste template o que será exibido na página inicial serão os posts relacionados a determinados marcadores que você selecionará dentro do script. Para tanto, procure dentro do código do template o seguinte trecho (clique em Expandir Modelo de Widget e use Ctrl+F para encontrar com facilidade):

    imgr = new Array();
    imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
    showRandomImg = true;
    aBold = true;
    summaryPost = 60; // numero de caracteres do resumo
    summaryTitle = 25; //numero de caracteres do titulo
    numposts = 3; // numero de resumos por categoria

    var contarlabels = 0;
    labelname = new Array("Desfiles","Gastronomia","Moda","Beleza");
    labeltitle = new Array("Desfiles","Gastronomia","Moda","Beleza");

    Em vermelho está a url da imagem que aparecerá quando não houver imagens no post. Você pode colocar aqui a url de qualquer outra imagem que preferir.
    Onde está em negrito (Desfiles, Gastronomia, etc) substitua pelo nome dos marcadores que você deseja exibir na página inicial. Cuidado para não remover nenhuma aspa ou vírgula!!

    Também procure por:

    salida += '<div class="featured">';
    salida += '<h3>' + labeltitle[contarlabels] + '</h3>';
    salida += salidainner;
    salida += '<b><a href="http://templatefeminina.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">More '+ labelname[contarlabels] +'</a></b>';
    salida += '</div>';
    document.write(salida);
    contarlabels ++;
    }

    Onde está em negrito, substitua pela url do seu blog. Mais abaixo encontre os trechos:

    <script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Desfiles?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

    <script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Gastronomia?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

    <script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Moda?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

    <script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

    Aqui você vai substituir o link do templatefeminina pela url do seu blog e em seguida colocará o nome dos marcadores (substituindo Desfiles,Gastronomia, Moda, Beleza). Note que aqui os marcadores devem aparacer na mesma ordem que você colocou no trecho lá em cima, entre parênteses, como no meu exemplo.

    Para aumentar o número de posts a serem exibidos em cada categoria, mude a numeração aqui:
    numposts = 3; // numero de resumos por categoria
    e aqui:
    <script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'/>

    Obs: Se o número de postagens de um marcador for menor que o número determinado no script, nada aparecerá. Por exemplo, se estiver determinado que apareça 3 posts por marcador e você só tiver um post publicado com aquele marcador, não aparecerá nenhum. O número de posts deve ser igual ou maior.

    Slide: no código está destacado o trecho relacionado ao slide de maneira bastante explicativa:

    <!--INICIO DO SLIDE-->

    <div id='s3slider'>
    <ul id='s3sliderContent'>
    <li class='s3sliderImage'>
    <a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
    <span>COLOQUE AQUI A LEGENDA<br/>
    </span>
    </li>

    <li class='s3sliderImage'>
    <a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
    <span>COLOQUE AQUI A LEGENDA<br/>
    </span>
    </li>

    <li class='s3sliderImage'>
    <a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
    <span>COLOQUE AQUI A LEGENDA<br/>
    </span>
    </li>

    <li class='s3sliderImage'>
    <a href='COLOQUE AQUI O LINK DO POST'><img src='COLOQUE AQUI O LINK DA IMAGEM'/></a>
    <span>COLOQUE AQUI A LEGENDA<br/>
    </span>
    </li>

     <!--FIM DO SLIDE-->

    O tamanho das imagens devem ser de  610px (largura) e 310px (altura).


    Antes de baixar o template, por favor, leia as explicações e atente para o fato de que neste modelo, na página inicial, só aparecerão os posts relacionados aos marcadores que você determinar no script.

    Para colocar os links no menu, crie uma lista de links e arraste para o espaço abaixo do cabeçalho.

    Quero aproveitar e deixar um obrigado ao Fernando do Blogueiros na Web. Apesar de não estar usando o script como ele modificou, não posso deixar de agradecer o tempo que dedicou tentando me ajudar.



    EDIT 14/03/2011 : um novo link para download está disponível com os scripts para o slide dentro do código do template.

    EDIT 21/03/2001: um novo link para download está disponível com uma correção para o problema de duplicidade de texto nas páginas estáticas. Meu agradecimento ao Raphael Viper que me alertou sobre o problema :)
    Leia Mais
    Assinar: Postagens (Atom)