Dicas e Templates Mamanunes

Hoje é o Dia do Blogueiro Sabia?

mamanunes@gmail.com (MamaNunes) — Sat, 20 Mar 2010 12:32:00 +0000

Pois é. Tem dia pra tudo nesse mundo e eu já havia me esquecido dessa data. Ainda bem que a querida Cristiane Fetter do blog TÔ DOIDA me lembrou.

Engraçado, quando comecei a blogar em 2004, essas coisas eram importantes. Comemorar o dia do amigo, o dia da solidariedade, blogagem coletiva e os benditos "memes" que enlouqueciam a gente. Quase não haviam blogueiros. A maioria dos blogs eram de mulheres que escreviam seu cotidiano, poesias e postavam suas tarefas em Paint Shop, gifs, papéis de carta, coisas de mulher; o sucesso de um blog estava diretamente ligado as visitas e comentários constantes em blogs. Uma troca bem interessante, diferente de hoje com tantas redes sociais, Twitter, Facebook, Orkut e sei lá mais quantos outros, eu mesma "participo" de uns tantos mas confesso que é mais por curiosidade em saber como funciona.

Blogar para mim é quase um remédio. Fui usuária de drogas na "juventude transviada" e saí, com muita sorte, sem muitos arranhões mas meu corpo cobrou depois e eu enfrentei uma depressão seguida de crises de pânico quando entrei na menopausa. Essas crises me levaram a uma internação por 21 dias onde consegui recuperar minha saúde e auto-estima. Um dia entrei no Google, quase sem saber ligar o PC e digitei: "Quero falar com Deus" . Abriram-se várias páginas e a primeira que entrei foi "♥Amor em Links" que eu recomendo. Lá cliquei num banner que me levou a uma blogueira que desenhava templates a Heidi Shulz uma mulher excepcional e rara. Ela criou meu primeiro template em 2004. Daí eu tomei gosto pela coisa de personalizar blogs e compartilhar. Fui aprender a criar templates para o Zip.Net da Uol que tinha códigos muito complicados (hehe) e depois para o Blogger onde conheci a Ariane e não parei mais.

Quero incentivar quem queira criar seu espaço na Internet. Vai la moçada!!! Crie sua página, aprenda a escrever corretamente, comunique-se e faça parte desse mundo. Todos nós temos o direito de expressar nossas opiniões e idéias e essa é a sua oportunidade!

Encontrei o banner "Campanha Divulgue o Dia do Blogueiro" no Blog do The Beste .

Aos blogueiros amigos eu desejo um BOM DIA DE BLOGUEIRO!!! ♥

Find Ícons – O Maior Banco de Ícones da Web

mamanunes@gmail.com (MamaNunes) — Fri, 19 Mar 2010 17:48:00 +0000

O Find Icons é o mais completo buscador de ícones que eu conheço. São mais de 300.000 ícones.
Podemos encontrar exatamente o que procuramos, no tamanho e formato que queremos. Por exemplo : Se você procura um ícone para o Twitter, digita twitter na caixa de busca, certo? Na página com os resultados da busca você verá na coluna esquerda, todas as opções de fundo, filtro, modelo, etc….

Depois de escolher seu modelo você verá as opções de tamanho e formato (png, jpeg, etc.)

Se quiser buscar pelo Browse, encontrará os milhares de modelos de todos os autores

Outra possibilidade é transformar qualquer imagem do seu arquivo em ícone de qualquer formato. Clicando no botão “CONVERT” você faz o upload, da imagem, escolhe o formato e tamanho, clic em “Convert” e faça o download.

Podemos também fazer upload de nossas criações e enviar para o banco de dados do site.
Dê um pulinho lá e confira. Find Icons

Dica HTML para inserir uma imagem com link.
Hospede sua imagem no próprio Blogger ou num site tipo Tinypic . Depois edite o código abaixo.

<a href="ENDEREÇO DO LINK"><img src="ENDEREÇO DO ÍCONE"></a>

Para colocar um ícone na Sidebar, vá em “Layout” ► “Adicionar um Gadget” e escolha a opção “HTML/JavaScript”. Cole o código editado, dentro do box. Se quiser que seu ícone ou imagem fique centralizado, escreva assim:

<center>
<a href="ENDEREÇO DO LINK"><img src="ENDEREÇO DO ÍCONE"></a>
</center>

Prontinho.

Widget de Paginação com barra rolante (Scroll)

mamanunes@gmail.com (MamaNunes) — Fri, 19 Mar 2010 13:34:00 +0000

A widget de paginação numerada mais comum que vemos em sites e blogs tem essa aparência:

Esta que veremos aqui foi nossa querida @Gema nos apresentou. Criada por Abu Farhan , tem a mesma função mas com estilo diferente: Não mostra os quadradinhos de navegação nem o “Pages (…)”. Ela apresenta uma linha com os números e um efeito deslizante (scroll) . Segundo seu criador, o mais importante é que ela pode apresentar mais de 500 postagens. Você poderá ver seu funcionamento na HOME deste blog.

Vamos ao tutorial:

Vá em “Layout” ► “Editar HTML ► e
ANTES/ACIMA da tag ]]></b:skin> coloque o segunte código CSS:

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%;height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Depois procure pela tag </body> no final do template e cole o seguinte código (Script)

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Pronto ele já estará funcionando perfeitamente.

Mudanças de estilo que poderemos fazer, dentro do código CSS:

Mudar a cor da linha deslizante :

.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24; /* Mudar o código da cor */
}

Background da numeração da página onde estamos:

.paginator span strong {
background:#ff6c24; /*Mudar o código da cor*/
font-style:normal;
font-weight:normal;
}

Mudar a cor dos números

.paginator span {
display:block;
padding:3px 0;
color:#fff; /* Mudar a do número*/
}

Mudar a linha cinza

.paginator .scroll_trough {
width:100%;height:3px;
background:#ccc; /* Mudar a cor */
overflow:hidden;
}

A imagem (setinha) pode ser mudada. É recomendável hospedar em seu proprio blog ou em um site tipo Tinypic para garantir que ela continue lá =)

.paginator .scroll_knob {
http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif)

