Fazendo seu favicon com o favicon.cc, e colocando no Blogger

Antes de tudo, favicon é imagem que aparece no barra do navegador, como na imagem acima, que mostra o favicon do Google, hoje vou mostrar como colocar um no seu blog no Blogger.
Primeiro vamos precisar de uma imagem quadrada, e menor que 100kb. Você pode usar o símbolo do seu blog e se não souber usar programas de edição de imagem, pode também usar o favicon.cc.
Quando você entrar no favicon.cc já vai dar de cara com a interface de criação do favicon, na parte inferior você poder ver uma preview em tamanho real. Baixe o favicon clicando em "Download Favicon" em baixo da preview.

Depois de baixar, vamos ao Blogger, vamos em "Design" > "Elementos da página", lá é possível observar um widget que modifica o favicon.

Clique em "Editar", selecione o favicon, que pode ser tanto uma imagem qualquer, quadrada e com menos de 100kb, ou o favicon que você pode fazer pelo favicon.cc, depois disso é só salvar, e esperar até que mude o favicon.

Leia mais

Visualizações dinâmicas no blogger

Vídeo de demonstração

A visualização dinâmica no Blogger é um recurso que ja foi testado tem algum tempo, são 7 templates, que oferecem uma melhor navegação ao usuário.

Blogger:
Hoje nós estamos disponibilizando 5 novos templates dinâmicos no Blogger e que em breve você poderá customizar e usar em seu blog. Essas novas visualizações usam o que há de mais novo na tecnologia para web, incluindo AJAX, HTML5 e CSS3, para oferecer um conjunto de benefícios para você e seus leitores:

Rolagem de página infinita: leia mais posts sem precisar recarregar ou clicar para abrir uma nova página;
Novos layouts: diferentes visualizações para diferentes blogs;
Velocidade: As imagens só são carregadas à medida que você precisa vê-las;
Interatividade: Agora há mais formas de interagir e experimentar o conteúdo dos blogs.

Para ativar, vá em "Configurações" depois "Formatação" e em "Ativar visualizações dinâmicas" selecione a opção "Sim".

Para ver no seu blog, adcione "/view" no fim do endereço, exemplo:

SEUBLOG.BLOGSPOT.COM/VIEW
SEUBLOG.COM/VIEW

Leia mais

Encurtando a URL do seu perfil do Google Plus

Com o  advento do Google Plus, a rede social que veio para bater de frente com o Facebook, surgiu um aplicativo para encurtar a URL do perfil, que é grande e cheio de numeros, dificil de lembrar. Para usar o Google Plus Nick é simples bastar pegar o ID do Google + que fica na URL do seu perfil:

Ir no Google Plus Nick colocar o seu nome e o ID, depois clicar em "add", e ai você recebera uma url tipo:

gplus.to/SEUNOME

Leia mais

Colocando a data do lado do titulo do post no blogger

Nas maioria das templates a data vem sempre padrão em cima do post, hoje vou ensinar como modificar e colocar ela do lado do titulo do post. Você pode ver um exemplo no fim do post.

1- No painel do blogger vamos na aba "Configuração" > "Formatação" e em "Formato de data", escolha a penúltima opção. E depois clique em "Salvar Configurações" para salvar.

2- Agora vamos em "Design" > "Editar HTML" e clique em "Expandir modelos de widgets". Procure por:

</head>

E abaixo cole o seguinte código:

<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;;
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
anio = &quot;<div class='fecha_anio'>&quot;+da[2]+&quot;</div>&quot;;
document.write(dia+mes+anio);
}
</script>

2-Agora procure por:

]]></b:skin>

E acima cole o seguinte código:

#fecha {color: #a80000;padding-top: 2px; margin-right:5px;float:left;text-align:center;border: 1px none #dedede;list-style:none;display: block;}
.fecha_dia {display:block;font-size:18px; line-height:16px;font-family:'Arial';letter-spacing:-1px}
.fecha_mes {font-size:10px;line-height:9px;text-transform:uppercase;display:block;}
.fecha_anio {font-size:9px;line-height:8px;display:block;}

3- Agora vamos procurar por:

<b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>

Apague todo o código acima e cole em seu lugar o seguinte código:

<b:if cond='data:post.dateHeader'>
<div class='date-header'><div id='fecha'><script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;)</script>
</div></div>
<b:else/>
<div class='date-header'>
<script>document.write(lastDate);</script>
 </div>
</b:if> 

Clique em "Salvar modelo" e a modificação já está instalada. Você pode colocar uma imagem de fundo, trocando o código:

#fecha {color: #a80000;padding-top: 2px; margin-right:5px;float:left;text-align:center;border: 1px none #dedede;list-style:none;display: block;}

Por:

#fecha {background: url(URL DA IMAGEM) no-repeat;color: #a80000;padding-top: 2px; margin-right:5px;float:left;text-align:center;border: 1px none #dedede;list-style:none;display: block;}

