ManiaBlogs

Tutorial Basico De HTML

2011-12-17T05:26:00.000-08:00

Assim, mesmo usando bons editores, precisamos conhecer alguns códigos HTML para sabermos como modificar os textos e realizar outras funções em nosso Blog. Vejamos alguns desse e os mais comuns

Destaque das palavras:
<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft">

<strong>Negrito</strong>
<em>Itálico</em>
<u>Sublinhado</u>
<strike>~~Tachado~~</strike>

</textarea>

Posição do texto:
<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft"><p align="left">Alinhado à esquerda</p>

<p align="right">Alinhado à direita</p>

<p align="center">Centralizado</p>

<p align="justify">Justificado (alinhado às duas margens)</p></textarea>

Criar links:

<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft">

<a href=”URL de Destino”>Texto do link</a></textarea>

Inserir imagens:

<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft">

<img src=”URL da Imagem” /></textarea>

Se Você Ja Aprendeu o Basico Va Para a Nossa Proxima Etapa,Mexendo Com Templete

Os 10 Melhores Gadgets para um Blog

2011-12-17T05:03:00.000-08:00

O tema “melhores gadgets para colocar no blog” é um dos mais votados em meu Skribit. Neste artigo, reúno os 10 gadgets mais interessantes para seu blog, com comentários a respeito de cada um deles. Você perceberá que eles podem trazer diversos benefícios ao seu blog, como aumento no número de visitas, maior tempo do visitante em seu blog e outros.

Introdução

Como sugerido pela imagem que ilustra o início deste artigo, os gadgets – também chamados de widgets – são uma espécie de ferramentas que adicionam funcionalidades ao seu blog. Há hoje uma infinidade deles pela internet, alguns específicos para uma plataforma (como os do Blogger), outros desenvolvidos por grandes empresas (como a Google) e muitos criados por pessoas como você, que tiveram uma ideia interessante e disponibilizaram aos demais. Neste artigo, mostrarei uma seleção dos 10 melhores que encontrei desde que iniciei meus blogs

1. LinkWithin

O LinkWithin é, em minha opinião, um dos melhores gadgets que você pode ter em seu blog. É ele que mostra artigos relacionados no final de cada post do Gerenciando Blog, sob o título “Poderá também gostar de:”. Sua utilidade está justamente em manter o seu visitante em seu blog, chamando sua atenção para outros artigos que ele possa gostar de ler. As instruções detalhadas de instalação estão no artigo LinkWithin: Mostre artigos relacionados.

2. UserVoice

Encontrei o UserVoice como um substituto ao Skribit, após este ter sido descontinuado. Surpreendentemente, descobri logo de cara que o UserVoice era ainda mais poderoso do que o Skribit. Sua função é essencial para mim: é através dele que recebo sugestões dos leitores para novos artigos aqui no Gerenciando Blog. Você pode ver o UserVoice em funcionamento de duas formas aqui: clicando na opção “Sugira” do menu ou no botão “Sugira um artigo”, no canto inferior direito da tela. Para saber como utilizá-lo em seu blog, basta ler o artigo UserVoice: Ouça as Sugestões de seus Visitantes.

3. PostRank

O PostRank é outro gadget interessante para chamar a atenção de seus visitantes para artigos de seu blog. Depois de cadastrar os feeds de seus artigos no serviço, o PostRank passa a analisá-los e determina quais são os seus “Top Posts” com base em uma série de fatores, como links, comentários e visitas. Você vê o PostRank em funcionamento também na barra lateral esquerda, com o título “Top Posts”. O passo a passo para utilização está em PostRank: os Artigos mais Populares do seu Blog.

4. Google Friend Connect

O Google Friend Connect – também conhecido como “Seguidores” – é possivelmente o gadget mais sub-utilizado em blogs: praticamente todos o usam, mas poucos sabem o potencial que ele apresenta. Com ele, você consegue, entre outras coisas, colocar gadgets de enquetes, distribuir newsletters e exibir artigos de acordo com a preferência de seus seguidores. Escrevi uma série de 5 artigos sobre o Google Friend Connect, mostrando como explorá-lo melhor:

5. Últimos comentários

Um gadget com os últimos comentários recebidos no blog é uma forma interessante de destacar os comentários recebidos e incentivar seus visitantes a escrevê-los. No artigo Como conseguir comentários em seu blog eu cito a forma que utilizo aqui noGerenciando Blog: trata-se de um gadget de “Feed”, onde coloco meu RSS de comentários. Outra opção é utilizar o gadget “Recent Comments” disponível na lista do Blogger, específico para mostrar os últimos comentários recebidos.

6. Live Traffic Feed

O Live Traffic Feed é o gadget mais famoso e utilizado do Feedjit. Ele mostra seus últimos visitantes, de onde eles vieram e o que leram em seu blog. Alguns meses atrás, foi lançada uma atualização que permite inclusive saber em quem é o seu visitantes, caso ele esteja cadastrado no Feedjit. As instruções de uso estão em Feedjit: As Novidades do Live Traffic Feed.

7. Divulgação do Banner

Outro gadget muito interessante para seu blog e que você mesmo pode criar é o de divulgação de seu banner. Através desse gadget, visitantes interessados em divulgar o seu blog podem copiar o código de seu banner para publicá-lo em seus próprios blogs. Mostrei como fazer isso em dois artigos:Criando um banner para o seu site, para quem quer um controle maior, e Um banner para seu site de forma fácil, este com instruções mais simples.

8. Caixa de Pesquisa

Uma caixa de pesquisa é indispensável em seu blog, para que seus visitantes possam encontram com facilidade o que desejam. Sem ela, muitos de seus visitantes podem sair de seu blog simplesmente porque não encontraram o artigo que estavam procurando. Há templates que já trazem essa procura incorporada. Caso este não seja o seu caso, há diversas opções:

Se você utiliza o AdSense, pode gerar uma caixa de procura através do serviço. A vantagem é que os resultados trazem anúncios que podem lhe trazer retorno financeiro.
No Blogger, existe o gadget “Caixa de Pesquisa”, que permite a você configurar se será feita a busca apenas em seu blog ou em toda a web.
O Google Web Elements oferece um gadget de busca bastante interessante em http://www.google.com/webelements/customsearch. É este o que utilizo aqui no Gerenciando Blog.

9. Google Web Elements

Além da Caixa de Pesquisa que citei acima, o Google Web Elements oferece outras opções interessantes de gadgets que podem ser instaladas em qualquer blog ou site. Há gadgets interessantes como um calendário para lembrar eventos importantes, um painel para que seus visitantes deixem recados, mapas do Google Maps e muitos outros. No artigo Google Web Elements eu falei sobre o assunto.

10. Twitter Updates

Da mesma forma que é importante divulgar seu blog no Twitter, também ocorre o inverso: divulgar seus tweets em seu blog é uma forma interessante de conquistar novos seguidores. Há diversos gadgets que fornecem essa funcionalidade. O gadget “Twitter Updates” do Blogger é bem simples de se utilizar e cumpre bem sua função.

Conclusão

Esta é uma lista bem pessoal. É importante que você avalie quais deles se aplicam ao seu blog, pois nem tudo o que for interessante para mim trará o mesmo resultado a você. Tenho certeza de que cada um tem os seus gadgets favoritos e que trazem bons benefícios para seu blog.

Faltou citar algum em minha lista? Não gostou de minhas sugestões? Deixe seu comentário!

Mostrar o Titulo do Post em vez de Postagem mais Recente e mais Antiga

2011-12-16T04:44:00.000-08:00

