Hacks para o Blogger

Se você também utiliza o Blogger para os seus posts, aqui vão algumas dicas que eu descobri recentemente googlando por aí.

Remover barra de navegação

Neste tópico da ajuda, você vai encontrar informações a respeito de como ativar a barra de navegação, e vai notar que a desativação é feita publicando seu blog por FTP. Eu nem sabia que poderia publicar via FTP, e não quero isso. Uma forma mais simples de escondê-la é alterar a folha de estilos padrão para deixá-la invisível. Acesse o painel de configurações, e em seguida:

• Clique na aba Design, e depois em "Designer do Modelo"
• Em seguida, vá em "Avançado", e clique na seção "Adicionar CSS"
• Insira a seguinte regra CSS ao modelo escolhido:
  

body .navbar {
    display: none !important;
}

Pronto, agora a barra não estará visível. Note que ela continua lá, na verdade, mas ninguém deve vê-la.

Adicionar coloração de sintaxe

Se você vai postar trechos de código, provavelmente vai preferir que eles estejam com a sintaxe em destaque, pois isso ajuda (e muito) na leitura. Existem algumas formas de se fazer isso, e a que eu achei mais simples é a de utilizar o prettyprint. Ele é bem mais simples, e detecta automaticamente a linguagem utilizada para inserir a coloração.

Você precisa baixá-lo e hospedá-lo em algum lugar. Se você tem uma conta do Google Storage for Developers ou em algum dos serviços como o Dropbox ou simliares, pode publicar o arquivo na Web.

Uma forma de inserí-lo em seu Blog é editar o HTML do seu modelo. Os novos modelos são bem interessantes, e construídos em formato XML. Entretanto, ao trocar de modelo ou realizar alguma configuração mais avançada, você pode acabar perdendo este código e ter de refazê-lo.

Outra alternativa é inserir um gadget no Blog que permita inserir código JavaScript e que não é perdido ao trocar/alterar seu modelo. Para isso, em seu painel de controle:

• Clique na aba "Design", e em seguida na seção "Elementos da página".
• Na área do rodapé (para evitar que o carregamento dos posts fique muito lento), adicione um gadget do tipo HTML/JavaScript com o seguinte conteúdo:

<script type="text/javascript" 
    src="http://<local onde hospedou o script>/prettify/prettify.js"></script>
<script type="text/javascript" language="javascript">
(function() {
var css = document.createElement('link');
css.rel = 'stylesheet'; css.type = 'text/css';
css.href = 'http://<local onde hospedou o script>/prettify/prettify.css';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(css, s);
})();
prettyPrint();
</script>

Substitua os campos marcados com <local onde hospedou o script> apropriadamente para a sua situação.

Pronto, agora basta inserir em seus posts os trechos de código envolvidos por uma tag pre ou code, com o elemento class="prettyprint". Por exemplo:

<pre class="prettyprint">
<b>Sintaxe HTML</b>
</pre>

Alterar o favicon

Semelhante ao processo acima, você pode alterar o favicon do seu Blog utilizando um gadget de Script, agora com o seguinte conteúdo:

<script>
var icon = document.createElement('link');
icon.rel = 'shortcut icon'; icon.type = 'image/vnd.microsoft.icon';
icon.href = 'http://<local onde voce hospedou>/favicon.ico';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(icon, s);
</script>

Ao acessar o seu blog, ele terá um ícone customizado. Utilizei esta abordagem porque estava com uma certa preguiça em procurar as opções de configuração, mas eu acredito que isso seja possível de ser realizado de forma diferente.