Para trocar a cor do texto, mude a parte selecionada em LARANJA no código da parte 2, e para adicionar uma borda, troque a parte selecionada em AZUL, na parte 2, por "solid", sem aspas.

Exemplo

Leia mais

Widget, caixa flutuante com jQuery na pagina inicial no blogger

Hoje vou mostrar como inserir uma caixa flutuante no canto da página, essa caixa funciona como um widget, sendo assim você pode inserir o que quiser nela pelo "Elementos de Página", sendo necessário mexer na sua template apenas na instalação. Vamos aos códigos.

1- Antes de tudo é recomendável que faça um backup da sua template, clicando em "Baixar modelo completo" em "Design > Editar HTML".

2- Feito o backup da sua template, vamos no "Editar HTML", procure por:

]]></b:skin>

E acima dele insira o seguinte código :

.mensagem{
    border:1px solid #333;
    position:fixed;
    width:250px;
    margin: 0 5px 5px 0;
    background:#fff url(http://1.bp.blogspot.com/-U5GF5XlYjgM/Tn4ldPCJz0I/AAAAAAAAAGM/DkYNTrTGqKI/s1600/top.png) repeat-x;
    padding:5px;
    right:2px;
    bottom : 25px;
}

3- Depois novemente procure por:

]]></b:skin>

E insira abaixo o seguinte código:

<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
// Carrega jQuery
google.load("jquery", "1.3");

google.setOnLoadCallback(function() {
$(document).ready(function()
{
//Caixa cai quando a pagina é carregada
    $("#caixa").animate({
        bottom: "-1px"
      }, 2500
).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
//Fechar a caixa quando o X é clicado
   $("#fechar_mensagem").click(function()
    {
       $("#caixa").fadeOut("slow");
    });
});
});
</script>

3- Agora procure por:

</body>

E acima insira o seguinte código:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='mensagem' id='caixa'>
<img id='fechar_mensagem' src='http://2.bp.blogspot.com/-ghZFPhvw6Ek/Tn4uHSsEPsI/AAAAAAAAAGY/M_4jzke5Pvw/s1600/Untitled-1.png' style='float:right;cursor:pointer'/>
<div style='color: #fff;'>Blogger widgets</div><b:section class='widget1' id='widet1' maxwidgets='1'/>
<center><small><small>Widget modificado por <a alt='Blogocracia, dicas de comor criar um blog' href='http://www.blogocracia.com/' style='color: rgb(255, 153, 0);'>Blogocracia</a></small></small></center>
</div>
<b:else/>
</b:if>

Agora clique em "Salvar modelo", e a caixa ja estará funcionando. Para mudar o nome que vai ser visto na caixa edite o texto marcado em vermelho, pelo nome que queira.
Para inserir seus widgets na caixa, é simples, é só ir em "Design > Elementos da página" e no canto você vai ver a caixa flutuante. Parecido como na imagem abaixo.

Lembrando que a caixa flutuante irá aparecer apenas na página inicial, para não ficar cansativo para quem vê. È interessante colocar o Widget, "Follow by email", que está na página inicial dos widgets do blogger. Abaixo um link com um exemplo.

Blogocracia Testes

Leia mais

Remover widget Attribuition do rodapé do blogger

As novas templates do Blogger tem por padrão o widget Attribuition, que vem fixo no rodapé, apenas podendo editar e não excluir. Para retirar por completo, va em "Design" > "Editar HTML". Procure pelo seguinte trecho:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>

Apague tudo e salve, irá aparecer a seguinter mensagem:

Clique em "Excluir Widgets" e está feito.

Leia mais

Ativando a versão mobile do Blogger

A pouco o Blogger deu a opção de ter uma versão mobile do seu blog nativo, bastando apenas alguns cliques para ativar, essa opção é automática, quando alguém acessa o blog por meio de celular, o blogger reconhece e carrega sua versão mobile. No painel do Blogger, vá em "Configurações" e depois em "E-mail e Celular", escolha o modelo e ativa a versão mobile, marcando a primeira opção.

Para modificar o template mobile, é só ir em "Design" e depois em "Editar HTML" e procura por :

/* Mobile
----------------------------------------------- */

Assim você irá conseguir modificar sua template mobile. Uma outra dicas, para visualizar a versão mobile no sem usar um celular, é só colocar "?m=1" depois da URL do seu blog, assim :

http://www.blogocracia.com/?m=1

Aqui no rodapé vocês vão ver um link levando para a versão mobile do Blogocracia é interessante pois, o Blogger não reconhece alguns browsers mobiles, assim o usuario tem a opção de ir diretamente nele.

Leia mais

Como instalar o sistema de comentários IntenseDebate no Blogger

Uma das coisas que menos agrada no Blogger concerteza é o seu sistema de comentários, o formulário é "feio", não muito intuitivo, levando até as pessoas desistirem de comentar. Por isso apresento a vocês uma das melhores alternativas. Testado e aprovado.

 IntenseDebate