IMPORTANTE: No final do script vemos um outro script que convém descarregar e guardar para o caso de haver algum problema com o site de hospedagem e ele parar de funcionar. Teremos que hospeda-lo em outro site e trocar o endereço.
Copie o endereço abaixo e cole no seu navegador e faça o download para seu PC . Depois hospede-o em um site de sua preferencia. Leia ► “Sites de Hospedagem de Arquivos” da Rô Zancheta.
http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js

Fonte: @Gemablog (Espanhol)

Colocar um Botão flutuante “Follow Us” - Twitter

mamanunes@gmail.com (MamaNunes) — Thu, 18 Mar 2010 19:55:00 +0000

“Podemos colocar um ícone Twitter como imagem flutuante com posição fixa. Isso vai atrair o visitante para clicar nele. Você pode conferir a demo Emocutez Veja, na posição inferior direita da tela, há um gracioso ícone Follow Us onTwitter.”
Esse botão e o tutorial foram publicados por Ipiet e eu achei lindinho, além de fácil de colocar. Por isso traduzi para vocês.
Como fazer? Siga este passo a passo.

Vá em Layout e depois ► Editar HTML

Copie copie o código CSS abaixo

#floatingimage {
bottom:10px;
right:0px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#floatingimage a img {border:0}

Encontre o seguinte trecho:
]]></b:skin>
Cole o código copiado logo ANTES do trecho.
Agora copie o código HTML abaixo

<div id='floatingimage'>
<a href='http://twitter.com/SEUNOMETWITTER'><img src='http://4.bp.blogspot.com/_nxOMLf2KJwU/S6IbRYlit-I/AAAAAAAACH4/d0YhssDaSuk/s1600/follow%2Bus.png'/></a></div>

Cole ANTES da tag

</body>

Visualize e se estiver tudo bem e salve.

Prontinho.
O trecho marcado em azul é onde você escreve seu nome de usuário e em vermelho é o endereço da imagem que você poderá trocar por uma outra que mais combine com seu layout. Boa sorte!

Aprender e praticar CSS3

mamanunes@gmail.com (MamaNunes) — Tue, 16 Mar 2010 15:48:00 +0000

Para quem quer aprender um pouco sobre CSS3 há alguns sites onde se pode aprender praticando. Um deles é o “CSS Please” . Você só precisa entrar no site e vai encontrar um painel com os códigos do lado esquerdo, que podem ser editados alterando os valores. O resultado aparece simultaneamente num quadro ao lado direito. Pode-se mudar o ângulo, as cores, sombras, background. Tudo. É bastante interessante.

Se você quer aprender para fazer algumas mudanças no box avançado “Adicionar CSS” do novo Designer do Blogger, esse site vai te ajudar muito.

Esse outro é fantástico. Muito fácil mesmo. “css3 Generator” . Você acessa o site a pode brincar com tudo. Clic na setinha e abrirá um menu. Escolha o que quer fazer. No exemplo aqui eu escolhi o “Box Shadow” para criar efeito de sombra nas bordas do elemento. Depois digite os valores e escolha a cor para a sombra. Ao lado você vai vendo os resultados.

Bom não é? Pois é. Quando comecei a xeretar nos códigos do Blogger, não existia nada disso. Agora a gente tem essas facilidades além das mestras de plantão como a Helen do HTMHelen que tem uma lista de dicas . Ficou mais fácil.
Outros sites podem ser vistos no Vagabundia.

Designer Blogger – Tutorial Básico I

mamanunes@gmail.com (MamaNunes) — Sat, 13 Mar 2010 15:37:00 +0000

Aprenda passo a passo, com imagens, como criar um modelo exclusivo para seu blog no Blogger. Agora ficou mais fácil, vamos ver como funciona. Fiz esse tutorial principalmente para quem nunca nem tentou fazer alterações ou para quem ainda não tem seu espaço na Internet. O Blogger está dando um Show!
Para acessar o Designer de Modelo do Blogger você deve fazer seu login através do Draft Blogger . Crie um blog para fazer seus testes.

No painel clic na opção “Layout”

Clic no ícone "Designer do modelo"

Você poderá escolher entre vários modelos (nem sei quantos) com opção para personalização, porém para este tutorial, escolhi um modelo simples para se ter uma idéia.

1 - Clicando na aba “Plano de Fundo” podemos mudar a cor. Além das cores sugeridas você podemos escolher outras cores com nuances diferentes.
2- Clicando na aba “Layout” escolhemos a opção “Layout do corpo” e podemos escolher o número e a posição das colunas que quisermos, vai depender do tipo de conteúdo que se publica. Por exemplo: quem só publica textos ou fotos, poderá não ter nenhuma coluna.
3-Ainda em “Layout” clicando na opção “Layout do rodapé” podemos escolher o número e a posição das colunas que ficam no final do template.
4- Depois, na opção “Ajustar largura” podemos mover as setas para mais ou menos e assim teremos o template na largura que queremos, e definimos a largura da coluna lateral.

5-Agora vamos ver as possibilidades do editor “Avançado”. Podemos mudar:

►Page Text = Letra (fonte) e cor do texto
►Backgrounds = Cor de fundo
►Links = Cor do texto que será linkado
►Título do Blog = Letra e cor do título e da descrição do blog

6-Quero dar atenção a essa parte porque quase ninguém sabe o que é a tal “Tabs”. Pois bem, Tabs é a barra de navegação onde colocamos os links para outras páginas. Clicando em “Tabs Text" definimos o tipo da letra, se queremos em negrito (B) ou itálico (I) e definimos em "Seleted Color", a cor da letra quando passamos o mouse em cima. =)

7-Clicando em “Tabs Backgrounds” escolhemos a cor de fundo da barra e a cor de fundo quando clicamos sobre o link. Depois vem:

►Título da postagem = Escolhemos a cor da letra
►Post Footer = Refere-se ao rodapé dos posts, onde lemos “Postado por… comentários…” Essa área pode ter um background de cor diferente, letras diferentes e borda “Shadow color”
►Gadgets = Aqui definimos a letra e cores do título e texto da coluna lateral
►Images = Nessa opção podemos definir a cor de fundo da imagem, a cor da borda que ela terá é-a cor do texto que ficara abaixo dela

8-Agora começa a encrenca (hehe) Há uma opção para “Adicionar CSS”, mas essa é uma outra história para muitos outros tutoriais. É uma área onde podemos “enxertar” definições em CSS e a gente tem que entender um pouquinho desse negócio pra poder mexer. Porém o Blogger tem um probleminha com espaçamento entre o texto e a margem das colunas, então vou deixar um exemplos de mudança para a coluna lateral e para o espaçamento das margens. Veja:
Para mudar a cor da coluna lateral, insira o seguinte código na box.