Mudar o texto Postagem mais Recente e Postagem mais Antiga que aparece no final de cada post pelo titulo das postagens pode ajudar a despertar o interesse dos seus visitantes pelos outros textos do seu blog, afinal tem muito mais chances de alguém clicar no titulo de uma postagem onde podemos ter uma idéia de qual assunto é tratado do que alguém clicar num link escrito postagem mais antiga ou mais recente. Se quiser pode ver como Alterar texto postagens mais antigas e mais recentes, mas colocando outro texto ou imagens no lugar dos links.

Para fazer essa alteração no seu blog entre na pagina editar HTML, procure por </ head> e coloque essa linha antes dele:

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

Clique para salvar e vá até a pagina layout. Clique para adicionar gadget >> html/javascript e cole o código:

<style type="text/css">
#blog-pager-newer-link {width:200px;text-align:left;}
#blog-pager-older-link {width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
});
</script>

Nos testes que fizemos não importa o lugar que colocamos esse gadget os links com os títulos das postagens aparecem no lugar certo, ou seja, no final da postagem no lugar dos links postagem mais recente e postagem mais antiga, mas caso no seu blog apareça em outra parte é só corrigir o posicionamento do gadget colocando embaixo das postagens do blog e salve a organização da pagina.

Caso deseje formatar esses links é só alterar o estilo CSS que colocamos no gadget, é esse código:
#blog-pager-newer-link {width:200px;text-align:left;}
#blog-pager-older-link {width:200px;text-align:right;}

Caso não funcione verifica na sua pagina editar html se existe algum desses códigos:

.blog-pager {background: transparent none no-repeat scroll top center;}
.blog-pager-older-link, .home-link,.blog-pager-newer-link {background-color: #ffffff;padding: 5px;}

Eles são formatações de texto e podem interferir na formatação do seu link, veja que o nome do estilo é o mesmo (blog-pager-older-link, blog-pager-newer-link), portanto se for usar uma cor de fundo tem que apagar esse que está no exemplo background-color: #ffffff; para não haver conflito de códigos.
A demonstração desse código está em nosso blog você só precisa ir até o final da pagina e verá o link com titulo da postagem. Esperamos que gostem de mais essa dica para personalizar o seu blog e essa alteração traga algum bom resultado para seu site.

Fazer Backup ou Colocar Template no Blogger (Novo Painel)

2011-12-16T04:41:00.000-08:00

Depois das alterações do painel do blog feitas esse ano muitas coisas ficam com pouco destaque em minha opinião por isso vamos mostrar onde achar algumas coisas úteis no painel atualizado do blogger começando pelo link para fazer backup do blog, ou seja, como salvar uma copia do seu template antes de fazer alterações nele.

Isso é muito simples de fazer você só precisa entrar na pagina modelo e clicar no link no canto da pagina fazer backup / restaurar e abre uma janela para você salvar uma copia do código do seu template atual clicando no botão fazer download do modelo completo, isto abrirá uma janela de download e você só precisa salvar o arquivo.

Agora você já pode editar seu HTML sem preocupações porque se algo der errado você só precisa voltar nesta pagina e clicar no botão selecionar arquivo e enviar novamente o arquivo que acabou de baixar e seu template voltará ao que era antes.

Esse mesmo procedimento serve para instalar templates no blogger que tenha achado em algum site na internet com templates prontos para o blogger. Mas neste caso recomendamos também salvar uma cópia do seu modelo antes de instalar o novo pelo mesmo motivo se der algo errado poderá voltar ao seu modelo atual facilmente.

Favicon: como criar e hospedar imagens .ico e utilizar

2011-12-15T12:45:00.000-08:00

Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.

Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site:http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

Para que funcione também no Google Chrome, visualize um novo código aqui.

Multiplique as Visitas em seu Blog

2011-12-15T09:15:00.000-08:00

Muitos Blogueiros procuram vários meios de aumentar as visitas em seus blog,
sites ou fórum até acabam pagando para ganhar mais visitas que n é nada
mau também, mas eu tenho outro jeito melhor que venho usando a algum tempo
nos meus blog e tem dado muito certo e recomendo.

Entre nesse site: minilua.com ele funciona assim a cada 1visita que você envia a ele ele te envia 3, após abrir o link vai dar de cara com isso:

Coloque os dados que pede não esqueça de fazer o banner no tamanho que pede 336x70 ou 468x60 após isso você deve esperar eles avaliar seu blog para passar na avaliação você deve adicionar qualquer banners ou widgets do minilua.com (Link dos widgets aqui! // Link dos Banners Aqui!!!)

Lembrando o blog não passara na avaliação se o banner do minilua não estiver no seu blog, para saber se ele foi aprovado só abaixar a pagina e procurar o seu blog que deve nuns dos últimos.

Um meio facil de enviar Visitas é você adicionar o banner claro e um pop-under que editei.Quando alguem entrar em seu blog o pop-under vai abrir o site do minilua junto com o seu em uma nova aba, o pop-under só abre 1 vez por dia em cada PC (IP) vou dechar o código dele logo abaixo:

window.onunload=document.onclick=function (){if(document.cookie.indexOf("mnp=")==-1){d=new Date();d.setDate(d.getDate()+1);document.cookie="mnp=yes; expires="+d.toGMTString();(window.open("http://static.minilua.com/live/banners/pop.html","mnp","resizable=no,scrollbars=yes,height="+screen.availHeight+",width="+screen.availWidth+",status=yes,top=0,left=0")).blur();window.focus()}}

</script>

Mostrar Link Curto das Postagens - Encurtador de Links no Blog

2011-12-15T08:55:00.000-08:00

Sempre é importante criar novas formas de divulgar seu blog e atrair mais visitantes para suas paginas. Você pode mostrar o link encurtado no final de suas postagens o que pode facilitar as pessoas copiarem o link e postarem no Twitter ou alguma outra rede social. Concordamos que na divulgação do blog em redes sociais existem muitos tipos de botões de compartilhamento que já fazem o envio automático, mas sempre é bom dar mais uma opção principalmente porque ocupa pouco espaço na pagina do blog e serve como mais um incentivo a divulgação.

Entre na pagina editar HTML, nós sugerimos fazer um backup do template antes de alterar o HTML do blogger. Marque para expandir o modelo de widgets e procure por <data:post.body/> e coloque esse código logo depois.

<b:if cond='data:blog.pageType == "item"'><form onsubmit='return false;'>Link Curto
<input id='shorturl' onmouseover='javascript:this.select();void(0);' readonly='readonly' size='20' type='text'>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function encurtaURL(json){
document.getElementById("shorturl").value = json.short_url;
}
document.body.onload = function(){
if(document.getElementById("shorturl").value==''){
var el = document.createElement("script");
el.language='javascript';
el.src = 'http://bitw.in/api/link/create.json?url='+encodeURIComponent(window.location.href)+'&callback=encurtaURL&apikey=74231e775e05ca3fe3387eaf0c1c7be61da2bd23';
document.body.appendChild(el);
}
}
if(document.body.addEventListener){
document.body.addEventListener("load",document.body.onload,true);
}
//]]>
</script></input></form></b:if>

Outro posicionamento interessante pode ser mostrar o link no inicio da postagem e para fazer isso só precisa colocar o código que mostramos antes de <data:post.body/> ao invés de depois dele.

Além disso se quiser você pode colocar o código depois de <div class='post-footer-line post-footer-line-3'/>, isso faz o link aparecer mais para baixo depois do nome do autor da postagem, marcadores e link de comentários do blog. O html div class='post-footer-line post-footer-line-3 varia um pouco em cada template, mas o importante é achar post-footer-line-3 e também esse numero pode ser 1 ou 2, se colocar nesses outros trechos o link encurtado do seu post parecerá numa linha entre os marcadores ou nome do autor do blog dependendo de como está o seu layout de postagem.

Caixa de Texto

2011-12-15T07:57:00.000-08:00

Com esta caixinha de texto, é possível também publicar códigos ou mesmo dar um destaque em um post.

<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft">ESCREVA AQUI O SEU TEXTO</textarea>

Prontinho:

Botões para Divulgar Blog nas Redes Sociais

2011-12-15T05:29:00.000-08:00

Conseguir mais visitas para o blog é sempre importante e um jeito de conseguir é divulgando seu blog em redes sociais, mas isso não precisa ser feito somente por você! Coloque botões de compartilhamento no seu blog e assim alguns de seus visitantes vão ajudá-lo a divulgar seus posts em diversas redes sociais

Hoje vamos falar do ShareThis Sharing Button, ele faz esses botões de compartilhamento para facebook, twitter e outras redes podendo ter ou não o contador de envios. Além é claro do botão Google +1. Esses botões podem ser usados em sites ou varias plataformas de blogs: Blogger, Wordpress, Tumblr, Joomla e outros. Você só precisa clicar para escolher a sua plataforma de blogs.

Depois você clica em um dos modelos de botões para mostrar no seu blog e veja que o painel expande mostrando opções onde você poderá usar as setas para mudar a posição dos botões, adicionar ou remover redes sociais ou funções.

Temos também a opção de botões lado a lado (horizontal layout) ou um embaixo do outro (vertical layout). E veja se deseja ou não mostrar o contador de envios (no counters). Depois que terminar clique em get the button e caso tenha escolhido a opção blogger irá para uma pagina perguntando em qual blog deseja adicionar o gadget de botões de compartilhamento (caso você tenha mais de um blog). Então selecione o blog e clique em adicionar widgets e já está tudo pronto.

Gostou? Não Esqueça de Comentar!

Sobre os atuais problemas do Blogger

2011-06-25T16:32:00.001-07:00

Entre maio e junho deste ano, o Blogger apresentou diversos bugs e instabilidades. Hoje, ao visitar o fórum de ajuda e ao moderar os comentários deste blog, percebi que o gadget seguidores voltou a desaparecer de vários blogs e que muitos usuários estão ansiosos. Então, o motivo deste post é para dizer: don’t panic!
Não há motivo para pânico. Lembrem-se que o Blogger está passando por uma reformulação em seu código e que todos esses problemas são naturais. Reitero o que já disse anteriormente: todos os bugs sempre foram corrigidos. Sempre!
Ao mesmo tempo que estamos passando por problemas, diversos novos recursos estão sendo implantados, em um serviço que é 100% gratuito. É preciso que vocês tenham paciência. E pra quem não tem, basta contratar um host e migrar para outra plataforma de blogagem. Simples assim.
Usem sempre o fórum de ajuda para reportar dificuldades com seu blog:

Ajuda do Blogger

Nós continuaremos informando-os sobre todas as novidades, bem como sobre todas as instabilidades deste período.
Recomendo a leitura dos seguintes posts:

A instabilidade do Blogger e de seus usuários – Ricardo Fraga
Por que eu escolhi o Blogger? – Ana Karenina

Como criar botões com CSS

2011-06-25T16:31:00.000-07:00

Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu já ensinei algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons) usando apenas CSS.
Entre no site Button Maker e utilize o painel da direita para personalizar o botão:

Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão.
Embaixo, escolha as cores da seguinte maneira:

Top Gradient Color: cor do topo em gradiente
Bottom gradiente color: cor de baixo em gradiente
Top Border Color: cor da borda do topo
Hover background color: cor do fundo ao passar o mouse
Text Color: cor do texto
Hover Text Color: cor do texto ao passar o mouse
Active background color: cor de fundo ao clicar no botão

Depois que o botão estiver pronto, clique sobre ele e copie o código.

Entre no painel do Blogger, clique em design>editar HTML. Faça um backup do template e cole o código antes da tag ]]></b:skin> (use o Crtl+F do teclado para encontrá-la). Substitua o ponto (.) que está antes de cada palavra “button” por jogo da velha (#). Ficará assim: #button. Visualize e salve.
Em “elementos de página”, clique em adicionar gadget HTML/javascript.
Cole este código:

<div id="button>ESCREVA AQUI O TEXTO</div>

Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código:

<div id="button"><a href=”LINK”>TEXTO</a></div>

Pronto! Agora seu blog já tem um botão feito apenas com CSS ;)
Veja, na imagem abaixo, um botão que criei para o DB ( é o azul):

