Templates Novo Blogger

Remover menu de estilos nos templates de Visualizações Dinâmicas

noreply@blogger.com (Ariane) — 2014年8月28日 16:31:00 +0000

O título é longo mas a questão é bem simples: os templates de Visualizações dinâmicas (ou Dynamic Views) são muito interessantes e tenho testado alguns recentemente, depois de tanto tempo afastada dos blogs. Confesso que a princípio as mudanças pouco me chamaram a atenção mas ultimamente tenho me interessado pelo assunto.

Mas tem uma coisa que não me agradou muito nestes novos templates: a opção dada ao leitor de modificar a visualização do blog. Através de um menu drop down o visitante pode escolher como ver seu blog, que muitas vezes adaptamos para ser visto de uma determinada maneira e não de outra. Mas é possível esconder esta opção? Andei pesquisando e encontrei uma solução no excelente Mayura4ever

O Blogger permite que o visitante altere a visualização do blog através de opções num menu drop down

Então vamos ao que interessa: como esconder o menu com opções de visualizações dos templates dinâmicos.

Se você não tem Páginas estáticas em seu blog, siga estes passos:

1- Clique em Modelo e Personalizar;
2- Clique na opção Avançado e em Adicionar CSS;
3- Cole o seguinte código na caixa:

#header .header-drawer { display: none; }

Se você tem Páginas estáticas no seu blog:

1- Siga os mesmos passos da primeira opção mas cole este código:

#header #views { display: none; }
#header #pages:before { border-left: 0px; }
#header #pages { margin-left: 14px; }

Salve as alterações. Seu blog deve ficar desta maneira:

Passos:

1- clique em Modelo, Personalizar

2- Clique em Avançado e Adicionar CSS. Cole no quadro o código CSS

Lightbox do Blogger: O Retorno

noreply@blogger.com (Ariane) — 2011年10月13日 23:49:00 +0000

Hoje foi apresentado mais um capítulo da novela Lightbox do Blogger...

No primeiro capítulo o efeito surgiu do nada e desagradou muita gente, principalmente por que não havia maneira de desativá-lo. No capítulo dois, depois de muitas reclamações dos usuários, o recurso foi suspenso. Agora retorna, mas com a sensata opção de desativá-lo, contentando Gregos e Troianos.

Se você Não deseja utilizar o efeito Lightbox nativo do Blogger, vá em Configurações -> Formatação e procure pelo trecho:

Depois de selecionar Não, desça toda a página e salve a alteração.

Blogger e o efeito Lightbox

noreply@blogger.com (Ariane) — 2011年9月16日 13:18:00 +0000

Efeito Lightbox nativo do Blogger

Ontem um leitor entrou em contato comigo para se queixar que, de uma hora para outra, todas as imagens do seu blog abriam de 'maneira estranha'. Ao verificar o blog, notei que o efeito Lightbox se aplicava à todas elas e que ele não havia colocado nenhum código no template para isso. Uma olhada no código fonte mostrou que o efeito era nativo do Blogger e alguns de vocês já devem ter notado o mesmo em seus blogs: ao clicar nas imagens elas se abrem expandidas sobre um fundo escuro e no rodapé da página aparece miniaturas de todas as imagens do post. Bem, nem eu nem o leitor que me procurou apreciamos o efeito e uma corrida até o Fórum de Ajuda do Blogger (em inglês), mostrou que muitos outros usuários estavam insatisfeitos. Uma coisa é você buscar por um efeito em sua página, outra bem diferente é ele ser imposto e até agora o Blogger não ofereceu nenhuma maneira de desativar o Lightbox (o que eu acredito que irá ocorrer em breve - oremos).

De qualquer maneira, aqui vai um hack para impedir o efeito, desenvolvido por Mark, do blog Code from English Coffe Drinker. Eu testei em alguns dos meus blogs e funcionou perfeitamente.

Copie o código abaixo e cole imediatamente antes da tag </head>:

<script type='text/javascript'>
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
};
}
}

if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Salve a modificação e faça um teste, clicando nas imagens dos seus posts.

Pelo menos por ora, foi a única solução encontrada.

Template Super Clean

noreply@blogger.com (Ariane) — 2011年9月01日 02:40:00 +0000

Ver Demo| Download

página interna

O Template Super Clean contém:

Menu Horizontal

para editar os links do menu, porcure por:

<div id='menu'>
<ul>
<li class='selected'>
<a href='Link 01'>Home</a></li>
<li><a href='Link 02'>Tutoriais</a></li>
<li><a href='Link 03'>Portfolio</a></li>
<li><a href='Link 04'>Contato</a></li>
</ul>
</div>

Slide

este modelo de slide encontrei no blog Mundo Blogger , onde vocês encontrarão um detalhado tutorial sobre como editá-lo. Para editar os links e imagens, procure por:

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

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='url do post' rel='1'><img alt='' src='url da imagem 01'/></a>

<a href='url do post' rel='2'><img alt='' src='url da imagem 02'/></a>

<a href='url do post' rel='3'><img alt='' src='url da imagem 03'/></a>

</div></div>
<div class='paging'>
<a href='' rel='1'>1</a>
<a href='' rel='2'>2</a>
<a href='' rel='3'>3</a>
</div></div>
</div>
</b:if>

se não desejarem exibir o slide, basta apagar todo o código acima.

Resumo de postagens automática na Home e páginas de Marcadores e Arquivos. Quando não houver imagem no post, uma imagem substituta aparecerá.

Efeito Lightbox nas imagens. (prettyPhoto)

Para utilizar o efeito, siga as explicações do post do template Diary.

Ao final de cada postagem é exibida uma caixa com o avatar e informações sobre o autor. Para editá-la, clique em Expandir Modelo de Widget e procure pelo trecho abaixo:

<div class='post-autor'>
<span class='autor-avatar'><img src='url do avatar'/></span>
<span class='autor-descrição'>

<h4>Título</h4>

<p>Descrição do autor.......................</p>

</span>
</div>

Os scripts para o funcionamento do efeito Lightbox-prettyPhoto (que acompanham o arquivo xml) devem ser hospedados e suas url's colocadas, substituindo o que está em negrito:

<script src='http://jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://jquery.prettyPhoto.js' type='text/javascript'/>
<script src='https/prettyphoto/custom.js' type='text/javascript'/>

Eu hospedei meus scripts no google sites e funcionam perfeitamente, mas, ao que parece, não funcionam para quem tem domínio próprio, por isso recomendo que busquem a melhor alternativa para cada caso.

De maneira nenhuma o link do Templates Novo Blogger (TNB) deve ser alterado ou retirado do rodapé do template.

Espero que apreciem :)

Template Diary

noreply@blogger.com (Ariane) — 2011年8月22日 21:44:00 +0000

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

Demo | Download

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:

<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!'>"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>

altere o que está em negrito por suas url's

Twitter Updates
procure por:

<div id='twitter'>
<h3>Latest Tweets</h3>
<script>
$(function(){
$("#twitter").tweet({
avatar_size: 24,
count: 3,
username: "ArianeN_",

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbytvBtcxMxQxTWXC25liV13tnB7i8FDK3PgsyA0OF2GcEi3dHW7gQC02g55Bv8yNIrbWPsPbNNQUOUwYcRvtBIDu9D7nk_BRWJtVm07LsFUvAxXLz6IBo1vh9q6pLp5INhHj5iDPR2aYE/s1600/bg3.jpg" imageanchor="1" rel="prettyPhoto"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbytvBtcxMxQxTWXC25liV13tnB7i8FDK3PgsyA0OF2GcEi3dHW7gQC02g55Bv8yNIrbWPsPbNNQUOUwYcRvtBIDu9D7nk_BRWJtVm07LsFUvAxXLz6IBo1vh9q6pLp5INhHj5iDPR2aYE/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.

Links para o final de semana - Icones

noreply@blogger.com (Ariane) — 2011年8月12日 20:42:00 +0000

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 :)

Winter WritersTM Icon set

Facebook, Twitter & RSS Feed Icons

"Cutie" Web Icon Set

Free Vector Net Icon Set

Mail Icons / Elements

IC Minimal Icon Set

Vintage Web icon set

Google Plus Free Icon Pack

Cake style

Social icons

This is ART Icons

Lista de Postagens Populares na Horizontal

noreply@blogger.com (Ariane) — 2011年8月10日 17:27:00 +0000

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'>

</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.

Template Pin-Up 2

noreply@blogger.com (Ariane) — 2011年8月05日 18:26:00 +0000

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

Ver Demo

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:


<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>


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

Template Blogger Games

noreply@blogger.com (Ariane) — 2011年7月26日 21:16:00 +0000

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).

Ocultando elementos das páginas internas

noreply@blogger.com (Ariane) — 2011年7月15日 00:42:00 +0000

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 == "item"'>
<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 == "item"'>
<style>
.home{display:none}
</style>
</b:if>

<b:if cond='data:blog.pageType != "item"'>
<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 ;)

Retirar marcadores dos posts

noreply@blogger.com (Ariane) — 2011年6月21日 18:15:00 +0000

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 != "true"'>,</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.

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

noreply@blogger.com (Ariane) — 2011年5月17日 16:26:00 +0000

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
   $("#back-top").hide();

   // fade in #back-top
   $(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 100) {
               $('#back-top').fadeIn();
           } else {
               $('#back-top').fadeOut();
           }
       });

       // scroll body to 0px on click
       $('#back-top a').click(function () {
           $('body,html').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.

Links para o final de semana X

noreply@blogger.com (Ariane) — 2011年4月29日 22:39:00 +0000

Seguem os links para o final de semana. Alguns foram escolhidos por mim, outros enviados por colaboradores via twitter ou através do fomulário de contato.

Gostou da ideia? Envie links também, eles serão publicados aqui toda sexta-feira.

* Por que meu blog não recebe comentários?

* A evolução do cinema em casa

* Cancer de Pulmão, outros esclarecimentos

* MigraKut - Tenha também suas fotos do Orkut no Facebook

* Navegando entradas de una etiqueta usando JSON

* Sombras sin imágenes

* A morte, vida e desânimo. Ao amanhecer vermelho.

* ImprenÇa vai dar o caneco, outra vez!

* Sony lançará notebook Vaio VPC-F215FB no Brasil, o primeiro com 3D

* Paciência para Chrome – World of solitaire

* Solução bem criativa para pouco espaço na sala

* Qual a diferença entre o Wordpress.org e Wordpress.com?

* Venda seus produtos virtuais pelo preço de um tweet

* Photopic Sky Survey

* Lendo um livro do Dan Brown e aprendendo como escrever

* 5 Esculturas inacreditáveis feitas de palitos

* Selos em blogs: Postar ou não?

* Como Faz: Retrospectiva Páscoa Como Faz 2011

* 7 coisas tóxicas que você não deveria jogar no lixo

Dividir o Header (cabeçalho) - Novos Modelos

noreply@blogger.com (Ariane) — 2011年4月29日 17:26:00 +0000

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

Novidade: editar imagens nos posts com Picnik

noreply@blogger.com (Ariane) — 2011年4月25日 16:04:00 +0000

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 :)

Colocar imagem nos títulos da sidebar - Novos Modelos

noreply@blogger.com (Ariane) — 2011年4月25日 12:41:00 +0000

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;

Links para o final de semana IX

noreply@blogger.com (Ariane) — 2011年4月08日 17:12:00 +0000

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! :)

Voltando com o 'links para o final de semana'

noreply@blogger.com (Ariane) — 2011年4月06日 20:04:00 +0000

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 :)

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

noreply@blogger.com (Ariane) — 2011年3月28日 19:23:00 +0000

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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' target='_blank'> <img src='url da sua imagem'></a>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.

instanceId + "_blog-pager-older-link"' 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>

<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-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' 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>

<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".

Como colocar jogos em flash no blog

noreply@blogger.com (Ariane) — 2011年3月11日 17:12:00 +0000

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 :

Template Feminina

noreply@blogger.com (Ariane) — 2011年3月01日 18:29:00 +0000

Demo | Download

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&orderby=published&alt=json-in-script&callback=showrecentposts'/>

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

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

<script src='http://templatefeminina.blogspot.com/feeds/posts/default/-/Beleza?max-results=3&orderby=published&alt=json-in-script&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&orderby=published&alt=json-in-script&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:



<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>



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 :)

Estilo para os titulos da sidebar

noreply@blogger.com (Ariane) — 2010年11月29日 22:49:00 +0000

Antes de tudo, preciso avisar que este tutorial serve para os modelos de layout (não testei os novos modelos) e foi usado um template Mínima.

A classe a que pertencem os títulos da sidebar é h2 e no template Mínima existe um trecho do código para h2, que engloba os títulos da sidebar e a data dos posts:

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}

Mas você pode dar outros estilos para os títulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css.

Sidebar sem estilo:

Primeiro, localize no código CSS, o trecho:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;}

Logo depois, acrescente:

.sidebar h2{ }

é entre as chaves que você irá acrescentar o estilo que pretende dar aos títulos da sidebar. Por exemplo:

.sidebar h2{
font-size: 22px;
color: red;}

resultado:

Você pode acrescentar aqui estilos para a fonte e cores do plano de fundo (ou até mesmo uma imagem para o background). Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:

.sidebar h2{
font-size: 17px;
color: #777e95;
font-family: Tahoma;}

.sidebar h2:first-letter {
font-family:Tangerine;
color:#8262ae;
font-size:38px;
font-weight: bold}

resultado:

Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):

.sidebar h2{
width: 320px;
height: 50px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png) no-repeat;
}

resultado:

Note como os títulos não ficaram centrados (estão muito 'para cima'). Então, não basta colocar a medida da imagem, é preciso usar um pouco de padding:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png) no-repeat;
padding-top: 15px;}

resultado:

Veja que eu subtrai de height o valor que coloquei em padding-top.

Mas o titulo ainda está 'grudado' no limite à esquerda da imagem. Preciso usar padding aqui? Não. Basta acrescentar text-indent:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png) no-repeat;
padding-top: 15px;
text-indent: 10px;}

resultado:

Agora eu quero usar um ícone diferente para cada título da sidebar. Como expliquei aqui, procure o id de cada widget que acrescentou na sidebar. No meu caso, são:

Anote as ID's e acrescente lá no CSS:

#CustomSearch1 h2{
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzRDtTMV6aQKg0Xwgz4j3sTfES7qHWfnHbc2yHnQiy0VJyWTU6njLv-Rt5rZeNmEQ9Lc8135TmHzg8g1C8cBahZZknegB0xx-v5dHJum-lX1Am6NxwUS-It9F25UflQMrcX1OUfRP-o57/s1600/Find+Search_32.png) no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

Veja que já não vale mais o background que coloquei em .sidebar h2. O que fiz aqui foi colocar uma cor de fundo e o ícone posicionado, 10px de distância do topo do espaço ocupado pelo título e 280px de distância da esquerda, além de uma borda arredondada de 5px (código em vermelho):

Faça o mesmo para cada widget da sidebar e em cada um coloque uma imagem e cor diferente:
#CustomSearch1 h2{
background: #DAF2FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzRDtTMV6aQKg0Xwgz4j3sTfES7qHWfnHbc2yHnQiy0VJyWTU6njLv-Rt5rZeNmEQ9Lc8135TmHzg8g1C8cBahZZknegB0xx-v5dHJum-lX1Am6NxwUS-It9F25UflQMrcX1OUfRP-o57/s1600/Find+Search_32.png) no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px; }

#Profile1 h2{
background: #E3FDB3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2QUpRN_0sFIQBJbk9kXYnQ7o4GLPqQxXVxzdtUEYv7LO4itPkPohq0wAVCU7Dpsj5h8cvPxm6TmD6aDHpBRrhsUZBtJZAZitiyfcoJLOybFcrVnJJaQ2DnVIcMAjf5Gf78yZDYLGa_Ufo/s1600/Buddy+Chat_32.png) no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

#Label1 h2{background: #FCF1B4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9gtHhQFzNqcnx-ijzlxRSTCWAapn9Vng-vd83UKY9_RpXzYVp7_unNuNhHULyjOjWnu-hofLj7LW5NZkHn-FHDRGsQrsdQfkOl-_mVNm9mM2u___usR7boITRwCYT58qXJ7xAVSb7ZNx/s1600/Tag_32.png) no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

resultado:

Invertendo a posição do ícone:

#CustomSearch1 h2{
background: #DAF2FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDzRDtTMV6aQKg0Xwgz4j3sTfES7qHWfnHbc2yHnQiy0VJyWTU6njLv-Rt5rZeNmEQ9Lc8135TmHzg8g1C8cBahZZknegB0xx-v5dHJum-lX1Am6NxwUS-It9F25UflQMrcX1OUfRP-o57/s1600/Find+Search_32.png) no-repeat 4px 10px;
text-indent: 36px;
-moz-border-radius: 5px;
border-radius: 5px; }

Para completar, veja este tutorial no blog Vagabundia, que ensina como usar span para dar estilos diferentes para um mesmo título.

Template Knitting

noreply@blogger.com (Ariane) — 2010年11月24日 00:28:00 +0000

Duas colunas, espaço para menu horizontal no topo (crie uma lista de links e arraste para o local indicado).

Demo | Download

Como ocultar a sidebar na home do blogger

noreply@blogger.com (Ariane) — 2010年10月27日 03:34:00 +0000