.sidebar {background: #cccccc;}

Sua sidebar vai ficar com um fundo cinza (só para ilustrar).
IMPORTANTE! Para o texto ficar melhor ajustado (não tão grudado) às margens, escreva o seguinte código dentro do box:

.widget{
margin: 10px;
padding: 10px;]

Aqui o exemplo deixei com 10px; mas pode ser mais ou menos, você decide.

Esse tutorial eu fiz inspirada pelo meu marido que resolveu xeretar nessa novidade e me disse que para quem não entende nada é difícil começar a brincadeira. Eu acredito porque quando comecei a blogar, sofri que nem cachorro perdido de mudança e não haviam tutoriais para explicar tudo direitinho. Apanhei muito. Espero que você tenha muita sorte e crie ludicamente seu espaço de comunicação.
Beijos da Mama

Bem Vindo “Blogger Template Designer”

mamanunes@gmail.com (MamaNunes) — Fri, 12 Mar 2010 19:30:00 +0000

Finalmente, o Blogger lançou o novo recurso chamado "Blogger Template Designer". Ele permite personalizar a aparência e o layout do seu blog com apenas alguns clics, sem precisar entender nada de CSS e HTML. Há muitos modelos incríveis na blogosfera, e muitos metabloggers de plantão para dar uma forcinha mas certamente você gostará de criar seu próprio modelo, com seu estilo e sem pagar nada (hehe) O Blogger agora facilitou tudo!
Como usar este “blogueiro designer” do Blogger?
Está em versão beta, para testes, então você só poderá ter acesso através do Blogger in Draft . Crie um blog para fazer seus testes. No opção “Layout”, clic no ícone“ Designer de Modelo”.

Agora é só começar a brincadeira. Você poderá ter o template dos seus sonhos em alguns clics.
Você poderá escolher o modelo, número de colunas, menu, fontes (letras) cores…

Nem vou deixar um link para mais informações, é só você clicar qualquer um dos blogs indicados na sidebar que você vai ver, esse é O assunto da blogosfera! Divirta-se!
♥E viva o Blogger !!!!! *\o/*

Fundos Profissionais Para Twitter

mamanunes@gmail.com (MamaNunes) — Fri, 05 Mar 2010 12:33:00 +0000

Mude o background, sua imagem de fundo da página principal do Twitter com as criações do Tweety got Back . O site tem vários modelos, lindos, divididos por categorias. A gente pode escolher e clicar numa das miniaturas e ver como ficará a página com o back instalado e depois, com um só clic, aplica-la em nossa página. Muito simples. Visitando o blog podemos assistir um vídeo bem interessante sobre o trabalho e a criatividade desse pessoal especial.

O Site é em inglês mas é muito fácil compreender . Para ajudar quem (como eu) tem dificuldades para entender essas coisas “moderninhas” fiz um passo a passo com imagens.

Abaixo veja os passos em imagens:

Prontinho! Sua página inicial do Twitter vai ficar lindona!

Tutorial Para Criar Menu ► “Menubuilder”

mamanunes@gmail.com (MamaNunes) — Mon, 01 Mar 2010 14:10:00 +0000

Veja como criar um menu de maneira fácil e gratuita, sem precisar de cadastro ou registro, usando o aplicativo “Menubuilder” .
Para quem não sabe, menu é aquela área com links para outras páginas ou sites que você queira indicar, muito útil para direcionar seus leitores para página com informações tipo: “contato”, “sobre o blog”, “home”, etc..., como vemos no modelo. O Menu pode ser horizontal ou vertical. Em geral usamos o vertical
acima ou abaixo do cabeçalho do blog/site, mas também poderá ser horizontal, mais usado na sidebar. Vamos aprender a cria-la com o Menubuilder e depois aprender como instalar no Blogger.

Acesse o site, depois escolha uma cor que combine com seu modelo de template.
Escolha também a cor que queria para o efeito hover (muda de cor ao passar o mouse). Marque a opção escolhida.
Faça o mesmo com o formato “Menu Type”, marque a opção “Horizontal” ou “Vertical”
Clic em “Generate/Previw” e veja se está do seu agrado.
Clic em download para baixar o arquivo.

Você receberá as imagens necessárias e os códigos CSS e HTML em uma pasta zipada. Salve na área de trabalho (ou em em alguma pasta de arquivo)

Clique com o botão direito do mouse sobre o arquivo que você salvou e marque a opção “Extrair Aqui” você terá aberto duas imagens (left e right) e o código do menu.

Muito bem, até aqui, estamos com tudo arquivado, agora vamos copiar os códigos.
Clic sobre o ícone “menu” . Seu menu abrirá em outra pagina. Clic com o botão direito do mouse sobre essa página e depois clic em “Código Fonte”. Eba!! Tcharannn!!! Aparecerá todo o código.
Salve todo esse código e copie dentro de um bloco de notas.
Agora, no bloco de notas, vamos editar primeiro o código CSS, inserindo as imagens “left” e “rigth” do arquivo que você salvou.
Hospede as imagens num site tipo Tinypic, Photobucket ou até mesmo no próprio Blogger.
Veja: Dentro da sua caixa de postagem, clic no ícone de imagem, envie e clic OK

Hospede as duas imagens (_left e _right), copie todo o endereço e cole no dentro do código CSS, onde está grifado em vermelho.

<style type="text/css"&gt
#menu ul,#menu li { margin:0; padding:0}
#menu li {list-style:none;width:160px;clear:both;}
#menu a { display:block;margin:0 auto;color:#fff;text-decoration:none; background:url(AQUI.ENDEREÇO.DA.IMAGEM_right.png) right top no-repeat;}
#menu a span { display:block;text-align:left;background:url(AQUI.O.ENDEREÇO.DA.IMAGEM_left.png) left top no-repeat; font:bold 12px/30px Arial, Helvetica, sans-serif; padding:0 20px; }
#menu a:hover { background-position:right bottom;text-decoration:underline}
#menu a:hover span { background-position:left bottom; }
</style>

Sim, depois de tudo isso, vamos aprender como colocar esses códigos lá dentro do seu blog.
Vamos usar como referencia, um modelo “Minima” do Blogger.

#Dica: Tenha sempre um modelo de testes para fazer suas experiencias.

Faça login no Blogger em seu painel clic na opção “layout” e depois clic em “Editar HTML”.
NÃO ESQUEÇA DE FAZER UM BACKUP DO TEMPLATE ANTES DE QUALQUER ALTERAÇÃO.
Se você criou um meu vertical e quer coloca-ló na sidebar faça o seguinte:
Dentro dos códigos do template, procure pelo trecho:

]]></b:skin>

Copie e cole todo o seu código já editado, ANTES/ACIMA de ]]></b:skin>

Salve o template.

Clic na aba “layout” e depois “Adicionar um Gadget”. Escolha a opção “HTML/Javascript”

Volte ao seu bloco de notas para editar o HTML

<div id="menu">
<ul>
<li><a href="ENDEREÇO"><span>Home</span></a></li>
<li><a href="ENDEREÇO"><span>About</span></a></li>
<li><a href="ENDEREÇO"><span>Blog</span></a></li>
<li><a href="ENDEREÇO"><span>Contact</span></a></li>
</ul>
</div>

Escreve o endereço e o nome (link) , com muito cuidado para não apagar nenhum sinal.

Copie o código editado dentro da caixa do elemento HTM/Javascript e salve.

Se você criou um menu horizontal e quer exibi-lo abaixo do cabeçalho, faça todos os passos anteriores para editar o CSS e o HTML do arquivo que você salvou.

Depois volte em “Editar HTML” cole o código CSS do menu horizontal (já editado) ANTES/ACIMA de ]]></b:skin>

Depois procure pelo seguinte trecho:

<div id='content-wrapper'>

Cole todo o código HTM já editado, ANTES/ACIMA do trecho.

Visualize e se estiver tudo OK, SALVAR O TEMPLATATE.

Veja DEMO dos dois modelos.

#Dica: Para acrescentar mais links, basta repetir o trecho no HTML e editar

<li>
<a href="ENDEREÇO"><span>Outro Link</span></a>
</li>

Ufa!!! Agora acabou! Seja criativo e paciente, divirta-se deixando o seu blog com o seu jeito e, se não quiser ou tiver muita dificuldade, pode me contratar que eu faço isso pra você (hehe).

Compartilhar Posts no Google Buzz

mamanunes@gmail.com (MamaNunes) — Wed, 17 Feb 2010 17:43:00 +0000

Este tutorial explica como adicionar alguns modelos de botões Google Buzz ao seu blog Blogspot.
Siga os passos abaixo:
Faça login no Blogger e no painel clic em “layout”. Em seu layout clic na aba “Editar HTML” e clic na opção “Expandir modelos de widgets”

CÓDIGO PARA EXIBIR ESTE MODELO

<div style='padding: 4px; float: right;'>
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofollow' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://3.bp.blogspot.com/_4HKUHirY_2U/S3oMlK3qMcI/AAAAAAAAAxI/OUlZw-ZvtgA/wpbuzzer-google-buzz-big.png' style='border:0px;'/></a>
</div>

CÓDIGO PARA EXIBIR ESTE MODELO

<div style='padding: 4px; float: right;'><a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofollow' style='text-decoration:none;' target='_blank'><img alt='Buzz It' src='http://4.bp.blogspot.com/_4HKUHirY_2U/S3oMogIJp3I/AAAAAAAAAxQ/b14CTXtWYuk/wpbuzzer-google-buzz-small.png' style='border:0px;'/></a></div>

Escolha o modelo que mais te agrada, copie o código correspondendente. Procure em seu HTML o seguinte trecho:

<data:post.body/>

Cole o código imediatamente ABAIXO desse trecho para exibir o botão no início do post. Se preferir que ele flutue à esquerda, troque onde está escrito “right” por “left”.

Se quiser exibir o botão no rodapé do post, procure pelo seguinte trecho

<p class='post-footer-line post-footer-line-1'>

Cole o código do botão escolhido, ABAIXO desse trecho.

#dica►Repare no código e seguinte trecho: http://4.bp.blogspot.com/_4HKUHirY_2U/S3oMogIJp3I/AAAAAAAAAxQ/b14CTXtWYuk/wpbuzzer-google-buzz-small.png

Este é o endereço do ícone, então, caso você queira substituir por outro ícone mais a seu gosto, hospede no Blogger ou em um site tipo Tinypic e mude o endereço.

Veja esse, por exemplo do Blogger Widgets

Ou este do Smashing Webs 2.0

Faça uma pesquisa e lembre-se de que sempre vale a pena ter opções para compartilhar conteúdo. Abraços!

Tudo sobre o Google Buzz

mamanunes@gmail.com (MamaNunes) — Wed, 17 Feb 2010 13:32:00 +0000

Li sobre o assunto em vários sites e blogs para tentar entender e aprender a usar a novidade , o Google Buzz . A nova ferramenta inserida no Gmail permite compartilhar suas atualizações dos blogs, fotos, vídeos e mais. Acho que é mais uma das tentativas do Google para se integrar as redes sociais. Compartilho aqui uma relação dos artigos mais esclarecedores sobre o assunto, na minha humilde opinião. Saiba o que é, como ativá-lo, vantagens e desvantagens, como desativá-lo, etc..Enfim... Lá vamos nos...

Saiba como funciona o Google Buzz, a nova ferramenta social do Google
►por Fernando Panissi para o G1 Notícias/Tecnologia/Tira dúvidas

As Vantagens e Desvantagens do Google Buzz
► por Cammyl para o site Under Linux

11 DICAS PARA GOOGLE BUZZ ► por Edu Chaves para o site Sequelanet

Como remover ou esconder Google Buzz do seu Gmail
►por Cilene Bonfin

Veja ainda os artigos:

Goggle Buzz – a nova rede social do Google ► Dicas Blogger
Como configurar seu perfil do Google Buzz► [Ferramentas Blog]
Google Buzz: sua rede social no Gmail► Gothic Darkness

Imagem (ilustração): Digital Journal

Evitar cópia de imagens

mamanunes@gmail.com (MamaNunes) — Tue, 16 Feb 2010 12:17:00 +0000

Impedir que o conteúdo do seu blog seja copiado é quase impossível, mas dá para dificultar um pouco, como publiquei no artigo “Bloquear cópia de imagem ou página“ , inserindo um script em seu documento CSS/HTML (layout).
Nesse artigo, veremos como desativar a função do botão direito usando jquery.If. Isso dificultará a cópia de imagens do seu blog. É um script muito simples e funciona direitinho.
Para usar esse recurso, siga os passos abaixo:

1.Faça o login no seu painel do Blogger ► clic em “layout” ► depois, clic na aba ”Editar HTML”

2.Procure pela tag </ head> (use teclas ctrl + F)
3.Copie o código abaixo e cole-o ANTES de </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
//]]>
</ script>

Agora, salve o template. Pronto.
Fonte: Blogger Tip &Tricks

Corretor Ortográfico do Blogger

mamanunes@gmail.com (MamaNunes) — Tue, 09 Feb 2010 14:50:00 +0000

Essa é uma ferramenta indispensável para qualquer pessoa que se preocupe em escrever corretamente. Até quem domina bem a lingua portuguesa pode esbarrar em teclas erradas e digitar um palavrão (hehe). Não “pague mico”! Use o corretor e pronto.
Há tempos eu sentia falta desse recurso no box de postagens do Blogger, mas como uso o Windows Live Riter (muito melhor), não dei muita importância. Hoje descobri que a ferramenta voltou a funcionar para quem escreve seus posts pelo Blogger in Draft.

Pois é, nada melhor do que um texto escrito com capricho e devidamente corrigido.

Gadget Para Subscrição de RSS/Feeds.

mamanunes@gmail.com (MamaNunes) — Mon, 08 Feb 2010 15:01:00 +0000

Se você quer oferecer feeds aos seus leitores mas não encontrou um modelo que combine com seu template, veja esta opção totalmente customizável, com efeito hover (muda de cor ao passar o mouse) publicada no Blogger Tip and Trick.
Fiz umas adaptações para felicitar o entendimento (hehe).

Clique na imagem para ir ao blog DEMO

Código de estilo (CSS) para o Gadget:

<style type='text/css'>
#hsection{
border:4px solid #D3D3D3; /* Espessura, estilo e cor da borda*/
background-color:#e9e9e9; /*Cor do fundo */
}
#hsection:hover{
border:4px solid #BABABA; /*Cor da borda ao passar o mouse*/
background-color:#e9e9e9; /*Cor de fundo ao passar o mouse*/
}
#sectionmy .sectionmy2 h2.subscription {
border:0;
margin:0;
padding:6px 0 0 55px;
height:42px; /* Pode variar de acordo com tamanho do ícone*/
font-size:16px; /* Tamanho da letra*/
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;font-weight:bold;
}
#sectionmy .sectionmy2 h2.rss { background:url(ENDEREÇO-DO-ÍCONE-RSS) no-repeat top left;
}
#sectionmy .sectionmy2 h2.email { background:url(ENDEREÇO-DO-ÍCONE-EMAIL) no-repeat top left;
}
#sectionmy .sectionmy2 h2.twitter { background:url(ENDEREÇO-DO-ÍCONE-TWITTER) no-repeat top left;
}
#sectionmy .sectionmy2 .subscription a {
color:#252e28; /*Cor do texto*/
text-decoration:none;
}
</style>