Existem outros sites para criar botões personalizados em CSS:

Pedidos Terminados

2011-06-25T16:03:00.001-07:00

Nome do Template: Pokemon Fire Well

Template Online: SIM

Preço: Divulgação do ManiaBlogs Nele (Gratis)

Visite: http://www.pokemonfirewell.co.cc/

Nome do Template: HumorDida
Template Online: SIM
Preço: Divulgação do ManiaBlogs Nele (Gratis)
Visitem: http://www.humordida.co.cc/

Nome do Template: MatutoMalandro
Template Online: SIM
Preço: Divulgação do ManiaBlogs Nele (Gratis)
Visitem: http://matuto-malandro.blogspot.com/

Pessa seu Template GRATIS!!!

Templates

2011-06-25T16:02:00.001-07:00

EU FIZ UM SISTEMA DE TEMPLATE BEM SIMPLES E PRATICO PARA VC PROCURAR UM TEMPLATE QUE ENCAIXE COM SEU GOSTO, PARA ENTRAR NESSE SISTEMA CLIQUE LOGO ABAICHO:

CLIQUE AQUI PARA ENCONTRAR SEU TEMPLATE DESEJADO

Retirar ou trocar bordas das postagens

2011-06-23T12:14:00.003-07:00

Em alguns templates do Blogger vem como padrão uma borda nas imagens que você vier a postar. Para você retirar ou mudar esta borda, procure por este trecho do código abaixo fazendo assim: Personalizar, Layout, Editar HTML. Não marcar "Expandir modelos de widget". Use Ctrl+F para facilitar a busca.

.post img {
padding:2px;
border: 1 px solid $bordercolor;
}

Para retirar, coloque valor "0" na parte em azul. Para aumentar a largura da borda é só aumentar este mesmo valor.
Para alterar a cor, coloque ( #000000; ) no lugar de ( $bordercolor ). Você decide qual a cor #hexadecimal. Vá aqui para ver alguns exemplos.

Para alterar o tipo, coloque na parte em vermelho, alguns dos exemplos aí abaixo. Vá testando, clicando em "Visualizar" até chegar a seu gosto.

Exemplos:

- dashed: borda tracejada
- dotted: borda pontilhada
- double: borda dupla
- solid: borda contínua
- groove: borda entalhada
- inset: borda em baixo relevo
- outset: borda em alto relevo
- ridge: borda em ressalto

Lembre-se de salvar seu modelo antes de qualquer alteração: Layout, Editar HTML, Baixar modelo completo.

Mudar Favicon do blog pelo Painel

2011-06-17T13:43:00.000-07:00

O Blogger liberou uma novidade hoje! Agora é possível trocar o favicon padrão do Blogger direto do Blogger. Sem precisar adicionar código algum no template.

O favicon é o ícone que fica do lado do link na barra de navegação (onde se digita o link).

Antes eram necessários vários macetes para substituir o ícone. Agora o Blogger resolveu ajudar, liberando tal função em seu painel de testes (Blogger in Draft).

Para começar o procedimento de troca, é necessário ter um favicon em formato ICO (.ico). Se você ainda não tem, crie uma imagem quadrada e salve com o formato PNG (.png). Depois entre no sitewww.convertico.com, selecione a imagem e clique em “Convert”.

Depois clique em “Click here to Download”. Uma nova aba será aberta e você deve salvar a imagem em seu computador.

Obs.: Não adianta usar o link da imagem direta do site. Pois esse arquivo é hospedado temporariamente no ConvertIco.

Como configurar:
1) Faça login no Blogger in Draft
2) Entre em “Design” -> “Elementos da página” e clique em “Editar” como na imagem:

3) Escolha a imagem e clique em salvar.

Pronto! Nada mais! O próprio Blogger hospeda e coloca o favicon no lugar que deve ficar.

Lembrando fassa login no site: http://draft.blogger.com

Personalizando a caixa de comentários do Blogger

2011-06-16T14:18:00.000-07:00

Passei algumas horas do domingão cuidando do template do Dicas Blogger e foi muito bom! Desde que customizei o Blogger Tips tomei gosto por mexer em html e prometo que em breve trarei um post sobre este assunto.

Hoje vou compartilhar com vocês alguns hacks para personalizar a caixa de comentários. Todos eles estão no blog do Compulsivo mas não sei se todos os meus leitores também são leitores dele (acredito que sim, pois o cara é fera) então, resolvi postar aqui também estas dicas preciosas!

IMPORTANTE: Para encontrar os trechos solicitados no tutorial, vá em layout, procure por editar html e clique sempre em expandir modelos de widgets.

DESTACANDO A ÁREA DOS COMENTÁRIOS

Para incluir um ícone destacando a área dos comentários, encontre a linha abaixo(Crtl+F) e onde está em vermelho substitua pela url do ícone.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário: <b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Sugestão de site de ícones:

Icon Finder

Exemplo:

DESTACANDO OS COMENTÁRIOS DO AUTOR

Para destacar os comentários do autor do blog e procure pelo código abaixo:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Inclua as partes em vermelho.

Dica: copie ele inteiro e cole entre as tags <dl id='comments-block'> e </dl>

Depois procure pela área do CSS, entre as tags <head></head> e cole o código abaixo:

. blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Personalize as cores da borda e do fundo a seu gosto!

ALTERANDO O LINK DO AUTOR

Para que seus comentários não sejam direcionados para o seu perfil do Blogger, procure pelo código abaixo, inserindo a linha em destaque.

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

INSERINDO ICONE DOS COMENTÁRIOS DO AUTOR

Procure pelo mesmo código anterior e insira a linha em vermelho, substtuindo a url

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<img src='http://URL_DA_IMAGEM/Imagem.png'/>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

Exemplo:

Neste exemplo vemos os 03 hacks já aplicados.

Divertido não?

Lembrem-se sempre de fazer um backup do template antes de utilizar estas dicas!

Colocando Emoticons nos Comentários

2011-06-16T13:57:00.001-07:00

Olá gente querida!
Vou ensinar aqui um truque muito simples, com Puro CSS3 e Jquery, para colocar “carinhas”, Smiles ou Emoticons, como queiram chamar (rss) nos comentários. Eu as acho muito simpáticas e, apesar de chamadas de “firulas infantis” por muitos, pra mim são carinhos ou expressões que “economizam” muitas palavras (e digitação kkk) quando queremos compartilhar nossas emoções. Só isso! Vou ensinar como eu coloquei aqui no meu blog, vamos la:

Faça login ► Clique na opção “Design” depois em “Editar HTML”

Vamos instalar o CSS. Procure pela tal ]]></b:skin> e cole o seguinte códigoANTES/ACIMA dela.

/*
* jQuery CSSEmoticons plugin 0.2.8
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:

*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Sep 20 10:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
font-size: 0.65em;
font-weight: bold;
color: #000000;
display: inline-block;
overflow: hidden;
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
text-align: center;
padding: 0;
line-height: 1.34em;
-moz-border-radius: 1.54em;
-webkit-border-radius: 1.54em;
border-radius: 1.54em;
-moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
background-color: #ffcc00;
background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
    center right,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
);
-webkit-transition-property:color, background, transform;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
padding-left: 0.2em;
width: 1.34em;
letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
   I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
span.css-emoticon.spaced-emoticon {
    width: 1.4em;
}
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
font-size: 0.55em;
width: 1.82em;
height: 1.82em;
line-height: 1.72em;
-moz-border-radius: 1.82em;
-webkit-border-radius: 1.82em;
border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
padding-left: 0;
width: 1.82em;
letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
background-color: #eb0542;
background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
    center right,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
);
}
span.css-emoticon.pink-emoticon {
background-color: #ff8fd4;
background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
);
background-image: -moz-linear-gradient(
    center right,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
);
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 0.45em;
width: 2.2em;
height: 2.2em;
line-height: 1.9em;
-moz-border-radius: 2.2em;
-webkit-border-radius: 2.2em;
border-radius: 2.2em;
background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
);
}
span.css-emoticon.no-rotate.red-emoticon {
background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
);
}
span.css-emoticon.no-rotate.pink-emoticon {
background-image: -webkit-gradient(
    linear,
    right bottom,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
);
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,204,0)),
    color-stop(0.56, rgb(255,221,85)),
    color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
    center left,
    rgb(255,204,0) 41%,
    rgb(255,221,85) 56%,
    rgb(255,238,170) 100%
);
}
span.css-emoticon.counter-rotated.red-emoticon {
background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(235,5,66)),
    color-stop(0.56, rgb(235,38,90)),
    color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
    center left,
    rgb(235,5,66) 41%,
    rgb(235,38,90) 56%,
    rgb(250,55,110) 100%
);
}
span.css-emoticon.counter-rotated.pink-emoticon {
background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.41, rgb(255,143,212)),
    color-stop(0.56, rgb(255,153,216)),
    color-stop(1,    rgb(255,173,225))
);
background-image: -moz-linear-gradient(
    center left,
    rgb(255,143,212) 41%,
    rgb(255,153,216) 56%,
    rgb(255,173,225) 100%
);
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
    /* font-size: inherit;
    font-weight: inherit;
    vertical-align: inherit;
    line-height: inherit;
    font-family: inherit; */
    letter-spacing: inherit;
    color: inherit;
    overflow: visible;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    background: none;
    background-image: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
}

Feito isso, procure pela tag </body> no final do documento XML .
Copie o código abaixo e cole ANTES / ACIMA de </body>

<script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js'type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('.comment-body p').emoticonize({
//delay: 800,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
</script>

Salve o template.
Copie o endereço abaixo, que são as imagens que eu editei para esse exemplo e cole em um bloco de notas.

<img src='http://2.bp.blogspot.com/_DCJ4PAWLOdE/TLbcdwvITLI/AAAAAAAAE60/9xNKzhbaqbM/s1600/Emoticons.png'/>

Volte a página “Editar HTML” , clique na opção “Expandir modelos de widgets” e procure pelo seguinte trecho:

<data:blogCommentMessage/></p>

Cole EXATAMENTE ABAIXO dele, o endereço das imagens que você copiou em seu bloco de notas.
Visualize e se estiver tudo bem, salve o template.

Prontinho. Vai ficar igual ao meu!

Quanto vale o seu blog ou site?

2011-06-02T14:09:00.001-07:00

Você já parou pra pensar quanto vale seu site ou blog? Saiba que existem diversos serviços online, que fazem estimativas do valor de revenda de um site. Não sei se podemos confiar neles, mas dá para se divertir bastante.