O IntenseDebate é o meu preferido para se registrar é só ir no site, é gratuito e a ativação é imediata. Ele permite modificar a aparência via CSS, o que permite que se encaixe melhor ao template do seu blog.
Permite que os visitantes comentem com o Twitter, Facebook, OpenID e com a própria conta do IntenseDebate. Também é possível que os visitantes assinem os comentários e os recebam por email, e exibe os avatares associados a conta usada. Você tem a opção de ativar a moderação de comentários, e é possível banir pessoas do comentários do seu blog. Vamos a instalação:

Como instalar

1- È preciso ter uma conta no IntenseDebate, para isso clique em "Sign Up" na pagina inicial, e depois preencha como na imagem abaixo:

È importante que você marque a segunda opção "I want to install IntenseDebate on my blog or website". Clique em "Sign Up" e confirme a conta pelo seu email.

2-  Logado no IntenseDebate ao lado direito vai ter uma opção "Manage blogs/sites" e logo em baixo um link "Install IntenseDebate". Clique nesse link para começar a criar o sistema de comentários.

Agora insira a URL do seu blog e clique em "Next Step". Na janela seguinte marque as duas primeiras opções da seguinte forma.

Depois você vai precisar baixar a sua template, para isso vamos no painel do Blogger, clique em "Design" e depois "Editar HTML".

Clique me "Baixar modelo completo" e irá começar o download da sua template.

Depois que baixar, vamos voltar para o site do IntenseDebate, vá para a opção 4 clique em selecionar arquivo, e escolha sua template que foi baixada no passo anterior.

Depois de clicar em "Upload File" o site irá te dar sua template modificada, por isso volte no "Editar HTML", e apague todo código que lá existir, volte no IntenseDebate, copie sua template modificada e cole no lugar. Depois clique em salvar modelo.

Se você fez todos o passos certos até aqui, seu blog já está com o IntenseDebate instalado e pronto para uso. Para fazer a moderação dos comentários, é preciso logar com a mesma conta que foi gerado o código do sistema de comentários do IntenseDebate.

Se quiser ver o sistema funcionando podem ir no meu Blog de Testes .

Leia mais

O que é, e como criar um blog

Bom, já que o Blogocracia é (ou pretende ser) um metablog, seu primeiro post, tem como objetivo explicar o que é um blog, e como criar um.

1- O que é um blog:

Um blog, é um site cuja estrutura permite sua rápida e fácil atualização, por meio de artigos ou posts. Podendo ter um ou mais autores, e esses o atualizam com uma certa frequência. Os blogs permitem uma melhor interação do leitor com o autor, por meio dos comentários, embutido em cada postagem.

2- Plataformas

Atualmente temos diversas plataformas disponiveis para criar uma blog, as duas mais conhecidas e usadas, são o Blogger e o Wordpress, ambos tem alto suporte da comunidade, sendo facil achar plugins, templates e dicas para usar os mesmos. Temos também o Tumblr que também é bastante usado.

2.1- Blogger

O Blogger é a plataforma da Google, não necessita de uma hospedagem, ao criar um blog você recebe um subdominio (seublog.blogspot.com), das que não exigem hospedagem é concerteza o mais usado, com ele você tem várias possibilidades, vendo que existe vários blogs que focam seu conteúdo em dar dicas para ele. Com o Blogger você pode ter seu Blog "sério", vários gadgets e hacks que dão a ele funcionalidades além do que se vê quando se acaba de criar um blog, ele também permite a troca do subdominio (blogspot.com) por um dominio proprio gratuitamente. Se você está começando agora, o Blogger é a plataforma perfeita para você, manuseio simples e mesmo sabendo pouco conseguirá bastante com o Blogger.

2.2- Wordpress

O Wordpress existe em duas versões, e nas duas é gratis, tem a versão que não necessita de hospedagem, o Wordpress.com, assim como o Blogger, não é necessário ter um dominio proprio para se cadastrar, eles te dão um subdominio (seublog.wordpress.com), nessa versão sem gastar algum dinheiro você não poderá fazer muita coisa, pois o Wordpress.com cobra para você alterar o dominio, editar o css e outras funcionalidades, você fica sujeito a usar templates prontas, alterando apenas o logotipo, caso não esteja disposto a pagar.

 A outra versão, o Wordpress.org, é necessário possuir uma hospedagem, e um domínio proprio para poder usar, ou seja, tem que desembolsar algum dinheiro, mas como retorno você obtem total controle do seu blog, podendo editar até os minimos detalhes. Possui uma gama de plugins disponiveis, que adicionam várias funcionalidades, tendo vários plugins voltado ao SEO do blog, tem um ótimo sistema de comentários, que usa o gravatar para exibir a foto de quem comenta. Também tem vários sites que oferece suporte a ele, com templates e plugins gratuitos, se você estiver disposto a desembolsar uma grana, essa é a plataforma para você.

Então é isso, terminamos aqui, como de prache, o primeiro post do Blogocracia, em breve mais posts para nos aprofundarmos mais nesse universo chamado blogosfera.

Leia mais