Faça as mudanças que queira e escolha os ícones que mais gostar.
#Dicas►

Pesquise ícones no Inconfinder . É só escrever na caixa de busca e pronto, há milhares ótimos.
Para saber mais sobre códigos de cores, leia AQUÍ.
Para saber sobre estilos de borda, leia AQUI.

Depois, faça o login, clic na aba► “Layout”, depois em “ Editar HTML”
Copie e cole todo o código, acima da tag </head>
Visualize. Se estiver tudo OK, SALVE O TEMPLATE.
Copie todo o código abaixo e edite (escreva seus endereços e o texto que deseja exibir ao lado dos ícones)

<div id="hsection"><div id="sectionmy">
<div class="sectionmy2">
<h2 class="subscription rss">
<a href="SEU-URL-RSS-FEED">Assine este Feed</a></h2>
<h2 class="subscription email"> <a href="SEU-URL-FEED-EMAIL-SUBSCRIPTION">Receba novidades via EMAIL</a></h2>
<h2 class="subscription twitter">
<a href="SEU-URL-TWITTER">Siga-me no TWITTER</a></h2></div></div></div>

Depois volte a sua página “Layout” e adicione um “Elemento de Página” (gadget) ►HTML/JavaScript
Cole todo o código dentro do box e SALVE.
Pronto. Agora é só posicionar em lugar bem visível.