O site BizInformation , por exemplo, se baseia no tráfego capturado pelo site Alexa. Para fazer o cálculo, digite o endereço do site/blog e clique sobre o botão “valor”

Alguém quer comprar o Dicas Blogger???? Vendo pela bagatela de R$144.385,97 :D

O Biz Information já foi sugerido até pelo site da revista Info:

Serviço informa quanto vale o seu site

Ao final da avaliação, aparece um código pra colocar um pequeno botão no blog.

O meu site valeR$144.385,97

Segue uma lista de serviços que fazem esse tipo de cálculo:

Lembrem-se que são apenas estimativas. Como exemplo, posso citar que o número de visitantes e de visualizações diárias do Dicas Blogger, que aparecem noBizInformations, são muito menores do que na realidade. Esses valores podem ser conferidos no nosso Midia Kit.

Novo gadget para enviar postagens por e-mail

2011-06-02T14:07:00.001-07:00

Frequentemente vemos no Fórum de Ajuda do Blogger usuários perguntando como colocar em seus blogs um gadget que permita a seus visitantes cadastrarem um e-mail para receber as novas postagens; até hoje a melhor forma de fazer isso era usando a opção Email Subscriptions do Feedburner, mas agora temos um novo gadget disponível no painel do Blogger que adiciona esta mesma função em nossos blogs sem ter de configurar nada no painel do Feedburner.

O Blogger Buzz anunciou o Gadget Follow by e-mail, que permite que os leitores de um blog cadastrem seus e-mails para receber as novas postagens publicadas.
Para usar este novo gadget, vá até a guia Elementos de Página do painel do Blogger, clique em Adicionar um gadget e escolha na lista o gadget Seguir por e-mail como é mostrado na imagem abaixo.

Na próxima janela você pode configurar o Gadget inserindo o Título que preferir e verificar se o feed do seu blog foi detectado corretamento. Veja a imagem abaixo.

Caso o gadget informe que seu feed não foi encontrado é provavel que você não tenha o feed do seu blog configurado no Feedburner; neste caso leia o artigo Como usar e configurar o Feedburner.

O interessante de usar o Feedburner para oferecer subscrições por e-mail é que você tem acesso as estatísticas de assinantes que o sistema gera.

Novas opções de visualizações no Blogger

2011-05-31T16:32:00.001-07:00

No dia 31/03, foi anunciado no blog oficial Blogger Buzz a implementação de novas formas de visualização de blogs do Blogger, usando AJAX, HTML5 e CSS3. Para experimentar o novo recurso, digite na barra de endereços do seu navegador o endereço do seu blog e escreva a palavra view logo após. Exemplo: http://www.maniablogs.co.cc/view/sidebar

No alto, à direita, existe um menu com diversas opções de visualização. Basta passar o mouse para testar todas elas.

Conforme já foi anunciado no dia 15 de março - E vem aí, muito mais novidades para o Blogger! – irá aconteceu uma mudança radical na interface do Blogger, o que é muito bom, já que demonstra que estamos rumo à modernidade. Por outro lado, grande parte dos posts do Dicas Blogger ficarão obsoletos e eu ainda estou pensando em como resolver esse problema. Até lá, aguardemos.

Como recuperar conta no Twitter

2011-05-31T16:30:00.000-07:00

Se você apagou / deletou sua conta do Twitter por engano ou teve a mesma hackeada, saiba que é relativamente simples obtê-la de volta e a solução está na Central de Ajuda do Twitter.

Entre em http://support.twitter.com/requests/new e escolha a primeira opção “Problemas para acessar a conta”.

Aparecerá a seguinte mensagem:

Clique no segundo botão e escolha a opção que se encaixa no seu caso

Se o seu caso for de conta desativada ou hackeada, marque a opção 4 e preencha todos os campos solicitados, fornecendo o maior número de detalhes.

Em alguns dias, você receberá um email do suporte do Twitter, com as coordenadas para reativar sua conta, mas atenção: eles irão entrar em contato através do email que você havia usado para fazer seu cadastro no Twitter.

Fonte: DicasBlogger

15 dicas para melhorar seu blog hospedado no Blogger

2011-05-31T16:28:00.000-07:00

Como vocês sabem iniciei em Fevereiro desse ano um projeto na plataforma Blogger, oQuero Criar um Blog. O objetivo desse projeto é mostrar que é possível ter um blog de sucesso na plataforma Blogger, por isso criei o blog e fui evoluindo aos poucos para mostrar como fazer um blog de sucesso, mesmo sem muito conhecimento em tecnologia e informática. Nesse artigo vou trazer uma relação de 15 dicas para melhorar seu blog hospedado no Blogger. É uma relação retirada do QCB e listada aqui para alcançar você que ainda não conhece o projeto. Confira!

Como criar banner simples com o Photoshop

2011-05-03T08:01:00.001-07:00

Já que vocês gostaram tanto do post anterior, resolvi fazer uma pequena série de tutoriais sobre o Adobe Photoshop. Antes de mais nada, quero dizer que não sou nenhuma expert no assunto, mas me viro bem com ele :)

Em 2008, eu fiz uma vídeo-aula ensinando a criar o banner estático no Photoshop, mas, sinceramente, eu não tenho muita paciência para assistir tutoriais em vídeo – prefiro em texto e imagens. Pensando nos impacientes como eu, resolvi fazer um tutorial semelhante, porém escrito e já com o Photoshop CS4.

A ABRAWEB – Associação Brasileira de Web Designers e Desenvolvedores – padronizou os tamanhos e tipos de banner para uso na web e vocês podem escolher entre os vários modelos disponíveis - Padrões de Banner Abraweb.

Vou utilizar o modelo que é mais usado em blogs – 120 x 60px - mas eu penso que cada um pode criar um banner do tamanho que for melhor para o seu blog.

Para ampliar as imagens utilizadas neste post, basta clicar sobre elas.

Abra o Photoshop, clique em arquivo e em novo. Escolha o tamanho 120 x 60px, com fundo transparente (figura 1). Como o tamanho do banner é muito pequeno, iremos aumentá-lo para termos melhor visualização.

Clique em imagem e tamanho da imagem (figura 2). Aumente para 600 x 300 px

Agora vamos colocar uma cor de fundo. No Photoshop podemos usar uma cor sólida ou um degradê (figura 3). Vamos escolher degradê pra ficar mais emocionante. Escolha as cores que farão parte do plano de fundo, clicando no local indicado pela seta 1 da figura 4. Escolha as 2 cores separadamente.

Selecione a ferramenta degradê (figura 3) e passe a seta do mouse dentro da imagem e de uma ponta a outra ( figura 5) Repita até encontrar a cor ideal (figura 6)

Selecione a ferramenta caixa de texto ( figura 7) para escrever dentro do banner. Escolha o tipo e o tamanho da fonte (figura 8) e as cores (figura 4)

Escreva o que desejar e, se quiser incrementar, passe o mouse sobre o texto todo, clique em camadas, estilo de camadas e opções de masclagem (figura 9).

Faça vários testes, pois é bem divertido. No nosso banner de exemplo, eu usei apenas a sombra projetada ( figura 8), mas existem várias opções de mesclagem.

Agora vamos voltar em imagem, tamanho da imagem e reverter o tamanho para 120 x 60px. O banner está pronto! Salve no formato .png e caso queira colocar em seu blog para divulgação, acesse - Caixinhas para divulgar os banners do seu blog

Imagem para o cabeçalho do Blogger com Photoshop

2011-05-03T08:00:00.002-07:00