Não é de hoje (não mesmo) que tento encontrar uma maneira de esconder a sidebar da home no Blogger. Minhas tentativas se iniciaram meses atrás, buscando por tutoriais, scripts e macetes. A única coisa que encontrei sobre o assunto era como esconder determinados widgets da home (ou de qualquer outra página), como explicam os tutoriais dos seguintes blogs (dentre muitos outros):

Templates e Acessórios
IceBreaker
UsuarioCompulsivo
MundoBlogger
Bloggersphera

Mas não era isso que eu queria. O que eu queria era que toda a sidebar ficasse oculta apenas na home, aparecendo nas páginas internas normalmente, ao lado da postagem. Deixei de converter muitos temas do wordpress para o blogger por não encontrar maneira de fazer isso. Hoje, enfim, descobri como.

Para que vocês entendam a dificuldade, se eu optava em colocar toda a sidebar dentro de uma condicional que determinasse que ela não deveria aparecer na home, ela realmente não aparecia, porém, também não aparecia na página 'Elementos de Página' e ai não havia como incluir, excluir, movimentar widgets. Não me adiantava nada lançar um template que impedisse os usuários de colocarem widgets na sidebar.

Hoje, conversando no twitter sobre o assunto, a Iara (@iarana) me apontou um template que tem esta caracteristica: a sidebar aparece apenas nas páginas internas. Instalei o template e constatei que o problema também se apresentava: a sidebar havia sumido da página 'Elementos de Página', inutilizando, de certa forma, a coluna.

Bom, resumindo a novela, continuei insistindo no assunto hoje, por que estou trabalhando para converter este template do Wordpress para o Blogger (note que toda a home é ocupada por resumos de postagens e quando se clica em Style no menu, tendo acesso ao post completo, a sidebar aparece.), e finamente encontrei uma solução bastante simples:

Como retirar a sidebar da home do blog

Primeiro é preciso usar uma condicional. Após a tag ]]></b:skin> coloque o seguinte trecho:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#sidebar-wrapper{display:none}
</style>
</b:if>

Traduzindo em miúdos, determinei que a sidebar não apareça (display:none) se a condição for a página principal do blog (homepage).

Visualize e note que a sidebar realmente desaparece da home do blogger. Agora vá a página 'Elementos de Página' e veja que a sidebar não aparece ali.
Volte ao código do seu template e antes de body{ (logo no começo dos códigos CSS) acrescente o trecho:

body#layout #sidebar-wrapper{display:block;margin:0px;float:right;}

Salve e torne a visitar a página 'Elementos de Página'. Veja que a sidebar reapareceu e ainda assim, não aparece na home do blogger, apenas nas páginas internas.
body#layout é o código para modificar a estrutura da página 'elementos de página', como já publiquei aqui.

Testei no Firefox, Chrome e IE8.

Meus agradecimentos aos meus amigos do Twitter que tentaram hoje me ajudar :)

Importante: Sobre as imagens dos Templates

noreply@blogger.com (Ariane) — 2010年10月20日 13:24:00 +0000

Estou recebendo mensagens de pessoas que usam os templates que modifiquei com a queixa de que hoje perceberam que as imagens dos mesmos não aparecem no blog; no lugar delas uma mensagem do TinyPic, serviço de hospedagem que eu sempre recomendei e confiei:

No final de setembro, sem mais nem menos, o TinyPic resolveu fechar as portas para os usuários estrangeiros, assim, deixando todo mundo na mão, conforme este post da Mamanunes: Tinypic - Fechando para Estrangeiros. Depois o Tinypic voltou atrás e liberou os links das imagens novamente. Pelo menos no meu caso. E eu fiquei tranquila, tudo voltou ao normal, não me abalei.
Eis que fui acessar minha conta hoje para ver qual era a novidade e me deparo com uma mensagem que diz que minha conta foi banida! Sem motivo, sem explicações, sem avisos, nada. Baniram e pronto. O Tinypic fez de conta que reabriu para estrangeiros para logo depois banir a conta de vez. Muito bonito. Tomem cuidado.

Ok, muita calma agora. O jeito é hospedar tudo no Blogger (o que eu já devia ter feito antes) e alertar vocês para que façam o mesmo. Quando você faz o download de um template, junto com o código, na pasta zipada, estão todas as imagens usadas no template. Hospede as imagens no Blogger (como a Mamanunes ensina no post que mencionei) e coloque os links nos locais correspondentes no template (geralmente o título da imagem já dá uma pista de onde deve ser colocada, por exemplo post li, outer-top, etc).

Peço desculpas a vocês, principalmente por ter continuado a confiar em um serviço que já vinha dando sinais de que iria me aprontar uma.