Se quiser, você pode usar a configuração abaixo, igual a do modelo demo, mas aconselho a ter seus ícones hospedados em seu próprio blog ou em um site de sua preferencia tipo: Tinypic ou Photobucket:

<style type='text/css'>
#hsection{
border:4px solid#D3D3D3;
background-color:#e9e9e9;
}
#hsection:hover{
border:4px solid #BABABA;
background-color:#e9e9e9;
}
#sectionmy .sectionmy2 h2.subscription {
border:0;
margin:0;
padding:6px 0 0 55px;
height:42px;
font-size:10px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;font-weight:bold;
}
#sectionmy .sectionmy2 h2.rss { background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S209wcnxO5I/AAAAAAAAAw4/I7aEXRVYR8s/RSS.png) no-repeat top left;
}
#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S209s4_wFoI/AAAAAAAAAww/8VovLp1Yxlg/EmailRSS.png) no-repeat top left;
}
#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S209oJTU3UI/AAAAAAAAAwo/28dTiLvxvDQ/twitter.png) no-repeat top left; }#sectionmy .sectionmy2 .subscription a { color:#000000; text-decoration:none; }
</style>

Sobre Feeds
Se você ainda não entende muito bem o que é um Feeds, aconselho que VEJA O TUTORIAL EM VÍDEO AQUÍ
Leia o post do Paulo Estevão do “Criar Blogs” ►Como criar um Feed para seu Blog”
Indico ainda a matéria do Alessandro Martins do “Quero ter um Blog” sobre Feeds por email.

Widget Posts “Posts Populares”

mamanunes@gmail.com (MamaNunes) — Fri, 05 Feb 2010 13:27:00 +0000