Continuando a série sobre o Adobe Photoshop, hoje vou explicar como criar uma imagem para o cabeçalho do Blogger/Blogspot.

Como o Dicas Blogger não é um blog sobre o Photoshop, estou tentando escolher temas que sejam do interesse de todos os blogueiros.

Pra saber o tamanho da imagem a ser usada em seu blog, vá em design>elementos de página> gadget cabeçalho. Clique em editar. No final do gadget, irá aparecer a largura máxima permitida (figura 1). Quanto à altura, a escolha é livre.

Vamos usar como exemplo o Template Magazine, cuja largura máxima é de 970 px.

Para ampliar as imagens deste tutorial, clique sobre as elas.

No Photoshop, clique em arquivo>novo. Escolha o tamanho de 970 (largura) por 150 (altura), com fundo transparente (figura 2). O resultado está na figura 3.

Agora vamos escolher uma ícone para incrementar nosso cabeçalho. Não sabe onde encontrar? Então acesse - 15 sites para busca de ícones web.

Clique em abrir e procure dentro do computador por um ícone de sua preferência. Para este tutorial, eu vou escolher um do Blogger (óhhhhh).

Agora temos duas abas abertas no Photoshop: uma com o fundo transparente e a outra com o ícone. Dependendo do tamanho do ícone, será necessário ajustar a sua altura à da futura imagem do cabeçalho. Em nosso exemplo, o cabeçalho vai ter 150px de altura, então o ícone deve ter menos do que isso.

Para ajustar o tamanho da imagem, clique em imagem>tamanho da imagem (figura 4) e altere para o valor desejado (figura 5)

Agora dê um Crtl+A e um Crtl+C no ícone. Abra a aba onde está a outra imagem e cole o ícone aí. Para uma melhor visualização, use o zoom. (figura 6). Agora selecione aferramenta de texto e escreva o nome do seu blog (figura 7)

Para alterar as cores, passe o mouse sobre o texto e selecione a cor (figura 8). Siga o mesmo procedimento para alterar o tipo da fonte (figura 9)

Para movimentar o texto e o ícone, use a ferramenta mover (figura 10). Com a ferramenta mover ativada, clique com o botão direito do mouse sobre a parte a ser movimentada (figura 11) e deslize a imagem com a seta do mouse.

A imagem do cabeçalho está pronta (figura 12). Agora é só salvá-la (figura 13) no formato .png e fazer o upload para o seu blog.

Este foi um tutorial super básico. Recomendo que vocês explorem os maravilhosos recursos do Photoshop. Caso queiram utilizar novas fontes, acessem:

Instalando novas fontes no Photoshop

Como hospedar imagens no Picasa

2011-05-03T08:00:00.000-07:00

Eu sempre falo do Picasa Web – o serviço de armazenamento de imagens do Google – em meus posts, mas só recentemente é que me dei conta de que não existe um tutorial em nossos arquivos ensinando, passo-a-passo, como utilizá-lo. #fail

Temos à nossa disposição, diversos sites que aceitam hospedar imagens, tais como Flickr, ImageShack e Photbucket - Hospedagem gratuita de arquivos para download.

O diferencial, para nós blogueiros, do Picasa Web em relação aos demais, é que o serviço já está integrado com a nossa conta do Google e do Blogger.

Todas as imagens que usamos em nossos templates, ficam armazenadas lá. A principal função do Picasa, para blogs do Blogger, é hospedar a imagem e fornecer a url (ou link) que utilizaremos em banners, backgrounds, ícones, gadgets e etc.

Como usar o Picasa Web

Faça o login com sua conta do Google. Lá você já vai encontrar alguns álbuns que foram criados, automaticamente, pelo Blogger. Clique no botão fazer upload.

A seguir, selecione um dos álbuns disponíveis (1) ou crie um novo álbum (2)

Na próxima página, clique no botão arquivo (1) e procure pelas imagens em seu computador (2). Após selecionar todas, clique no botão iniciar upload.

Você vai ser direcionado para o ábum onde a imagem foi armazenada. Escolha uma das imagens, clique sobre ela e, com o botão direito do mouse, copie o endereço.

Acesse os posts abaixo para aprender um pouco mais sobre imagens em blogs:

Problemas com ImageShack e Picasa

2011-05-03T07:58:00.000-07:00

Há cerca de 1 semana, vários usuários estão reportando um grave problema com seus templates. No lugar das imagens habituais, aparece um sapo dentro de um cubo de gelo. Teoricamente não se trata de um bug do Blogger e sim do siteImageShack.

Por mais que a gente avise que é imprescindível fazer backup das imagens contidas nos templates, muita gente não faz e acaba se dando mal.

Perdi a conta das vezes que sites que hospedam imagens deixaram templates completamente deformados, seja por causa de bugs, seja por causa de excesso de banda.

Para resolver o problema com o Imageshack, é preciso procurar as URLs dentro do template, colar no navegador, salvar as imagens e hospedá-las em um local seguro. Pra fazer isso, leia o 1º post da lista acima.

Como nem tudo são flores e o Blogger faz coisas que até deus duvida, temos um novo probleminha com as URLs do Picasa. Sabe-se lá porque, ao colarmos um código no gadget HTML/javascript que contenha uma URL do Picasa, o Blogger está modificando o formato das URLs.

Experimente colar o código abaixo no gadget HTML/javascript, salvar e visualizar.

<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO TWITTER'>Siga no Twitter</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DOS FEEDS'>Assine os feeds</a>
</div>
<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png' style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO FACEBOOK'>Curta no Facebook</a>
</div>

Notou que as imagens desapareceram? Agora abra o gadget e veja que as URLs são as mesmas, PORÉM ao invés de letras maiúsculas e minúsculas, aparecem somente letras minúsculas.

E a solução? É ainda mais bizarra! Basta clicar em “Formato Rich Text” e pronto. Lá estarão elas novamente. Prefiro nem comentar ¬¬

Atualização em 04/03/2011

O Fabiano Roberto, do Dicas para Blogs, publicou um post bem legal explicando como hospedar imagens no próprio Blogger #ficadica

Como colocar banner em flash no Blogger

2011-05-03T07:56:00.000-07:00

Para inserir um banner no formato flash (.swf) no Blogger, é preciso hospedar a animação em algum servidor que suporte flash, copiar a URL (endereço) e utilizar o código abaixo, colando-o no gadget HTML/javascript.

Antes de colar o código, faça as substituições necessárias, assinaladas em verde (largura e altura do banner) e em vermelho (URL do banner).

O Picasa Web não aceita arquivos em flash, mas o site Imageshack sim.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="LARGURA" height="ALTURA" >
        <param name="movie" value="URL DO BANNER" />
        <param name="quality" value="high" />
        <embed src="URL DO BANNER" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width=" LARGURA" height=" ALTURA ">
</embed> </object>

Como colocar anúncios nos posts do Blogger

2011-05-03T07:54:00.000-07:00

Apesar de já ter feito 1 post anterior ensinando a colocar anúncios dentro dos posts (artigos) do Blogger, ainda recebo comentários de leitores com dúvidas sobre esse tema. Na verdade, o problema reside no fato de que o local onde se deve inserir os anúncios varia de template para template, ou seja, o que pode dar certo para alguns, pode não ser o correto para outros.

Outra dúvida comum é como fazer para colocar anúncios lado a lado – como é aqui no Dicas Blogger – ou anúncios à esquerda ou à direita dos posts.

Antes de mais nada, você precisa saber se quer colocar o anúncio entre o título e o post ou no rodapé do post. Daí, será preciso entrar no HTML do template, marcar “expandir modelos de widgets” e procurar ( Crtl +F do teclado) pelas seguintes linhas, incluindo o código do anúncio nos locais indicados em amarelo.