Exibir postagens mais comentadas pode ser de grande ajuda para divulgar seus artigos e tem sido a mais solicitada pelos meus clientes e leitores. As que estavam sendo usadas até agora usavam as pipes do Yahoo e muitas deixaram de funcionar. Agora a Ro Zancheta do Bloggersphera, apresentou um método desenvolvido por Abu Farhan que tem a vantagem de maior rapidez de carregamento e é mais estável. Há duas maneiras de instalar no Blogger: Copiar o script e colar direto no HTML do seu template, ou hospeda-lo em seu site de preferência e colocar em um “Elemento de Página”

Primeiro vou ensinar a colocar direto no HTML como fiz no meu e ficou ótimo.(RECOMENDO) Funciona direitinho. Veja:
Faça uma cópia do seu template antes de qualquer alteração!

Na aba Layout, clic em Editar HTML e mantenha desmarcada a caixinha “Expandir Modelos de Widgets”
Copie o código abaixo.

<div class='sidebar widget' id='Popular'>
<h2>Populares</h2>
<div class='widget-content'>
<script language='JavaScript'>
aBold = true;
numposts=300;
maxshowresult=10;
home_page = "<data:blog.homepageUrl/>";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var
postCommentar=new Array();var
totalpost;document.write("<ul>");function showrecentposts(j){var
a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var
h=j.feed.entry[f];var c=h.title.$t;var b;var
g;if(f==j.feed.entry.length){break}for(var
d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].h
ref;break}}for(var
d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=
="text/html"){b=h.link[d].title.split("
")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar
.push(g);postCommentar.push(b)}sortPosts();for(var
f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'"
class="recent-link">'+postTitlear[f]+"</a>";document.write(e)}}functi
on sortPosts(){function c(d,f){var
e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var
e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var
e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]
=e}for(var b=0;b<postTitlear.length-1;b++){for(var
a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseIn
t(postCommentar[a])){c(b,a)}}}}document.write('<script
src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderb
y=published&alt=json-in-script&callback=showrecentposts"><\/script>')
;
//]]>
</script>
</div></div> <!-- end #Popular –>

Se quiser exibir o widget no inicio da sidebar (como o meu), procure pelo seguinte trecho:

<div class='sidebar'>

Dependendo do template, também pode estar assim:

<div id='sidebar'>

Cole todo o código copiado, abaixo desse trecho.

O código pode ser colado na “div” que você quiser. Faça testes para adequar ao seu modelo.

Visualize e Salve o template.
Para customizar:

aBold = coloque true para ver os links em negrito ou false;
numposts = número de posts que o feed deve carregar.Evite colocar um número muito alto para não causar demora no carregamento;
maxshowresult = número de posts mostrados no widget.

Atenção! O próximo método é ótimo para quem tem algum conhecimento e já sabe lidar um com CSS para poder dar estilo ao gadget.
Caso prefira colocar o widget num (gadget) “Elemento de página”, faça o seguinte:
Baixe o script AQUÍ e hospede em seu site preferido (tipo Dropbox)
Depois, vá em “Layout” e clic “Adicionar Elemento de Página”, escolha um elemento “HTML/JavaScript” e cole dentro do box o seguinte código:

<div id='Popular'>
<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://NOME-DO-SEU-BLOG/";
</script>
<script src='http://ENDEREÇO-DO-SEU-ARQUIVO-JS' type='text/javascript'></script></div>

Também pode customizar como ensinei mais acima.
Para dar estilo, tipo a cor do background, estilo e tipo de letra, margem etc., copie o código abaixo, cole num bloco de notas e edite a seu gosto. Depois copie novamente e cole o código (já editado) acima do seguinte trecho:

]]></b:skin>

#Popular {
/* estilos para o container */
}
#Popular ul {
/* estilos para a lista dos links */
}
#Popular li {
/* estilos para os ítens da lista */
}
#Popular a {
/* estilos para os links */
}
#Popular a:hover {
/* estilos para os links com mouse-over */
}

Prontinho, mova seu gadget para onde queira exibi-lo.

Fonte: BloggerSphera (Todos os créditos)
Imagem: SeoBook

Texto em destaque “Pisca-Pisca”

mamanunes@gmail.com (MamaNunes) — Wed, 03 Feb 2010 00:09:00 +0000

Com uma tag HTML muito simples podemos chamar a atenção para um trecho do texto que vamos postar. Trata-se da tag Blink. É muito simples, ao escrever o texto na sua caixa de postagens, insira a palavra ou as palavras que quer destacar, entre as tags <blink> e </blink>. Veja:
Aqui temos um texto destacado dentro do Blink.
Veja o código abaixo.

<blink>Texto ou palavra que deseja destacar </blink>

Muito fácil e pode ser útil, não é? :)

Barra de Navegação - Skysa

mamanunes@gmail.com (MamaNunes) — Sat, 30 Jan 2010 16:04:00 +0000

Talvez você já tenha reparado que muitos blogs e sites apresentam uma barra de navegação no rodapé da página para oferecer mais informações e maior interação com redes sociais. A mais famosa é a barra do wibiya, mas não é a única opção, há também o Skysa e o Meebo. Escolhi o Skysa para compartilhar porque me pareceu bem funcional, totalmente costumizável, com várias aplicações como chat, links, busca, tradutor, interação com twitter, facebook… E é relativamente fácil de instalar.

Vamos ver o passo a passo nesse tutorial.

Faça o registro e aguarde a confirmação por email, faça o login, etc…

Você poderá escolher entre os modelos oferecidos pelo site ou customizar.

Se escolheu customizar, veja as possibilidades, vá testando até encontrar o resultado que mais combina com seu layout. Aqui ressaltei apenas a cor básica e o estilo das bordas da barra que pode ser arredondada no ângulo que queira, ou não arredondada, depende do seu gosto. Depois clique em “Continue an Get Code”

Para instalar as aplicações, tipo: Facebook, Twitter, Tradutor, Chat, etc… clique em “Get Apps”.

A próxima página apresentará todos os aplicativos disponíveis. Neste exemplo eu escolhi exibir um link para o Youtube. Veja:

Ao clicar “Add” você será dirigido para sua pagina de aplicações onde poderá organizar do seu modo,(clique com botaõ direito do mouse e arraste). Observe o resultado na vista prévia..

Depois é só clicar em “Bar Code”

Se seu blog está hospedado no Blogger, Wordpress, Ning ou Spruz, o site encaminha para instalação automática, senão, você terá o código HTML do script para inserir manualmente.

Mãos a obra. Espero que dê tudo certo.

Fonte: Aplicações Web Gratuitas em Wwwhat's new

Google Page Creator, migra em breve para o Google Sites

mamanunes@gmail.com (MamaNunes) — Thu, 28 Jan 2010 13:58:00 +0000

Ao entrar no painel esta manhã, notei essa mensagem e fui “Saber mais” sobre o assunto e creio que toda a blogosfera deve estar atenta a essas mudanças.
Estou publicando abaixo a tradução na íntegra, das informações do Blogger Help. Espero que eu também entenda e arregasse as mangas, porque tenho “trocentos” blogs e terei que fazer as mudanças necessárias (hehe). Vamos lá!

Atualizando os arquivos do Google Page Creator em seu blog

Você pode ter ouvido que o Google Page Creator está migrando para o Google Sites, e não será mais acessível para os usuários. Então, por que isso importa para os usuários do Blogger? Bem, para a grande maioria de vocês que nunca usou o Google Page Creator para sediar alguns dos conteúdos do seu blog, ele não importa. No entanto, para aqueles de vocês que confiou no Google Page Creator para armazenar imagens, modelo de código (HTML / Javascript / snippets CSS), ou outros arquivos, você terá que encontrar um novo local para hospedá-los. Alguns templates e widgets também pode conter arquivos apontando para o Google Page Creator.
A boa notícia é que nós construímos uma ferramenta que permitirá atualizar suas referências muito fácil. Eis como funciona:
Primeira coisa sobre a ferramenta Template Updater, localizado aqui, certifique-se de que você está assinado corretamente na Conta do Google. Posição para a ferramenta irá automaticamente iniciar o processo de digitalização, que olha através de seus blogs para referências ao Google Page Creator, quer dentro de um blog de modelo ou widgets HTML. Após digitar você verá uma mensagem de status para cada um de seus blogs. For Para a maioria de vocês, a mensagem terá este aspecto:

Se vir esta mensagem para todos os seus blogs, então você está pronto! Você não tem referências para atualizar e você pode continuar blogando. No entanto, para aqueles que têm referências para o Google Page Creator, o scanner mostrará uma mensagem que se parece com esta:

Para iniciar o processo de atualização simples, basta clicar no link Update referências:

O primeiro passo é fazer o backup do seu modelo, de modo que você tem uma cópia do seu código se precisar novamente no futuro. Clique em Baixar o seu modelo de blog link para pegar uma cópia e, em seguida, clique em Avançar para ir para a Etapa 2!

Agora você verá uma tabela que lhe permite rever as atualizações que serão feitas para os arquivos do Google Page Creator. Tanto o 'velho' como os 'novos' fontes são definidos de modo que você pode ver claramente onde os arquivos são gerenciados após a atualização.
De lá, basta clicar em Update e seu blog será atualizado automaticamente. Você deverá ver uma confirmação de amarelo que tudo foi transferido corretamente:

Claro, se você tem outros blogs que precisam de atualização, você terá de executar a ferramenta de atualização de cada blog ;-)
Solução de problemas / Notas:

Se o modelo ou widget que faz referência arquivos do Google Page Creator é corrupto, você poderá ver uma mensagem de falta de recursos no Novo Blogger hospedado URL. Isto significa que o arquivo de origem não pode ser atualizado corretamente por meio da ferramenta. Para corrigir isso, você terá que re-instalar o modelo ou legal de sua fonte original.

Para atualizar referências de um blog, você tem que ter privilégios administrativos para esse blog, que entre em contato com administrador do blog para ter os arquivos atualizados. A tentativa de faze-lo sem esses privilégios retornará o seguinte erro:

O Updater Template apenas apóia a migração de arquivos de até 1MB .

Imagens ou outros arquivos maiores que 1MB não podem ser atualizadas.

Por que Resumir Postagens do Blog

mamanunes@gmail.com (MamaNunes) — Tue, 26 Jan 2010 13:33:00 +0000

Ao exibir posts resumidos, muito além de um resultado estético bonito, há muito mais vantagens. O recurso diminui o tempo de abertura da página principal, inclusive facilitando a leitura pelos motores de busca, oferece uma espécie de cardápio ao leitor que poderá se interessar por mais de um artigo e permanecer mais tempo em sua página. É uma boa para quem usa publicidade, Adense.
No Blogger você tem pelo menos 3 maneiras de resumir postagens. Duas delas envolvem Javascript e a terceira “Jump Break Blogger” (anunciada oficialmente e sugerida pelo Blogger) não usam. Alguns modelos mais modernos, desenvolvidos para o Blogger recentemente, usam um JavaScript (hack) “Leia mais…” automático, publicado aqui.

Qual é o problema?
Os dois primeiros métodos, hack leia mais automático e o recurso manual <span class="fullpost">(publicado em 2008 pela Ariane do TNB ), usam javascript para cortar o texto. Os leitores poderão ver suas postagens resumidas, mas os motores de busca como o Google e Yahoo, sem suporte javascript em seus navegadores, não verão suas páginas com posts resumidos. Então se você está usando um desses métodos, não terá ajuda nenhuma para otimizar seu blog.
Então, se você usa em seu blog uma dessas técnicas baseadas em javascript para resumir seus posts, eu conselho a mudar para a terceira opção, indicada pelo Blogger, que não utiliza Javascript. Leia tutorial ►AQUI. Para customizar e compreender ainda mais sobre o recurso, indico o tutorial da Rô Zancheta do BloggerSphera► AQUI.
Benefícios que você terá usando esse método:

Os artigos são resumidos, tanto para os leitores quanto para motores de busca.
Diminui o tempo de carregamento do seu blog
Aumenta o page-views.

Uma sugestão para otimizar ainda mais seu blog é publicar apenas uma imagem por post na página inicial.
Cheque você mesmo...
1. Entre em Pingdom-Tools e anote o tempo de carregamento do seu blog.

2. Agora, depois de aplicar esse truque (Jump) em todos os posts do blog, verifique novamente o tempo de carregamento de seu blog no site Pingdom.

Você notará a diferença; o HTML no tamanho total do blog diminuirá e o tempo de carregamento também diminuirá, seu blog agora carrega mais rápido.
Obs.: Para retirar o hack “Leia mais..” automético (Script), leia o tutorial AQUÍ.
Fonte: BloggerStop ►BEST Method To Truncate Posts In Blogger/BlogSpot Blogs