ENTRE O TÍTULO E OS POST
<div class='post-header-line-1'>
Código do anúncio
NO FINAL DO POST
Código do anúncio
<div class='post-footer'>

ATENÇÃO! Para que o Blogger aceite o código, é preciso fazer uma conversão. Eu uso o site Blogcrowds. Basta colocar o código no local indicado e clicar em “parse”

Para saber os demais locais que aceitam anúncios, acesse:

Como colocar recursos nos posts via HTML

Como colocar os anúncios lado a lado

Isso vai depender da largura da área de postagens. Para checar, procure por #main no HTML e verifique o valor em width. Aqui no meu blog está assim:

#main {
width:626px;

No DB, consegui colocar 1 anúncio de 300 x 250 ao lado de 1 anúncio de 250 x 250.

Para tanto, gere os códigos em seu programa de afiliados, faça a conversão e cole – no HTML do template - um código embaixo do outro . Ficaria assim:

ENTRE O TÍTULO E OS POST
<div class='post-header-line-1'>
Código 300 x 250
Código 250 x 250

Como colocar anúncios à direita ou à esquerda dos posts

Será preciso usar um pouco de CSS:

Á ESQUERDA
<div class='post-header-line-1'>
<div style="float: left; margin: 5px”>
Código do anúncio
</div>

Á DIREITA
<div class='post-header-line-1'>
<div style="float: right; margin: 5px”>
Código do anúncio
</div>

Esses métodos funcionam nos meus templates, mas pode não funcionar em outros e eu não vou ter como ajudá-los, pois cada modelo tem suas características próprias. O que eu recomendo é que vocês usem um blog de testes e façam suas descobertas :)

Nunca se esqueçam de verificar se o programa de afiliados que vocês usam ,permite anúncios entre as postagens. Bons rendimentos a todos!

Fonte: DicasBlogger

Novidades do Blogger para 2011! Novo editor, novo painel e muito mais!

2011-05-03T07:48:00.000-07:00

O Blogger anunciou novidades para 2011! Uma renovação completa no design, uma integração com oGoogle Web Toolkit, opções de layouts para versão mobile e algumas novidades ainda não reveladas.

Google Web Toolkit:
O Google Web Toolkit é um toolkit de código-fonte aberto permitindo desenvolvedores a criar aplicativos com tecnologia Ajax em linguagem de programação Java. GWT suporta cliente-servidor, desenvolvimento e debugging em qualquer IDE Java. Exceto por algumas bibliotecas nativas, tudo é fonte Java que pode ser construído em qualquer plataforma com o GWT incluído Ant. Ele está licenciado sob a Licença Apache versão 2.0.
por Wikipédia

Com essa integração, acredito que grandes ferramentas poderam ser desenvolvidas! Tudo indica que o Blogger vai liberar espaço para plug-ins (como no WordPress). o/

Também contaremos com um novo painel de controle:
Antes:

Depois:

Também teremos um editor de postagens mais moderno, estilo Word.
Antes:

Depois:

Veja o vídeo produzido pela equipe do Blogger (em inglês):

O que você Achou? Comente.
Fonte: CódigosBlog

A Nova Versão do Google Analytics

2011-03-28T16:12:00.000-07:00

Conforme divulguei recentemente no Twitter, o Google liberou uma página de cadastro para quem quiser testar a nova versão do Google Analytics. Para quem não conhece, trata-se de uma das melhores ferramentas de análise de estatísticas de acesso a blogs e sites. Fiz minha inscrição esta semana e o acesso à nova versão já foi liberado! Neste artigo, compartilharei com vocês minhas primeiras impressões sobre a ferramenta.

Trata-se de uma ferramenta grátis e poderosa para você analisar como seus visitantes interagem com seu blog: de onde eles vêm, o que eles leem, quanto tempo ficam em seu blog, que browser utilizam e muitos outros. Por isso, é uma ferramenta indispensável para quem quer ter informações relevantes sobre seu site ou blog, que auxiliarão a direcionar seu trabalho.
No artigo Looking towards the future of Google Analytics, a Google anunciou que apresentaria em breve as mudanças da nova versão, que estaria disponível a um pequeno grupo que quisesse testá-las. O cadastro poderia ser feito neste link (ainda disponível) e a nova versão seria liberada gradativamente.
Hoje, tive a grata surpresa de ver o link “Nova versão” na minha barra do Google Analytics. Ao clicar nele, tive o acesso à nova versão, mais “clean” que a anterior. Nos próximos tópicos, compartilho com vocês minhas primeiras impressões sobre a nova versão.

1. Nova página inicial

A nova página inicial tem um visual bem mais “clean” que a anterior. Não são mais mostrados nela as informações de resumo de seus sites - e eu gostava de vê-las logo ao entrar. No entanto, você tem links para ir direto às seções de Visitantes, Fontes de Tráfego, Conteúdo e Conversões de cada site. São também mostradas agora as postagens recentes do blog do Google Analytics.
Antiga versão
Nova versão

2. Painel de Controle

A primeira novidade é que agora você possui não mais apenas um painel de controle. Você pode criar quantos painéis de controle desejar, para mostrar as informações mais importantes de seus sites. Assim, você pode criar painéis diferentes e reunir neles as informações mais importantes agrupadas por categoria, por exemplo.
O novo “Painel de Controle” é totalmente customizado, e você pode incluir nele as informações desejadas no formato que escolher (Métrica, Gráfico, Cronograma ou Tabela). Você pode escolher as Dimensões (Título da Página, Browser, Origem, Região etc.) e a Métrica que será exibida (Visitas, Visualizações, % Novas Visitas, Taxa de Rejeições etc.). Ele ficou mais flexível, mas pode confundir os iniciantes.

Algo que senti falta na nova versão foi a opção “Visualizar Relatório”, que ficava abaixo de cada indicador e que levava para a página com informações mais completas.
Antiga versão
Nova versão

3. Meu site

Esta área só existe na nova versão, pois na antiga ela era mostrada juntamente com o “Painel de Controle”. Nela, são mostradas as informações detalhadas sobre seu site, dividas por categorias, similares às da versão anterior: Visitantes, Fontes de Tráfego, Conteúdo e Conversões. À medida em que você navega pelo menu, são mostradas as subcategorias.

Antiga versão	Nova versão

4. Inteligência

Na versão anterior, os alertas inteligentes do Google Analytics eram exibidos como uma das categorias do “Painel de Controle”. Agora, eles têm uma área separada, mas dentro de “Meu site”.
Antiga versão
Nova versão

Conclusão

O que mais chama a atenção na nova versão do Google Analytics é o seu visual. Em uma palavra simples, ela ficou mais “bonita” que a versão anterior. As possibilidades de customização dos Painéis de Controle também são interessantes.
Mas, senti falta de alguns recursos interessantes da versão anterior, como o resumo dos sites ao entrar na ferramenta e o link para relatórios detalhados a partir do Painel de Controle.
Como primeira impressão, eu preferia a versão anterior. Mas, essa opinião pode mudar na medida em que eu me habitue com a nova versão. Continuei trazendo a vocês novas informações aqui no Gerenciando Blog.

E você, já está utilizando a nova versão do Google Analytics? O que achou dela? Deixe um comentário!

Formulário de Contato no Blogger - Enviar Email

2011-03-28T12:54:00.000-07:00

Todos nós blogueiros sabemos da importância de manter uma certa proximidade com nossos leitores. Umas das melhores maneiras de fazer isto é instalando um formulário de contato em nosso blog, através dele nossos leitores poderão nos dar sugestões, avisos, elogios e muito mais. Outra vantagem de colocar um formulário de contato no blog é que você não gasta revelar seu e-mail para as pessoas poderem te contatarem. Sem dúvida as vantagens são inúmeras, e se fosse citar todas elas teria que escrever um post só para isso mas não é este o caso.

Hoje caros leitores do “Dicas para Blogs” eu ensinarei como Instalar o Formulário de Contato do Site JotForm no seu blog: um formulário mega completo, inclusive com opção de personalização do plano de Fundo e opção de envio de arquivo.

Vantagens de usar o JotForm!

Totalmente gratuito;
É confiável, possuindo mais de 350 mil usuários;
Diversas opções de personalização, inclusive com plano de fundo;
Possibilidade de modificar o formulário criado mais tarde;
Possibilidade de upload de arquivos como: fotos, textos, apresentações de slides e vários outros tipos de arquivos pelo formulário;
Rápido e simples;
Inexistências de anúncios ou logos;
Salvamento automático;
Em português.
Introdução

O JotForm é um formulário de contato bastante completo, entre as diversas opções de personalização chama atenção alguns recursos como:

Plano de Fundo;
Possibilidade de envios de arquivos;
Avaliação com estrelas;
Recurso: Formulário Expansível;
Recursos de pagamentos, podendo os usuários utilizarem o formulário para efetuar pagamentos. Muito útil para blogs que vendem produtos!
Painel de controle;
Inserção de Texto Livre (HTML);
Recurso: Quebra de página;
Confirmação, utilizada para evitar spam. Entre outras coisas.
Outro fato interessante sobre o JotForm é que não existem anúncios ou logos, nem mesmo na versão gratuita. Isto torna o visual do seu formulário mais limpo e também dá a idéia de algo mais profissional, eu particularmente amei isso!

Para criar um formulário de contato no site, não é necessário criar uma conta, mais eu recomendo a criação de uma conta, pois, além de ser gratuita você fazendo isto terá a possibilidade de fazer modificações no seu formulário mais tarde e acompanhar estatísticas de uso do seu formulário através de um super painel de controle.

Etapa 1 – Criação da conta

Caso não deseje criar uma conta vá direto a etapa 2, mas lembre-se fazendo isso você não poderá modificar seu formulário mais tarde!

O primeiro passo neste momento é acessar o site http://www.jotform.com. Ao acessar o site o mesmo não deve estar em português, role a página até em baixo e selecione a opção português que esta em um menu drop dow no lado inferior esquerdo.

Agora a próxima coisa a se fazer é clicar no botão amarelo “Criar uma Conta – É Grátis!!’. Agora na próxima página você deve inserir os dados solicitados e clicar em Criar Minha Conta. Pronto a sua conta já esta criada, mais você deve fazer mais uma coisa antes de começar criar seus formulários: confirmar sua conta! Isto é uma coisa bastante simples e aposto que você já deve ter feito isto ao menos uma vez. Acesse a caixa de entrada do seu e-mail e clique no link enviado pelo site para confirmar sua conta.

Agora volte ao site e faça login.

Etapa 2-Inserção de campos do Formulário

Nesta etapa aprenderemos a inserir os campos desejados no seu formulário e na etapa seguinte aprenderemos como publicar o seu Formulário.

Mas antes disso vamos fazer uma análise da tela principal de criação do seu formulário para um maior entendimento.

Vamos a compreensão?

1) Clique aqui para inserir o título do seu formulário. Esta parte não modificará nada no seu formulário, mais altera-rá o nome que ele será salvo tornando mais fácil sua localização caso você queira modifica-ló mais tarde.

2) Esta parte possui vários opções para modificar o visual geral do seu formulário, tais como: fonte, cor da fonte, largura do formulário etc. Além de possuir os botões de ação salvar, visualizar, desfazer e refazer.

3) Esta parte esta relacionada diretamente com a segunda. Na verdade ela age como abas e quando clicadas modificam os elementos existente na parte 2. Mais a frente explicaremos isso melhor.

4) E finalmente a 4 parte, aqui estão todos os campos que podem ser inseridos no nosso formulário.

Agora que você já esta familiarizado com o nosso “painel de edição” podemos prosseguir. A inserção de campos nestes formulários é bastante simples e funciona a base de arrastar e soltar. Eu explico, você deve clicar e segurar o botão do mouse esquerdo sobre o campo que deseja inserir no seu formulário e arrastar e soltar em um espaço em branco.

Vamos a um exemplo para você poder compreender melhor. Suponha que você quer inserir no formulário um campo para o usuário que irá comunicar com você escrever seu nome, então você deverá clicar e arrastar o campo “Caixa de Texto” para um espaço em branco.

Note que surgiu uma terceira aba na “Parte 2” que eu expliquei anteriormente, esta aba serve para personalizar o campo que você inseriu. Todos os campos têm suas próprias opções de personalização, mas elas são fácies de entender, por exemplo, a opção Requerido serve para tornar o campo obrigatório de ser preenchido, não vou entrar em detalhes.

Na parte que está escrito Clique para Editar você deve por a função do seu campo, como no exemplo estamos querendo saber o nome do usuário devemos escrever algo como: “Nome”: ou algo do tipo.

Agora que você já aprendeu como inserir os campos e modifica-los, insira os campos que você deseja no seu formulário e vamos para a próxima etapa. Não vou explicar a função de cada campo separadamente, pois julgo não ser necessário e também iria gastar muito tempo, mas se alguém tiver qualquer dúvida relacionada a isto pode postar nos comentários que responderei.

Lembre-se de inserir o campo enviar formulário

Etapa 3- Configurar e Compartilhar

Agora que seu formulário esta pronto, vamos ensinar a fazer os ajustes finais e inseri-ló nos seu blog, Para isso clique na aba Configurar e Compartilhar.

Alertas de e-mail: Clique aqui e siga as instruções para adicionar o seu e-mail. Se não fizer isso não receberá as mensagens enviadas por seus leitores no seu e-mail. Pode acontecer que ao clicar seu e-mail já esteja lá, então você não gastará fazer mais nada nessa etapa.
Obrigado: Clique aqui para personalizar a mensagem de agradecimento que seu leitor verá na tela quando te enviar uma mensagem.

Compartilhar: Clique aqui e depois clique no ícone da plataforma blogger para receber o código para instalar seu Formulário no blogger. Ou então escolha outra plataforma, se não utilizar o blogger!

Vou ensinar aqui como instalar nos blogs que estão hospedados no blogger:
Depois de copiar o código fornecido, acesse o painel de controle do seu blog e clique em editar postagens, depois clique de novo em editar páginas e clique finalmente em criar um nova página.
Insira um título para sua página e um texto explicando a função do formulário ou algo do tipo, agora clique em editar HTML e cole o código fornecido pelo site, agora publique a página e vá até ela para ver o resultado.
Também é possível publicar o Formulário em uma postagem, mas lembre-se você também deverá clicar em editar HTML para adicionar o código assim como nas páginas estáticas.

Código Fonte: Clique aqui se quiser copiar o código do seu formulário sem nenhuma personificação.
As opções Preferência e Condições não são necessárias, mas se quiser exporá-las sinta a vontade!

Caso queira ver as estatísticas de uso do seu formulário volte ao site depois de seu formulário já estar instalado no seu blog, faça login e clique em Meus formulários.
Espero que gostem! Por se tratar de um tutorial longo estou ciente que podem surgir dúvidas, então eu novamente reforço a minha posição: qualquer dúvida que você leitor tiver pode postar nos comentários que responderei prontamente!