Retirar o Script “Leia mais..”

mamanunes@gmail.com (MamaNunes) — Mon, 25 Jan 2010 12:28:00 +0000

Antes do Blogger implementar o recurso “Leia mais…” (Tutorial para “Leia mais…” do Blogger ), eu usava este script em quase todos os meus modelos de templates e ele funciona muito bem; creio que muitos blogueiros utilizam esse script. Alguns leitores me pediram e eu recomendo a troca pelo recurso do Blogger para que seu template fique mais leve e funcional.
Vamos ver como retira-lo:

Lembre-se de baixar e salvar seu modelo atual !!!

Acessar o Blogger, Clic em "Layout" e depois "Editar HTML".
Deixe marcada a opção “Expandir modelos de widgets”

Dentro do documento HTML procure pelo trecho abaixo e APAGUE-O:
Nota: Pode ser que no seu modelo e script tenha números referentes ao tamanho das imagens e número de letras (aqui ressaltados em vermelho) diferentes, mas observe o trecho do script todo e apague.

<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>

Depois procure pelo trecho abaixo e APAGUE-O.

<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--> Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>

Clic em “Visualizar” e se estiver tudo bem, salve o template. Pronto!
Para usar o recurso do Blogger, veja o link no início desse post.

Como salvar widgets do seu template

mamanunes@gmail.com (MamaNunes) — Thu, 21 Jan 2010 12:29:00 +0000

Essa tarefa ficou bem fácil com a implementação do recurso automático no dentro da opção “Editar HTML”. Veja:
Ao clicar em “Fazer upload” , seus widgets estarão listados e você só precisa clicar em “Manter Widgets”. Simples assim.

Mas, atenção, a mestra Rô Zanchetta do BloggerSphera adverte:

“Você deve ficar atento aos widgets que possuem a mesma id (ex.: HTML1, Label2, etc.), mudando o número para não correr o risco de salvar widget errado.”

Ou seja, seu novo modelo pode ter widgets diferentes com a mesma ID , então faça as alterações, certo?

Ex: Se tiver duas HTML1, coloque em uma delas ► HTML11

Hehe, #ptofalei do meu jeito. =o)

“Tradukka” Tradutor Automático em Tempo Real

mamanunes@gmail.com (MamaNunes) — Tue, 19 Jan 2010 21:20:00 +0000

Desenvolvido pelo Google Translate, o Tradukka é uma ferramenta indispensável para quem quer ou precisa se comunicar em diversas línguas, como é o caso de muitos metabloggers.
Enquanto você escreve, ele detecta o idioma e automaticamente traduz para o idioma que você quiser. Muito prático.

Como excluir sua conta do Facebook, Google, MySpace, YouTube, Hotmail, etc...

mamanunes@gmail.com (MamaNunes) — Tue, 19 Jan 2010 13:20:00 +0000

Essa indicação encontrada no site do Carlos Leopoldo (recomendo),pode ser muito útil, por isso traduzi quase na íntegra para vocês.
“Se por alguma razão você precisa apagar sua vida online e não sabe por onde começar, aqui te apresento um site chamado Delete Your Account o qual te prove de instruções para poder eliminar suas contas na maioria das redes sociais e serviços web 2.0, comunidades online e muitos outros. A lista de serviços é extensa, alguns são: Digg, eBay, Facebook, Flickr, FriendFeed, Last.fm, Google, MySpace, WordPress, YouTube, Amazon e outro mais estão sendo agregados.

Você somente tem que entrar em Delete Your Account e na parte superior onde estão as letras do alfabeto, você escolhe a letra correspondente a do primeiro nome do serviço que quer eliminar.

Uma vez que tenha escolhido, o serviço te mostrará as instruções para eliminar sua conta. Alguns serviços são mais fáceis, já que é só clicar num link para faze-lo, mas outros não, requerem que envie um email ao administrador ou suporte para solicitar o cancelamento.
Somente alguns serviços permitem a reativação da conta, por exemplo o Hotmail, outros não.
Link para ►Delete Your Account.

Quem é Carlos Leopoldo? Clic na imagem ►

Image Up – Para Hospedar Imagens

mamanunes@gmail.com (MamaNunes) — Wed, 13 Jan 2010 00:10:00 +0000

Totalmente em português, ImageUp é um site que oferece armazenamento ilimitado de imagens, GRÁTIS. Garante que as imagens não serão apagadas depois de algum tempo, não tem contas “premium” e ainda oferece um editor onde se pode acrescentar textos, efeitos e recortes. Sem dúvida uma excelente opção para brasileiros!
Todas as explicações são de fácil compreensão veja:
Primeiro passo, clic “cadastre-se”:

Segundo passo, preencha o formulário:

Terceiro passo, leia as informações:

Quarto passo, clic em “fazer upload”:

Quinto passo, depois de selecionada e nomeada, clic em enviar imagem

Agora a bem legal do aplicativo, clicando sobre a imagem, vai abrir uma janela com todas as informações necessária para postagens, inclusive no Twitter e com URL encurtada.

E tem mais, clicando em “Editar”, a imagem pode ser recortada, receber texto, correção de olhos vermelhos, etc..

Experimente. Eu já estou usando!

“Sprixi “ ► Excelente Buscador de Imagens Free

mamanunes@gmail.com (MamaNunes) — Mon, 04 Jan 2010 16:56:00 +0000

Para quem gosta de usar imagens que ajudem a expressar melhor suas idéias, o Sprixi é ótimo. Usando a API do Flicker (e de outros), oferece a seus usuários uma quantidade enorme de imagens de qualidade, com licença Creative Commons que, portanto, podem ser utilizadas gratuitamente para uso pessoal e comercial (sempre que se coloque os créditos evidentemente). Muito fácil. É só digitar o que procura na caixa de busca, escolher e fazer o download da imagem no tamanho mais apropriado ou usar o link direto. Eu gostei. Preciso lembrar que as melhores imagens a gente só consegue quando digitamos a busca em inglês. Por exemplo: Quer imagens de mãos? Digite “hands”. Isso também vale para Google Imagens ou Bing… paciência.

Fonte: Dica encontrada no Chica Blogger (recomendadíssimo), em espanhol.