Bloggermin

Acesse EbookDown e baixe livros grátis.

2017-06-09T13:14:00.005-03:00

O site EbookDown foi criado não com o objetivo de contribuir para a pirataria ou qualquer coisa do tipo, mas sim com o objetivo de espalhar o conhecimento.

Logo todos os arquivos do blog são retirados da própria Internet. O site não é responsável por qualquer arquivo que o usuário venha a baixar e para que irá utilizá-lo.

[EbookDown ##eye##]

Obrigado pela espera

2014-12-20T23:32:00.000-03:00

Passado quase um ano desde que fizemos esta longa pausa no blog e nas redes sociais. E nos últimos meses houve várias novidades no Blogger, que me considero perdido, mas com certeza muitos de vocês devem estar familiarizados.

Quero agradecer a você pela sua paciência, seu apoio, o seu encorajamento e sua plena participação, especialmente aqueles que ajudaram outros usuários a resolver suas dúvidas no blog, para eles um agradecimento especial.

E como você sabe que eu sou de poucas palavras não direi mais, porque temos de recuperar o atraso embora que lentamente.

Bloggermin está de volta.

O novo Editar HTML do Blogger

2013-05-18T17:21:00.001-03:00

Ao entrar no Editar HTML do meu modelo, notei algumas funcionalidades e melhorias que o Blogger incorporou no editor, tornando-o muito mais completo do que era há alguns dias.

Já havia muito tempo que Blogger mantinha o mesmo editor de HTML, e o mínimo que podemos fazer é agradecer pela nova mudança. O Blogger Buzz fez um artigo mencionando as atualizações, e o Bloggermin irá destacar:

Destaque de sintaxe: Agora o editor de HTML não tem nada a perder ao Notepad + + e similares, já que agora todos os códigos são realçados pela cor e além disso, cada linha é numerada:

Adeus ao Expandir modelos de widgets: Agora as etiquetas <b:skin/>, <b:section/>, <b:widget/>, <b:includable/> aparecem por padrão sem expandir, para poder ver todo o código é necessário pressionar em "►" ao lado do número da linha:

Ir para um widget: Blogger adicionou um menu suspenso, que serve para ir ao gadget que se deseja localizar ou editar. Considerado muito útil para aqueles que ainda sabem detectar gadgets dentro de seus modelos:

Formatar modelo: Outro recurso muito útil no Blogger, que permite limpar o recuo no código para assim trabalhar de modo mais confortável e manter uma ordem correta:

Sem dúvida, estas novas atualizações serão de grande ajuda para aumentar a produtividade/facilidade para projetar e modificar o seu modelo. Você gostou do novo editor HTML do Blogger? Deixe-nos saber a sua opinião.

Adicione a caixa de comentários do Facebook no Blogger

2013-04-08T00:01:00.000-03:00

Um dos temas mais solicitados é como colocar caixa de comentários Facebook no blog, e que às vezes se torna mais fácil comentar a partir do Facebook, pois a maioria está conectado a esta rede social o tempo todo, e além disso não precisamos entrar com nossos dados do Google para comentar em um blog que contém esse tipo de comentário.

Siga o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Veja O novo Editar HTML do Blogger

Eu vi esse método em Vagabundia, onde explica como adicionar o plugin de comentários Facebook de maneira que cada postagem tenha sua própria caixa de comentários e seja independente dos outros.

Tutorial

Passo 1:

Primeiro entre na seção Modelo > Editar HTML e marque Expandir modelos de widgets, então, busque pela etiqueta:

<body>

ou caso não encontre procure por:

<body expr:class='"loading" + data:blog.mobileClass'>

Abaixo de qualquer um deles adicione:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Em seguida, encontre por:

</b:includable>
<b:includable id='status-message'>

E logo acima dele cole o seguinte:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>

Com isso, você já terá a caixa de comentários do Facebook em seus artigos (lembre-se de entrar em um post para visualizar).
A caixa estará acima do formulário de comentários do Blogger. Se você desejar que os comentários do Facebook fique abaixo do formulário de comentário do Blogger, então, coloque o código do plugin logo acima de:

</div>
<b:if cond='data:post.includeAd'>

Dentro do código que adicionamos, teremos estes parâmetros:

data-num-posts='5'
data-width='500'
data-colorscheme='light'

O primeiro é o número de comentários a ser exibidos; o segundo é a largura do formulário; e o terceiro é a cor do formulário, você pode alterar light por dark.

Até aqui já temos o CommentBox Facebook, se quiser personalizá-lo um pouco pode colocar antes de ]]></b:skin> alguns estilos, como por exemplo:

#comentariosFacebook {
background:#F2F2F2; /* Cor de fundo*/
width:520px; /* largura */
padding:10px;
margin-top:0px; /* Mude para -180px, se você colocou abaixo dos comentários do Blogger */
}

Passo 2:

Se deseja que cada vez que alguém fizer um comentário você receba uma notificação do Facebook e poder moderar os comentários, será necessário criar um aplicativo. Mas para tal é necessário verificar a conta do Facebook.

Se assim for, vá para Facebook Developers e clique em Criar Novo Aplicativo.

Digite o nome do aplicativo, aceite os termos e clique em Continuar.

Na próxima tela clique em Site com login utlizando Facebook, digite a URL do seu blog onde colocou caixa de comentários e copie também o número listado no App ID.

Agora entre novamente em Modelo | Editar HTML do seu blog e adicione antes de </head> isto:

<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID do APLICATIVO' property='fb:app_id'/>

Em ID do aplicativo adicione a série de números que copiou. E em ID do usuario adicione o seu ID do Facebook, se você não sabe acesse este link:

http://graph.facebook.com/usuário

Altere onde se indica usuário pelo seu nome de usuário do Facebook e dê um clique, lá verá qual é o ID do seu perfil do Facebook.

Tendo feito isso entre em um artigo para ver sua caixa de comentários e clique em Configurações. Lá você verá várias opções para o plugin; onde diz Moderadores, adicione o seu nome e salve as alterações.

Depois de ter feito tudo isso, poderá moderar os comentários e receber as notificações na sua conta do Facebook cada vez que alguém fizer um comentário. Se não fizer isso, você ainda terá caixa de comentários do Facebook, mas sem estas opções.

Qualquer dúvida sobre o assunto é deixar um comentário.

Conhecendo o atributo Data do HTML5

2013-04-01T00:00:00.000-03:00

Quando não havia este atributo, para manter certas informações usavamos e usamos atributos comuns como title ou rel, até mesmo criavam atributos não reconhecidos, mas que poderiamos manipular com JavaScript.

Um exemplo claro em que seria apropriado usar esse atributo são os tooltips, que em muitos casos, utilizamos o title para armazenar o texto a ser exibido.

Então, o que é o atributo Data?, em poucas palavras ... o atributo Data permite atribuir dados personalizados a um item/elemento.

Vejamos:

<a href="#" title="Texto a ser mostrado">#</a>


<a href="#" data-tooltip="Texto a ser mostrado">#</a>

Como pode ver, com a chegada deste atributo podemos armazenar qualquer tipo de informação, caso quiséssemos guardar manter, por exemplo, os dados de uma faixa.

<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" data-tempo="95bpm" data-duracion="1:25" />
</audio>

Com Javascript poderiamos ordenar as faixas por sua duração ou velocidade de tempo. Este atributo foi feito para isso, nada mais que salvar os dados, e sua sintaxe é bastante simples: os data-nome-a-utilizar, deve sempre começaar com a palavra data e após o traço o nome que será usado.

Uso do atributo data com CSS

Já que sabemos para que e como se utiliza, podemos acessá-lo por meio de CSS, com algo tão simples como:

.teste {
display:inline-block;
}
.teste:after {
content: attr(data-conteúdo);
}

com o HTML

<div class='teste' data-conteudo=' - conteúdo'>
Teste
</div>

Obteremos isto:

Teste

Como remover ou ocultar a navbar do seu blog

2013-03-25T00:00:00.000-03:00

Você está cansado de encontrar uma maneira de se livrar da barra de navegação do Blogger? Se estiver usando os templates padrões, então, provavelmente 'notará' uma barra horizontal azulado escuro aparecendo apenas no topo do seu blog. Para ser honesto, esta pequena barra é bastante útil, pois permite que você entre na sua conta do Blogger, podendo publicar seus artigos, customizar o seu blog.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Agora você pode estar pensando, se esta barra é tão favorável, então, por que removê-la? A barra não é visualmente atraente, possui um aspecto antigo do século XIX arruinando totalmente o visual do blog.
Neste artigo, mostraremos a você como remover a Navbar do Blogger de seu blog?

A solução:

Primeiro vá para Blogger.com | seu site | Modelo | Editar HTML | Prosseguir. Agora, dentro da codificação do modelo, busque pela tag ]]></b:skin> e logo acima, cole o seguinte código.

#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}

Agora pressione o botão "Salvar modelo" e a barra de navegação será removida. No entanto, no futuro, se desejar restaurar a barra de navegação, basta remover a codificação CSS do seu modelo.

Método Alternativo:

Você pode remover a barra de navegação, sem qualquer aborrecimento ou preocupação, pois a equipe do Blogger não se importa. Na verdade, através da nova interface, você simplesmente pode remover a barra de navegação.

Vá para Layout > Navbar > Editar > da lista de opções selecione Desativado e pressione "Salvar" para concluir o processo.

Esperamos que este artigo o ajude a remover rapidamente a barra de navegação do Blogger. Quais são seus pensamentos? Será que é digno em remover a barra de navegação? Sinta-se livre para deixar suas sugestões e opiniões usando o formulário de comentários abaixo.

Twitcker, para exibir os últimos tweets em forma de letreiro

2013-03-18T15:01:00.000-03:00

Twitcker é um serviço gratuito que nos permite mostrar no blog os tweets mais recentes na forma de um letreiro digital, como se fosse um anúncio de notícias. O que ele faz é mostrar em uma barra todos os últimos tweets publicados, podendo definir a velocidade com que passam, a forma como são exibidos, as cores, os links, etc.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Tutorial
Para obter este gadget acesse Twitcker e clique no botão Sign in with Twitter.

Autorize o aplicativo para criar um script simples para você.
Uma vez que fizer isso você verá o seu nome de usuário e abaixo um link para configurar as opções da barra de tweets.

Lá você verá uma série de opções para sua barra de tweets, como por exemplo, controlar a velocidade com que passam os tweets, a cor da barra, se será exibido na forma de letreiro ou máquina de escrever, etc.

Uma vez terminado de personalizar, clique em Create e terá o código, copie-o e depois entre em Layout | Adicionar um gadget | HTML/Javascript e cole o código que copiou.

Você pode escolher a posição que deseja exibir, acima da página, no final, ou em um lugar particular; se desejar esta última opção (por exemplo, para colocá-lo na sidebar), escolha Own container dentro de Twitcker position, escreva TwitterTicker. Depois em um gadget HTML/Javascript acrescente isto:

<div id="TwitterTicker">
...Aqui o script...
</div>

Deverá colocar o script fornecido pelo Twitcker onde está indicado. Desta forma, você poderá mostrar a sua barra de tweets em qualquer lugar do blog.

Como pode ver é um gadget muito agradável que pode nos ajudar a obter mais seguidores, já que os nossos leitores podem ler no blog um pouco do que tuiteamos. Além disso, o gadget é bonito, não acha?

Blogger vs Wordpress

2013-03-15T17:21:00.000-03:00

Blogger vs Wordpress - A guerra infinita de duas plataformas de blogs. Obviamente, a ambos são ótimas, mas hoje vou comparar essas duas plataformas de blogs e dizer qual delas funcionará melhor para você.

Mostrarei os prós e contras de ambas as plataformas de blogs - Blogger e WordPress.

Imagem da internet

E lembre-se, vou comparar blogger com wordpress.org (auto-hospedado), por isso é óbvio que o blogger irá perder na comparação de algumas características. Uma coisa que nuca deve esquecer, blogger é totalmente gratuito e wordpress vai custar um pouco dinheiro a cada mês.

No meu sentido, o WordPress não é melhor, porque temos de cuidar de toda a configuração, mais que nunca, se seu blog apresentar um bug, tem que consertá-lo sozinho. Isso nunca acontece quando está no blogger. O uptime do seu blog depende do seu host, mas no blogger, o blog nunca terá de enfrentar downtimes. Esse é o maior benefício do blogger.

Se você é novato, e não pode pagar as contas de hospedagem, então pode começar com o Blogger, há sempre a opção de mudar para wordpress mais tarde.

Blogger vs Wordpress

Então vamos começar a comparação de blogger vs wordpress. Lembre-se, esta é uma comparação, não uma batalha ou guerra.

Prós do Blogger:

O que faz o blogger tão especial? Aqui estão as razões.

Leia também: Como começar um blog (com o Blogger)

É um serviço gratuito

Blogger é a plataforma de blogs totalmente gratuito, não precisa pagar um centavo sequer para começar um blog no blogger, obtém todos os recursos de graça. O blog terá por 'blogspot.com' no final da url, se deseja removê-lo e obter um domínio para seu blog, então pode custar uma pequena taxa de 10 dólares por ano.

Blogger introduziu muitos recursos novos como robots.txt personalizado, redirecionamento personalizado, meta descrição personalizado para cada post e página, permalink personalizado e muito mais. Além disso, a interface do novo painel está ótima!

Também é possível personalizar cada pedacinho do seu blog, mas você precisa saber codificação avançada para isso. Algumas pessoas dizem que o blogger tem limites na personalização, mas não há.

É FÁCIL de usar

Blogger tem uma interface extremamente simples e é tão fácil de gerenciar e operar um blog no blogger. Há apenas HTML e codificação CSS.

No WordPress, você tem apenas CSS e PHP, e isso é uma dor no pescoço para criar seu blog com o WordPress. Disse o suficiente.

Contras do Blogger

O que é horrível no blogger?

Você não possui o Blog

Seu blog é de propriedade do Google, e o Google tem direitos para removê-lo, apagá-la ou derrubá-lo a qualquer momento sem qualquer aviso prévio. Esta é a maior desvantagem. Você tem que seguir os termos de serviço do Blogger para manter o seu blog vivo. Se quebrar os termos de serviço e avisos Google, então, provavelmente, o seu blog será removido.

Há limites

Existem alguns limites no Blogger. Você tem apenas 1GB de espaço para fazer o upload de suas fotos, depois de atravessar o limite, tem que se hospedar imagens. Pode criar apenas 10 páginas estáticas, não mais do que isso. Pode criar apenas 2000 marcadores por blog e 20 marcadores por post. Você não tem plena liberdade ao usar blogger.

Prós do Wordpress

Vejamos as características do Wordpress:

Você é o DONO

A maior vantagem é que você possui o conteúdo e blog totalmente. Não tem que temer sobre sua exclusão ou remoção. Pode postar qualquer coisa, sem quaisquer restrições em seu blog auto-hospedado.

Vários Idiomas

Wordpress vem com cerca de 150 idiomas.

Galeria de Temas

Sim, existem muitos desenvolvedores wordpress em todo o mundo que fazem temas wordpress. Existem dois tipo de temas para wordpress - free e premium. Mas os premium são os mais preferido, pois eles vêm com mais funcionalidades, opções e SEO otimizado.

Abundância de Plugins

E os desenvolvedores também fazem plugins para ampliar a funcionalidade do seu blog e ~~fazer se rico com os widgets~~. Esses plugins também ajudam a construir uma aproximação a mais com os leitores.

Contras do Wordpress

Piores coisas com o WordPress:

É um pouco difícil

É um pouco difícil para um novato gerenciar um blog WordPress. Mas há sempre o Fórum wordpress para ajudá-lo a corrigir quaisquer problemas.

Além disso, se você enfrentar qualquer down times, ou quaisquer pequenos problemas de codificação, seria difícil para um novato para corrigi-lo.

Menos seguro

Blogs Wordpress auto hospedados são menos seguras do que blogs Blogger. É tão fácil para hackers éticos hackear um site wordpress. Porém, existem alguns plugins de segurança disponíveis, mas ainda assim, há sempre o medo de ser hackeado.

Isso é tudo!

A comparação blogger vs wordpress já terminou. Espero que agora seja capaz de escolher uma plataforma de blogging que encaixe com suas necessidades.

Como Iniciar um Blog

2013-03-04T00:00:00.000-03:00

Começar um blog não é uma coisa tão difícil, mas para os iniciantes, irei escrever este tutorial básico sobre como iniciar um blog.

Existem muitas pessoas que não sabem exatamente como começar, espero que este guia ajude-os a iniciar seu próprio blog.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Antes de explicar o tutorial, deixe-me compartilhar alguns benefícios de ter um blog:

Benefícios de um blog

Você ganhará mais visibilidade on-line. Seu conteúdo será distribuído por serviços gratuitos, logo que publicá-los. Blogs são altamente motor de pesquisa otimizada, então você terá uma boa classificação no google também. Seu conteúdo será organizado.

Ganhará a presença on-line e fãs. Você terá pessoas lendo seu conteúdo em todo o mundo e tornará-se famoso em todo o mundo.

E a melhor coisa é que você pode 'ganhar dinheiro' online com um blog.

Como Iniciar um Blog

Há duas opções para iniciar um blog, poderá começar um blog com blogger.com ou um blog auto-hospedado com Wordpress.

Se você iniciar um blog com blogger, você não precisa se preocupar com qualquer fatura de hospedagem, ou taxas de plugin ou qualquer coisa, mas você não terá controle total sobre seu blog. Se você está no blogger e viola a política de conteúdo, então seu blog pode ser excluído a qualquer momento, sem qualquer aviso prévio.

Se começar com wordpress auto-hospedado, então não precisará se preocupar com essas coisas. Terá controle total sobre o seu blog, poderá excluí-lo ou mantê-lo, ele estará sob seu controle.

Só irei compartilhar como iniciar um blog com blogger, pois fiz este artigos para principiantes e seria difícil configurar o wordpress para eles, também não podem pagar a hospedagem. Então comece com blogger, 'depois' mude para o wordpress.

Como iniciar um blog gratuitamente com Blogger

É tão fácil começar um blog com blogger, aqui está o método completo para iniciá-lo.

Você precisará de uma conta do Google para começar um blog com o blogger.

Se não tiver uma conta do Google, então crie uma conta em primeiro lugar. Depois de criado a conta, siga os passos abaixo mencionados.

Vá para o Blogger, e entre com a sua conta do Google.

Uma vez logado, verá uma interface com nenhum blog nele. No lado esquerdo, haverá uma opção chamada "Novo Blog", clique nele. Em seguida, preencha as informações básicas, como o título do Blog, descrição, URL, modelo e depois clique criar um blog. Pronto! Seu blog está criado.

Eu já escrevi um guia sobre como usar o blogger, brevemente.

Verifique o link acima para saber mais sobre o blogger.

Então, agora, acho que você aprendeu a como iniciar um blog.

Caso tenha alguma dúvida, comente.

Movendo o blog para HTML5

2013-02-25T10:21:00.003-03:00

Já que vimos alguns artigos sobre HTML5, desde o mais básico até como usá-lo corretamente, é hora de colocar em prática esse bela linguagem.

Vamos ver como passar uma página HTML comum, a uma página HTML5.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Tutorial
A primeira coisa que devemos fazer é declarar o DOCTYPE, como já vimos anteriormente, portanto, se seu modelo tem uma declaração deste tipo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pt">
<head>

Só precisamos mudá-lo para este:

<!DOCTYPE html>
<html lang="pt">
<head>

e se, não houve essa linha, basta adicioná-lo em seu modelo acima da tag html.

Pronto! Já temos o nosso blog em HTML5. Fácil? Sim, com a declaração do DOCTYPE já dissemos ao navegador que se trata de um blog que usa a linguagem HTML5.
Agora, devemos mudar algumas tags, vejamos, se temos um menu como este:

<div id="menu">
<ul id="menu-list">
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</div>

Devemos atualizar tag que contém/delimita a lista, neste caso, <div> por <nav> que é a nova etiqueta para incluir links de navegação:

<nav id="menu">
<ul id="menu-list">

</ul>
</nav>

E complementando com os roles ficaria assim:

<nav id="menu" role="navigation">
<ul id="menu-list">

</ul>
</nav>

Desta maneira, já passamos o menu para HTML5, vejamos a header, normalmente teria algo como:

<div id="header" role="banner">
<div id="header-inner">
<h1><a id="logo" href="/">Título da página</a></h1>
<h2>Descrição da página</h2>
</div>
</div>

Em HTML5 o código seria:

<header id="header">
<div id="header-inner">
<hgroup role="heading">
<h1><a id="logo" rel="home" href="/">Título da página</a></h1>
<h2>Descrição da página</h2>
</hgroup>
</div>
</header>

Para o contentor dos artigos que normalmente é #main-wrapper:

<div id="main-wrapper">
<div itemscope="itemscope" ... class="post-body">

</div>
<div itemscope="itemscope" ... class="post-body">

</div>
<div itemscope="itemscope" ... class="post-body">

</div>
</div>

Seria algo como:

<section id="main-wrapper" role="main">
<article role="article" itemscope="itemscope" ... class="post-body">

</article>
<article role="article" itemscope="itemscope" ... class="post-body">

</article>
<article role="article" itemscope="itemscope" ... class="post-body">

</article>
</section>

O mesmo para o footer:

<footer id="footer" role="contentinfo">
<aside role="complementary" class="social">

</aside>
</footer>

Somente devemos alterar as tags relevantes ao blog, como as seções, artigos, cabeçalho, o footer, a sidebar, somente tem que deixar os <div> que nos ajudem com a apresentação do nosso blog, por exemplo:

<body>
<style type="text/css">
#main{
border-top:1px solid #8F8F8F;
font-family:open sans;
}
/*** Estilos para centrar ***/
.inner-content{
margin:0 auto;
padding:10px;
width:80em;
}
</style>
<section id="main" role="content">
<div class="inner-content">

</div>
</section>
</body>

O que faz o div? Simples, se você olhar para o estilo vai perceber, focamos o contéudo que adicionamos dentro dele, coisa que não poderíamos fazer com o <section>, já que precisamos que isto, ocupe toda a largura.

Eliminar estilos e scripts padrão do Blogger

2013-02-19T05:11:00.000-03:00

Como muitos sabem, o blogger insere muitos arquivos desnecessários nos modelos, porém nunca me havia posto a investigar sobre a possibilidade de eliminá-los.

Os códigos não são encontrados no modelo, mas são inseridos automaticamente pelo blogger, em torno de certas etiquetas chaves. Então comecei a jogar com entidades HTML, e obteve:

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Eliminar os estilos padrão do blogger

O blogger adiciona automaticamente a todos os blogs um arquivo css com estilos bastante específicos que muitos querem substituir. Isso torna muito difícil para personalizar os modelos, além de ser um arquivo enorme.

Este arquivo é inserido antes <b:skin>, e é o primeiro arquivo que deve excluir se desejar criar um modelo a partir do zero.

Para removê-lo, bastaria alterar a linha:

<b:skin><![CDATA[/*

Por

<style id='page-skin-1'>/*
<b:skin><![CDATA[*/

Ficando assim:

Links CSS do blogger comentados

Remover scripts de redirecionamento móvel e os scripts de controle do tempo

O script de redirecionamento móvel não é inserido, se não tiver ativados a opção de modelos móveis. O único script inevitável que é inserido na parte superior da </head> é um de controle do tempo, porém não adiciona dados à página. Enfim, se ainda deseja excluí-lo, lhe dou a opção:

Somente tem que alterar </head> por </head>.

Remover scripts da parte inferior

O blogger insere um grande pedaço de Javascript acima </body>. Se queremos evitar a execução, só teremos que seguir um procedimento semelhante, alterando </body> por </body>.

Aviso
É possível que esse javascript afete a algum widget muito específico (embora improvável). Em caso afirmativo, basta inverter o processo.

Truque: Fazendo reaparecer as imagens dos comentários

Um dos problemas em comentar o </body> é que as imagens dos comentários desaparecem. Para corrigir basta colocar o seguinte script acima de :

<script>/* <![CDATA[ */
(function reparar() {
var imagenes,
imagen,
len,
i;
if( ! document.querySelectorAll ) {
return;
}

// Se nenhum comentário for carregado
if( ! document.querySelector('.delayLoad') ) {
// Executar a função em uma fração de segundo e não executar mais
setTimeout(reparar, 100);
return;
}

imagenes = document.querySelectorAll('.delayLoad');
len = imagenes.length;
i = 0;

for( ; i < len; i++ ) {
imagen = imagenes[i];
imagen.src = imagen.getAttribute('longdesc');
imagen.style.display = "";
}
}())
// ]]>
</script>

Como usar as tags HTML5

2013-02-15T00:00:00.000-03:00

No artigo anterior sobre HTML5 (programar com HTML5) aprendemos o básico de como iniciar corretamente um documento HTML5 e até como usar várias das tags mais importantes dessa linguagem.

Neste artigo vamos ver como usar corretamente as tags oferecidas pelo HTML5, em artigos futuros veremos como personalizar uma página web utilizando CSS, já que esta linguagem é inseparável do HTML.

W3C HTML5

Agora, já sabemos que para iniciar um documento HTML5, primeiro devemos declarar o DOCTYPE que é nada mais do que esta simples linha <!DOCTYPE html>.

Metadatas

Metadatas são aquelas tags que geralmente vemos no <head> das páginas. Estas são usadas para estabelecer o modo de comportamento do conteúdo da página, um exemplo claro seria:

<head>
<title>Metadatas em HTML5</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>

A tiqueta <meta> geralmente contém uma descrição da página como outros dados para indexação nos buscadores, a etiqueta <link> ou <script> também são considerados como metadatas, já que estão envolvidos com a interação e apresentação da página.

Títulos

Os títulos são as etiquetas de cabeçalho como <h1>, <h2> ... <h6>, HTML5 traz uma nova tag para delimitar esses títulos:

<hgroup>
<h1>Título principal</h1>
<h2>Subtítulo</h2>
</hgroup>

Esta tag <hgroup>, foi criada para delimitar dois títulos em diante.

Roles WAI-ARIA

Com os roles podemos melhorar a acessibilidade da página. Um exemplo de como usá-los seria:

<header role='banner'>
<nav role="navigation">

</nav>
</header>

Poderá encontrar mais informações em WAI-ARIA 1.0 Authoring Practices.

Figure e FigureCaption

Estes elementos são utilizados para identificar imagens, um exemplo:

<figure>
<img alt="..." src="image.jpg" />
<figcaption>
Texto para exibir
</figcaption>
</figure>

Em <figure> é onde engloba a imagem e o <figcaption>, este engloba o texto a ser exibido na imagem, vale ressaltar que o uso de <figcaption> é opcional.

Substituir o includable all-head-content no Blogger

2013-02-12T19:14:00.000-03:00

O includable all-head-content, é um dos elementos principais da head para qualquer pessoa que usar o blogger, nele o mesmo inclui, nativamente, link[rel=me], link[rel=publisher], link[rel=canonical], alguns scripts e etc. Por isso decidi fazer uma versão equivalente, tornando-o totalmente editável, porém eliminando todos os scripts restantes.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Atualmente se pode fazer uma versão alternativa desta includable, pois tenho notado várias tags data como por exemplo data:blog.postImageThumbnailUrl, permitindo também uma melhoria no que deve haver na head do blogger.

Passo 1 - Procure por:

<b:include data="blog" name="all-head-content"/>

Passo 2 - Substitua pelo código abaixo:

<meta charset='utf-8' />
<meta name='generator' content='blogger' />


<b:if cond='data:blog.blogspotFaviconUrl'>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
</b:if>


<link rel='canonical' expr:href='data:blog.canonicalUrl' />


<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description' />
</b:if>


<b:if cond='data:blog.postImageThumbnailUrl'>
<link rel='image_src' expr:href='data:blog.postImageThumbnailUrl' />
</b:if>


<b:if cond='data:blog.meTag'>
<data:blog.meTag />
</b:if>


<b:if cond='data:blog.feedLinks'>
<data:blog.feedLinks />
</b:if>

Menu horizontal com sub-abas em duas colunas

2013-02-08T02:44:00.001-03:00

Este menu pertence ao modelo Johny Joss, é um menu horizontal em que suas sub-guias ou sub-abas são exibidos em duas colunas e é feito com CSS, sem nada de scripts.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

A "vantagem" por assim dizer, é que as sub-abas acomodam-se em duas colunas não muito longas, assim serão ordenadas e com menos espaço, longitudinalmente. Você pode ver um exemplo aqui:

Guia 1
Guia 2
Guia 3
- Guia 3.1
- Guia 3.2
- Guia 3.3
- Guia 3.4
- Guia 3.5
- Guia 3.6
Guia 4
- Guia 4.1
- Guia 4.2
- Guia 4.3
- Guia 4.4
- Guia 4.5
- Guia 4.6
Guia 5
- Guia 5.1
- Guia 5.2
- Guia 5.3
- Guia 5.4
- Guia 5.5
- Guia 5.6
- Guia 5.7
- Guia 5.8
Guia 6

Tutorial
Para colocar este menu entra no Editar HTML e antes de ]]></b:skin>, adicione o estilo CSS:

/* Menu horizontal com sub-guias em duas colunas
----------------------------------------------- */
#toppic {
width:940px; /* Largura do menu */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Largura do menu */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Cor do texto das guias/abas */
}
#top a:hover {
background:#2f558b; /* Cor das guias/abas ao passar o mouse */
color:#c5fa6f; /* Cor do texto das guias/abas ao passar o mouse */
}
#top a.trigger {
/* Seta*/
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPl2t9gpD1li2-fO75OHstjEYGRLwVwAjBJxs8gpJSu7PU1JyiKVhiNsBhf0jJnp7Q_vvL2OjWgS_uU9lgYDsEiZ2T0j0egQoRAUeYbLdrfh2HfCvTztOU32Ogv6tq8uR2uDRW96U-CRc/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Largura do container das sub-guias/sub-abas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Cor de fundo do container das sub-guias/sub-abas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Largura de cada sub-guia/sub-aba */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Cor do texto dos submenus */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Cor do texto dos submenus ao passar o mouse */
}

Agora vá em Layout, adicione um gadget HTML/Javascript e cole a seguinte estrutura do menu:

<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL do link'>Guia 1</a></li>
<li><a href='URL do link'>Guia 2</a></li>
<li><a class='trigger' href='#'>Guia 3</a>
<ul>
<li><a href='URL do link'>Guia 3.1</a></li>
<li><a href='URL do link'>Guia 3.2</a></li>
<li><a href='URL do link'>Guia 3.3</a></li>
<li><a href='URL do link'>Guia 3.4</a></li>
<li><a href='URL do link'>Guia 3.5</a></li>
<li><a href='URL do link'>Guia 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Guia 4</a>
<ul>
<li><a href='URL do link'>Guia 4.1</a></li>
<li><a href='URL do link'>Guia 4.2</a></li>
<li><a href='URL do link'>Guia 4.3</a></li>
<li><a href='URL do link'>Guia 4.4</a></li>
<li><a href='URL do link'>Guia 4.5</a></li>
<li><a href='URL do link'>Guia 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Guia 5</a>
<ul>
<li><a href='URL do link'>Guia 5.1</a></li>
<li><a href='URL do link'>Guia 5.2</a></li>
<li><a href='URL do link'>Guia 5.3</a></li>
<li><a href='URL do link'>Guia 5.4</a></li>
<li><a href='URL do link'>Guia 5.5</a></li>
<li><a href='URL do link'>Guia 5.6</a></li>
<li><a href='URL do link'>Guia 5.7</a></li>
<li><a href='URL do link'>Guia 5.8</a></li>
</ul>
</li>
<li><a href='URL do link'>Guia 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Altere os URLs dos links e das guias/abas indicado na cor vermelha.

Se você quiser adicionar mais guias, adicione antes de </ul>, na cor azul, uma linha como esta:

<li><a href='URL do Link'>Outra guia</a></li>

E se quiser adicionar uma guia com sub-guias, então acrescente o seguinte:

<li><a class='trigger' href='#'>Outra Guia</a>
<ul>
<li><a href='URL do link'>Guia 1.1</a></li>
<li><a href='URL do link'>Guia 1.2</a></li>
<li><a href='URL do link'>Guia 1.3</a></li>
<li><a href='URL do link'>Guia 1.4</a></li>
<li><a href='URL do link'>Guia 1.5</a></li>
<li><a href='URL do link'>Guia 1.6</a></li>
</ul>
</li>

No primeiro código, verá as anotações na cor verde, a área que pode ser personalizada.
A cor de fundo é feita com gradientes CSS, #317FB8 é a cor mais clara e #385D96 a cor mais escura.

Se quiser que as sub-guias sejam mostradas em colunas de 3, em seguida, altera o valor da /* Largura do container das sub-guias/sub-abas */ por 450px.

Cada guia/aba tem uma largura de 150px (ver anotação em verde), se você quiser torná-lo mais amplo precisará alterar também a largura do container das sub-guias, caso contrário será exibido em uma coluna, nada mais.

Aprendendo a programar com HTML5

2013-02-04T00:01:00.000-03:00

Neste artigo, vamos ver as noções básicas do HTML5, como funciona, para que serve, e o que podemos fazer com ele.

Para começar primeiro vejamos o que é HTML, segundo a Wikipédia:

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.Utilizando seus elementos de linguagem, as Tags, é possível mudar a cor e o tamanho do texto, criar tabelas, adicionar imagens e manipular vários detalhes na formatação. Documentos HTML podem ser interpretados por navegadores.
A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.

Bem, basicamente o HTML é a linguagem mais popular para criação de páginas web, já que é uma das mais fáceis de aprender e podemos dizer que o HTML5 é apenas a quinta versão dessa linguagem.

W3C HTML5

Tutorial
Agora, para dizer ao navegador que vamos usar HTML5, iniciamos nosso documento desta forma:

<!DOCTYPE html>

Como podem ver que é apenas uma linha de código muito simples, portanto, a estrutura de uma página web em HTML5 seria:

<!DOCTYPE html>
<html lang="pt">

<head>

</head>
<body>

</body>
</html>

Com isso teríamos um site em HTML5, mas sem qualquer conteúdo, além disso, o HTML5 não é apenas essa etiqueta que diz !DOCTYPE, tem muitos mais, vejamos quais são as mais importantes:

<header>
<nav>
<section>
<article>
<aside>
<footer>

<header>

Esta etiqueta, bem como o nome diz, é usada para incluir/delimitar os cabeçalhos. Exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>

<title>Header em HTML5</title>
</head>
<body>
<header>

<h1>Titulo de la página</h1>
</header>
</body>
</html>

<nav>

Esta etiqueta a usamos para delimitar os links que nos permitem navegar pelo site. Exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>
<title>Nav em HTML5</title>
</head>
<body>
<nav>

<ul>

<li>

<a href="#">Link</a>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</body>
</html>

<section>

Esta etiqueta é usada para definir as seções de nossa página. Exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>
<title>Section em HTML5</title>
</head>
<body>
<section>
<h2>Seção 1</h2>

<p>
Esta é a seção 1 da página
</p>
</section>
<section>
<h2>Seção 2</h2>
<p>
Esta é a seção 2 da página
</p>
</section>
</body>
</html>

<article>

Nesta etiqueta, conterá o que é importante para a página, como no caso de um blog, os posts. Exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>
<title>Article em HTML5</title>
</head>
<body>
<section>
<article>
<h2>Post 1</h2>
<p>
conteúdo do primeiro post...
</p>
</article>
<article>
<h2>Post 2</h2>
<p>
conteúdo do segundo post...
</p>
</article>
</section>
</body>
</html>

<aside>

Esta etiqueta é usada para conter elementos segundários, tais como botões de redes sociais, widgets, publicidade... Exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>
<title>Aside em HTML5</title>
</head>
<body>
<section>
<aside>

</aside>
<aside>

</aside>
<aside>

</aside>
</section>
</body>
</html>

<footer>

Esta etiqueta é um pouco semelhante a header, só que esta representa o rodapé, por isso vai no final da página. Exemplo:

<!DOCTYPE html>
<html lang="pt">
<head>
<title>Footer em HTML5</title>
</head>
<body>
<footer>
<h4>Artigo criado por: Kaduh Santos</h4>
</footer>
</body>
</html>

Como podemos ver os nomes das etiquetas/tags são, por vezes, um tanto óbvia, sobre a sua utilização.
Para finalizar, crie um arquivo de texto cuja extensão termina em .html (exemplo: page.html) e cole o seguinte código, salve e execute executado em um navegador moderno como o Chrome ou o Firefox.

<!DOCTYPE html>
<html lang="pt">
<head>
<title>Página em HTML5</title>
</head>
<body>
<header>
<hgroup>
<h1>Usando etiquetas/tags HTML5</h1>
<h2>embora sem nenhum estilo aplicado...</h2>
</hgroup>
</header>
<section>
<article>
<h3>Testando tags do HTML5</h3>
<p>
Um pequeno texto aqui...
</p>
</article>
<article>
<h3>Página HTML5 sem estilos</h3>
<p>
em outros temas de CSS, veremos como aplicar estilos a uma página
</p>
</article>
</section>
<section>
<aside>
Tag: HTML5
</aside>
</section>
<footer>
Artigo criado por Kaduh Santos<br/>
Bloggermin - Dicas, tutoriais e gadgets para o seu blog do Blogger | All rights reserved
</footer>
</body>
</html>

Botões Sociais Lazy Loading para Blogger

2013-02-01T20:03:00.001-03:00

Botões de compartilhamento social são conhecidos por seus maus efeitos sobre a velocidade de carregamento da página. Por algum tempo eu estava tentando encontrar uma solução para este problema nas linhas do Lazy Load Plugin para imagens, eu estava inspirado pela forma como Blogger lidou com o problema nas Visualizões Dinâmicas, carregando os estilos dos botões e os scripts em mouse-hover. Então me deparei com a solução de Taylor Fausak e fiz alguns ajustes para fazê-los trabalhar no Blogger.

DEMO

Tutorial
Passo 1:

A primeira coisa a fazer é entrar no Modelo | Editar Html e marcar a opção Expandir modelos de widgets.

Passo 2: Css

Procure por ]]></b:skin> e adicione antes dele o CSS abaixo.

.fb-like {display:inline !important;}
#facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget { color: #ffffff !important; display: inline-block;line-height: 22px;text-align: center;text-decoration: none;width: 55px;}
#facebook-widget, .facebook-widget { background: #3b5b99; }
#google-widget, .google-widget { background: #dd4b39; }
#twitter-widget ,.twitter-widget {background: #33ccff;}

Passo 3: Script

Agora faça uma busca pela tag </body> e adicione acima dele o seguinte JavaScript:

<script type='text/javascript'>
//<![CDATA[
var element, script ;
element = document.getElementById('google-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
window.___gcfg = {lang: 'pt-BR'};
script.src = '//apis.google.com/js/plusone.js';
document.body.appendChild(script);
};
element = document.getElementById('facebook-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src="//connect.facebook.net/pt_BR/all.js#xfbml=1";
document.body.appendChild(script);
};
element = document.getElementById('twitter-widget');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//platform.twitter.com/widgets.js';
document.body.appendChild(script);
};
//]]>
</script>

Passo 4: Botões
Agora temos duas opções, mostrar os botões de compartilhamento apenas nas páginas internas(de postagens), ou nas páginas de índice também (como a página inicial, página de marcadores, etc).

Mostrar apenas nas páginas de postagens

Busque por <div class='post-header-line-1'/> e logo abaixo adicione o seguinte código HTML:

<div style="margin: 0px auto;text-align: center;" >
<b:if cond='data:blog.pageType == "item"'>
<a href="#" id='twitter-widget' >Tweetar</a>
<a class='twitter-share-button' data-count='horizontal' data-lang='pt' href='https://twitter.com/share'/>
<a href="#" id='google-widget' >+1</a>
<span class='g-plusone' data-size='medium'/>
<a href="#" id='facebook-widget' >Curtir</a>
<div class='fb-like' data-layout='button_count' data-send='false'/>
</b:if>
</div>

Para páginas de índice, assim como páginas de postagens

Nesta implementação, existem botões fallback para todas as páginas, exceto aa páginas de postagens. Quando clicado dão um Popup da respectiva opção de compartilhamento.
Busque por <div class='post-header-line-1'/> e logo abaixo adicione o seguinte código HTML:

<div style='margin: 0px auto;text-align: center;'>
<b:if cond='data:blog.pageType == "item"'>
<a href='#' id='twitter-widget'>Tweetar</a>
<a class='twitter-share-button' data-count='horizontal' data-lang='pt' href='https://twitter.com/share'/>
<a href='#' id='google-widget'>+1</a>
<span class='g-plusone' data-size='medium'/>
<a href='#' id='facebook-widget'>Curtir</a>
<div class='fb-like' data-layout='button_count' data-send='false'/>
<b:else/>
<a class='twitter-widget' expr:href='"http://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); return false;'>Tweetar</a>
<a class='google-widget' expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); return false;'>+1</a>
<a class='facebook-widget' expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); return false;'>Curtir</a>
</b:if>
</div>

Meny, um menu deslizante que transforma o blog em 3D

2013-01-28T00:00:00.000-03:00

Meny é um menu tridimensional bastante peculiar e marcante, não só pela forma como mostra os links, mas pela forma como "transforma" o blog. O que faz este menu é que ao passar o mouse para exibi-lo, desliza o conteúdo do menu enquanto vira o blog com um efeito 3D.
O script é Hakim El Hattab e para felicidade de muitos não usar nem jQuery nem Scriptaculous, por isso na maioria dos casos não deve haver nenhum problema de compatibilidade.

DEMO

Tutorial

Passo 1: Css

Implementar este menu que vira a página em 3D é bastante simples, basta entrar em Modelo | Editar HTML e antes de ]]></b:skin> adicione os estilos:

/* Meny Menu
----------------------------------------------- */
.meny {
display: none;
padding: 20px;
overflow: auto;
background: #333;
color: #eee; /* Cor de fundo do menu */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.meny h4 {
font-size: 24px; /* Tamanho do título do menu */
color:#fff; /* Cor do título do menu */
text-align:center;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
display: inline-block;
width: 200px;
list-style: none;
font-size: 20px;
padding: 3px 10px;
}
.meny-arrow {
position: absolute;
z-index: 10;
border: 10px solid transparent;
-webkit-transition: opacity 0.4s ease 0.4s;
-moz-transition: opacity 0.4s ease 0.4s;
-ms-transition: opacity 0.4s ease 0.4s;
-o-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
.meny-left .meny-arrow {
left: 5px;
top: 350px;
margin-top: -16px;
border-left: 16px solid #333; /* Cor da seta */
}
.meny-right .meny-arrow {
right: 14px;
top: 150px;
margin-top: -16px;
border-right: 16px solid #333; /* Cor da seta */
}
.meny-top .meny-arrow {
left: 150px;
top: 14px;
margin-left: -16px;
border-top: 16px solid #333; /* Cor da seta */
}
.meny-bottom .meny-arrow {
left: 150px;
bottom: 14px;
margin-left: -16px;
border-bottom: 16px solid #333; /* Cor da seta */
}
.meny-active .meny-arrow {
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.contents {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Passo 2: Menu

Em seguida, procure por <body> ou esta linha:

<body expr:class='"loading" + data:blog.mobileClass'>

Abaixo de qualquer um dos dois, acrescenta :

<div class='meny'>
<h4>Menu</h4>
<ul>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
<li><a href='URL do link'>Texto do link</a></li>
</ul>
</div>

<div class='meny-arrow'/>
<div class='contents'>

Passo 3: Script
Por fim, adicione antes de </body> o seguinte código:

</div>
<script>
//<![CDATA[
/*!
* meny 1.2
* http://lab.hakim.se/meny
* MIT licensed
* Created by Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use.";
}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";}var J="top",K="right",c="bottom",N="left";
var F="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style;
var D={width:300,height:300,position:N,threshold:40,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease"};var e={menu:a.menuElement,contents:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null};
var A=e.wrapper.offsetLeft,z=e.wrapper.offsetTop,t=null,r=null,q=null,o=null,f=false,m=false;var l,j,G,n,O,V,S,x,d,B;var w,y,E;Meny.extend(D,a);i();g();
v();C();Q();R();function i(){G="";S="";switch(D.position){case J:l="50% 0%";j="rotateX( 30deg ) translateY( -100% ) translateY( "+D.overlap+"px )";V="50% 0";
x="translateY( "+D.height+"px ) rotateX( -15deg )";n={top:"-"+(D.height-D.overlap)+"px"};O={top:"0px"};d={top:"0px"};B={top:D.height+"px"};break;case K:l="100% 50%";
j="rotateY( 30deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";V="100% 50%";x="translateX( -"+D.width+"px ) rotateY( -15deg )";n={right:"-"+(D.width-D.overlap)+"px"};
O={right:"0px"};d={left:"0px"};B={left:"-"+D.width+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.overlap+"px )";
V="50% 100%";x="translateY( -"+D.height+"px ) rotateX( 15deg )";n={bottom:"-"+(D.height-D.overlap)+"px"};O={bottom:"0px"};d={top:"0px"};B={top:"-"+D.height+"px"};
break;default:l="100% 50%";j="translateX( -100% ) translateX( "+D.overlap+"px ) scale( 1.01 ) rotateY( -30deg )";V="0 50%";x="translateX( "+D.width+"px ) rotateY( 15deg )";
n={left:"-"+(D.width-D.overlap)+"px"};O={left:"0px"};d={left:"0px"};B={left:D.width+"px"};break;}}function g(){Meny.addClass(e.wrapper,"meny-"+D.position);
e.wrapper.style[Meny.prefix("perspective")]="800px";e.wrapper.style[Meny.prefix("perspectiveOrigin")]=V;}function v(){e.cover=document.createElement("div");
e.cover.style.position="absolute";e.cover.style.display="block";e.cover.style.width="100%";e.cover.style.height="100%";e.cover.style.left=0;e.cover.style.top=0;
e.cover.style.zIndex=1000;e.cover.style.visibility="hidden";e.cover.style.opacity=0;try{e.cover.style.background="rgba( 0, 0, 0, 0.4 )";e.cover.style.background="-ms-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
e.cover.style.background="-moz-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";e.cover.style.background="-webkit-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
}catch(W){}if(F){e.cover.style[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}e.contents.appendChild(e.cover);}function C(){var W=e.menu.style;
switch(D.position){case J:W.width="100%";W.height=D.height+"px";break;case K:W.right="0";W.width=D.width+"px";W.height="100%";break;case c:W.bottom="0";
W.width="100%";W.height=D.height+"px";break;case N:W.width=D.width+"px";W.height="100%";break;}W.position="fixed";W.display="block";W.zIndex=1;if(F){W[Meny.prefix("transform")]=j;
W[Meny.prefix("transformOrigin")]=l;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}else{Meny.extend(W,n);}}function Q(){var W=e.contents.style;
if(F){W[Meny.prefix("transform")]=S;W[Meny.prefix("transformOrigin")]=V;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;
}else{W.position=W.position.match(/relative|absolute|fixed/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" in window){Meny.bindEvent(document,"touchstart",L);
Meny.bindEvent(document,"touchend",H);}else{Meny.bindEvent(document,"mousedown",M);Meny.bindEvent(document,"mouseup",U);Meny.bindEvent(document,"mousemove",b);
}}function u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visible";
if(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("transform")]=x;e.menu.style[Meny.prefix("transform")]=G;}else{w&&w.stop();w=Meny.animate(e.menu,O,500);
y&&y.stop();y=Meny.animate(e.contents,B,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:1},500);}Meny.dispatchEvent(e.menu,"open");}}function I(){if(f){f=false;
Meny.removeClass(e.wrapper,"meny-active");if(F){e.cover.style.visibility="hidden";e.cover.style.opacity=0;e.contents.style[Meny.prefix("transform")]=S;
e.menu.style[Meny.prefix("transform")]=j;}else{w&&w.stop();w=Meny.animate(e.menu,n,500);y&&y.stop();y=Meny.animate(e.contents,d,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:0},500,function(){e.cover.style.visibility="hidden";
});}Meny.dispatchEvent(e.menu,"close");}}function M(W){m=true;}function b(Z){if(!m){var W=Z.clientX-A,aa=Z.clientY-z;switch(D.position){case J:if(aa>D.height){I();
}else{if(aa<D.threshold){u();}}break;case K:var X=e.wrapper.offsetWidth;if(W<X-D.width){I();}else{if(W>X-D.threshold){u();}}break;case c:var Y=e.wrapper.offsetHeight;
if(aa<Y-D.height){I();}else{if(aa>Y-D.threshold){u();}}break;case N:if(W>D.width){I();}else{if(W<D.threshold){u();}}break;}}}function U(W){m=false;}function L(W){t=W.touches[0].clientX-A;
r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(document,"touchmove",P);}function P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null;
if(Math.abs(q-t)>Math.abs(o-r)){if(q<t-D.threshold){W=T;}else{if(q>t+D.threshold){W=p;}}}else{if(o<r-D.threshold){W=s;}else{if(o>r+D.threshold){W=h;}}}if(W&&W()){X.preventDefault();
}}function H(W){Meny.unbindEvent(document,"touchmove",P);if(q===null&&o===null){k();}}function k(){var W=(D.position===J&&r>D.height)||(D.position===K&&t<e.wrapper.offsetWidth-D.width)||(D.position===c&&r<e.wrapper.offsetHeight-D.height)||(D.position===N&&t<D.width);
if(W){I();}}function p(){if(D.position===K&&f){I();return true;}else{if(D.position===N&&!f){u();return true;}}}function T(){if(D.position===K&&!f){u();
return true;}else{if(D.position===N&&f){I();return true;}}}function h(){if(D.position===c&&f){I();return true;}else{if(D.position===J&&!f){u();return true;
}}}function s(){if(D.position===c&&!f){u();return true;}else{if(D.position===J&&f){I();return true;}}}return{open:u,close:I,isOpen:function(){return f;
},addEventListener:function(W,X){e.menu&&Meny.bindEvent(e.menu,W,X);},removeEventListener:function(W,X){e.menu&&Meny.unbindEvent(e.menu,W,X);}};})();},animate:function(b,a,c,d){return(function(){var g={};
for(var j in a){g[j]={start:parseFloat(b.style[j])||0,end:parseFloat(a[j]),unit:(typeof a[j]==="string"&&a[j].match(/px|em|%/gi))?a[j].match(/px|em|%/gi)[0]:""};
}var i=Date.now(),e;function h(){var k=1-Math.pow(1-((Date.now()-i)/c),5);for(var m in g){var l=g[m];b.style[m]=l.start+((l.end-l.start)*k)+l.unit;}if(k<1){e=setTimeout(h,1000/60);
}else{d&&d();f();}}function f(){clearTimeout(e);}h();return{stop:f};})();},extend:function(d,c){for(var e in c){d[e]=c[e];}},prefix:function(e,d){var b=e.slice(0,1).toUpperCase()+e.slice(1),g=["Webkit","Moz","O","ms"];
for(var c=0,a=g.length;c<a;c++){var f=g[c];if(typeof(d||document.body).style[f+b]!=="undefined"){return f+b;}}return e;},addClass:function(b,a){b.className=b.className.replace(/s+$/gi,"")+" "+a;
},removeClass:function(b,a){b.className=b.className.replace(a,"");},bindEvent:function(a,c,b){if(a.addEventListener){a.addEventListener(c,b,false);}else{a.attachEvent("on"+c,b);
}},unbindEvent:function(a,c,b){if(a.removeEventListener){a.removeEventListener(c,b,false);}else{a.detachEvent("on"+c,b);}},dispatchEvent:function(b,c,a){if(b){var d=document.createEvent("HTMLEvents",1,2);
d.initEvent(c,true,true);Meny.extend(d,a);b.dispatchEvent(d);}},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([w|:|/.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop();
});return a;}};if(typeof Date.now!=="function"){Date.now=function(){return new Date().getTime();};}

var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}

//]]>
</script>

Alterae as URLs dos links e nomes dos mesmos indicado na cor vermelha. Em seguida, salve as alterações e pronto.

Blogger Seo: Modificando a head

2013-01-25T00:14:00.000-03:00

Sempre que se fala em Seo no Blogger, é lançado um olhar para a <head> do modelo.

A intenção deste artigo é fazer uma compilação de tudo o que deveria haver no modelo de seu blog antes de <b:skin>

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

É possível que esteja faltando algo. Tentei ser tão organizado quanto possível, incluindo as coisas mais importantes, mas se acha que algo está faltando, não hesite em dizer.

Mais Seo, vejam:

Tem que substituir alguns valores:

[CÓDIGO] pelo código bing para validar seu site
[DESCRIÇÃO_GERAL_DO_BLOG] (autodescritivo)
[palavras, chave, separadas, por, vírgula] (autodescritivo também)

Sem mais delongas, aqui vai:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://opengraphprotocol.org/schema/'
expr:dir='data:blog.languageDirection'
lang='pt-br'
class='v2 no-js'>
<head>

<script type='text/javascript'>
//<![CDATA[
(function(){
var URL = document.URL,
reg = /.blogspot.(com...|..)//
if( URL.match( reg ) ){
window.location = URL.replace( reg, ".blogspot.com/ncr/" )
}
})()
// Fallback CSS para quando não haver javascript
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
//]]>
</script>







<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>


<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='[CÓDIGO]' name='msvalidate.01'/>
</b:if>



<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else />
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta property='og:description' content='[DESCRIÇÃO_GERAL_DO_BLOG]'/>
<b:else />

<meta name='description' property='og:description' expr:content='data:blog.pageName + ": " + data:blog.title'/>
</b:if>
</b:if>


<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
</b:if>

<meta name='keywords' content='[palavras, chave, separadas, por, vírgula]'/>


<b:if cond='data:blog.pageType == "archive"'>

<meta content='noindex,nofollow' name='robots'/>
<b:else />
<b:if cond='data:blog.pageType == "error_page"'>

<meta content='noindex,nofollow' name='robots'/>
<b:else />
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<meta content='index,follow' name='robots'/>
<b:else/>

<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:else />

<meta content='index,follow' name='robots'/>
</b:if>
</b:if>
</b:if>


<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.newerPageUrl'>
<link expr:href='data:blog.newerPageUrl' rel='next'/>
</b:if>
<b:if cond='data:blog.olderPageUrl'>
<link expr:href='data:blog.olderPageUrl' rel='prev'/>
</b:if>
</b:if>


<meta content='all' name='audience'/>
<meta content='general' name='rating'/>



<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta property='og:title' expr:content='data:blog.pageName + ": " + data:blog.title'/>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<title><data:blog.pageTitle/></title>
</b:if>


<b:include data='blog' name='all-head-content'/>

Caso não entenda o motivo de alguma tag, embora creio que esteja explicado, deixe um comentário.
Se preferir um arquivo txt poderá vê-lo aqui.

Códigos inseridos pelo blogger que afeta o carregamento do blog

2013-01-21T13:53:00.000-03:00

Este é apenas um resumo de alguns códigos que o Blogger insere em nosso blog para executar várias tarefas (alguns inúteis). É provavelmente uma das coisas que mais me desagrada no Blogger, que insere um monte de código no modelo sem realmente precisa de tudo.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Nome	Peso(kb)	Descrição
widgets.js	29.75	Código javascript para os widgets. É carregado independentemente de quais widgets que você tem no modelo. Provavelmente em muitos casos não seria necessário. Pesa aproximadamente uma biblioteca interia de Javascript.
widget_css_2_bundle.css	6.13	Geral CSS para os widgets e o blog. Temos a tendência de substituí-lo continuamente. O mesmo, muito ineficiente, porque não importa os que tenha.
icon18_wrench_allbkg.png	0.475	Ícone de editar widgets. É possível desativá-lo junto com o editar dos posts do modelo. Carregá-los com imagens separadas e que não são visíveis para a grande maioria dos visitantes, a única coisa que faz é perder tempo desnecessariamente.
navbar.g	2.70	O iframe da navbar. Provavelmente mais inútil o que os anteriores (a maioria o oculta). Apesar de não ser muito pesado, o servidor leva muito tempo para responder, uma vez que é gerada em base a uma vasta lista de dados que passamos na URL
icons_orange.png	0.136	Ícones da navbar. Pouco pesada, porém se a oculta vai estar perdendo tempo e largura de banda.
authorization.css	(variável)	É a CSS que faz vermos certas coisas, se somos administradores do site. A desvantagem é que ele faz a solicitação ao servidor sempre (embora em 99% dos casos retorna um arquivo vazio). Isso faz gastar tempo inutilmente.

Navegar através dos posts com o teclado

2013-01-18T00:00:00.000-03:00

Este é um pequeno script que permite que você navegue com o teclado, pressionando as setas esquerda e direita através das páginas do blog ou dos posts em particular. Você pode colocar o script tanto na <head> como acima de </body>.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Passo 1:
O código deve estar entre tags <script> e </script>:

<script>/*<![CDATA[*/(function(){
if( document.querySelector )
document.addEventListener ? document.addEventListener('keyup', onKeyUp, false): document.attachEvent('onkeyup', onKeyUp);

function onKeyUp(e){
var prevLink = document.querySelector('[rel="prev"]'),
nextLink = document.querySelector('[rel="next"]');

e = e || window.event;
e.target = e.target || e.srcElement;
e.keyCode = e.keyCode || e.which;

if( e.target.tagName !== "BODY" )
return;

if( e.keyCode === 37 || e.keyCode === 39 ){
if(typeof e.preventDefault === 'function'){
e.preventDefault();
} else {
e.returnValue = false;
}

if( e.keyCode === 37 && prevLink ){
window.location = prevLink.href;
} else if ( e.keyCode === 39 && nextLink ) {
window.location = nextLink.href;
}
}
}
})()/*]]>*/</script>

DEMO

Passo 2:
Para que funcione, marque Expandir modelos de widgets, busque por <b:includable id='nextprev'>...</b:includable> e altere por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' rel="next" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a rel="prev" class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' rel="home" expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Scroll infinita no blogger

2013-01-14T00:00:00.000-03:00

No ano passado, Karla publicou no compartidísimo uma maneira tornar a scroll infinita no blog, creada por Manki.

Longe de diminuir o mérito do autor (que tem, e muito), para o meu gosto este script tinha algumas desvantagens:

Um sistema de obtenção de dados ineficiente: descarrega toda página seguinte para obter o conteudo do post e o link da página. Mesmo assim sigo preferindo por esse método porque evita editar o modelo (embora o ideal seria usar o json feed do blogger).
Conflitos com outras bibliotecas: Se você usa Prototype (por exemplo), pode ir esquecendo desse trabalho.
Uso de código desnecessário: há certos métodos que o jQuery oferece para determinadas tarefas que reduzem a quantidade de código.

Forma de usar o novo script

Enquanto se aguarda o autor mesclar as alterações com o script, o uso é o mesmo. Somente tem que mudar o script:

<script type='text/javascript' src='//manki-scripts.googlecode.com/files/blogger-infinite-scrolling-1.5.js'></script>

para

<script type='text/javascript' src='//dl.dropbox.com/u/19945343/JS/blogger-infinite-scrolling.js'></script>

Ou alterar o conteúdo do script a mão.

Postdata

Se há uma diferença estilística, é que em vez de usar estilos em linha para a <div> de carregamento, foi usado a classe load-more, de tal forma que seja mais fácil para editá-lo com CSS:

.load-more {
text-align: center;
font-size: 150%;
/* Qualquer outro estilo */
}

Favicons em links externos

2013-01-10T01:27:00.003-03:00

Depois de ver um artigo em CSS-tricks onde expõe basicamente isto, ou seja, de exibir favicons em links externos, mas com jQuery e para toda a página (causando problemas suficientes com logotipos, etc), a função foi "refeita" para que possa ser usada no blogger, apenas nos artigos.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Tutorial

Para usar este truque, e que ele seja compatível com todos os navegadores deverá substituir em Modelo > Editar HTML <div class='post-body hentry-content'> por <article class='post-body' ...>, e sua correspondente de fechamento </div> por </article>. Caso não queira se preocupar com a aparência em versões do IE anteriores ao 9, use um código alternativo que poderá encontrar abaixo (não há necessidade de fazer essa mudança).

Você já está visualizando o efeito neste blog ou pode vê-lo em um Fiddle próprio.

Código

Você deve colá-lo entre tags <script></script>, e depois colocá-lo acima de </head> ou de </body>:

(function(){
   function getDomain(url) {
      return url.match(/:\/\/(.[^\/\?]+)/)[1];
   }
   function forEach( collection, fn ){
       for (var i = 0, len = collection.length; i < len ; i++){
          fn.call( null, collection[i], i)
       }
   }
   function externalFavicon(){
      var posts = document.getElementsByTagName('article'),
          links = [],
          notInThisHost = new RegExp(window.location.hostname),
          href;
       forEach(posts,function(post){
           // Concatenar sem transformar em array(matriz)
           Array.prototype.push.apply(links,post.getElementsByTagName('a') )
       })
       forEach(links, function(link){
           href = link.href;
           // Vemos que é um link externo (se ele começa com http e não neste domínio), e se isso não é uma imagem
           if( /^(http|\/\/)/.test(href) && ! notInThisHost.test(href) && ! /\.(jpe?g|png|gif)/i.test(href) && (link.firstChild && link.firstChild.tagName !== "IMG" )){
               // Nós usamos o favicon como plano de fundo e adicionamos um padding para visibilidade
               link.style.background = "url(http://" + getDomain(href) + "/favicon.ico) no-repeat 1px center"
               link.style.paddingLeft = "18px"
               link.style.backgroundSize = "16px"
           }
       })
   }
   // Executar a função após a conclusão do carregamento da página para não consumir recursos desnecessários durante o carregamento
   window.addEventListener ? window.addEventListener('load',externalFavicon,false): window.attachEvent('onload',externalFavicon)
})()

Com isso, encontramos os links externos e adicionamos seu favicon à esquerda.

Código alternativo

Se está interessado ao máximo reduzir a quantidade de código e não se importa com esse recurso para IE 7, podemos selecionar itens com querySelectorAll para reduzir uma boa parte do código e evitar fazer a mudança no html do modelo.

(function(){
   if( ! document.querySelectorAll ){return;}
   function getDomain(url) {
      return url.match(/:\/\/(.[^\/\?]+)/)[1];
   }
   function forEach( collection, fn ){
       for (var i = 0, len = collection.length; i < len ; i++){
          fn.call( null, collection[i], i)
       }
   }
   function externalFavicon(){
      var links = document.querySelectorAll('.post-body a'),
          notInThisHost = new RegExp(window.location.hostname),
          href;
       forEach(links, function(link){
           href = link.href;
           if( /^(http|\/\/)/.test(href)
               && ! notInThisHost.test(href)
               && ! /\.(jpe?g|png|gif)/i.test(href)
               && (link.firstChild
                   && link.firstChild.tagName !== "IMG" )
              ){
               //Nós usamos o favicon como plano de fundo e adicionamos um padding para visibilidade
               //link.style.background = "url(http://" + getDomain(href) +
               //    "/favicon.ico) no-repeat 1px center";
               link.style.background = "url(http://www.google.com/s2/favicons?domain=" +
                   getDomain(href) +
               ") no-repeat 1px center";
               link.style.backgroundSize = "16px"
               link.style.paddingLeft = "18px"
           }
       })
   }
   window.addEventListener('load',externalFavicon,false);
})()

Mensagem flutuante informativa com jQuery UI

2013-01-03T01:35:00.000-03:00

Graças a jQuery UI, em poucas linhas, podemos criar animações incríveis para nosso site, já que ele vem pré-carregado com diversos efeitos, interações, widgets, etc.

Usando efeitos de.show, .hide e .delay (próprio do jQuery) criaremos uma discreta mensagem informativa que irá aparecer em canto inferiro do nosso blog, e que desaparecerá em um determinado período de tempo.

Para ver um exemplo desta mensagem, você pode pressionar os botões a seguir:

Espera a transição concluir antes de iniciar outra função:

A lista de efeitos em jQuery UI é mais extensa, e você pode modificar os parâmetros, tais como opções de fantasia, duração, etc.

Caso não consiga visualizar, veja:

DEMONSTRAÇÃO

Tutorial
Passo 1: Instalar jQuery UI no modelo:

Para poder executar corretamente as funciones instale jQuery UI antes de </head> o seguinte código:

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Ignore esta etapa se você já tem o arquivo vinculado no seu modelo.

Passo 2: A marcação do documento:

Após <body>, você precisará incluir o seguinte:

<div id="nota-informativa">

</div>

Certifique-se de incluir qualquer fragmento de texto que deseja exibir.

Passo 3: Adicionar CSS

Agora antes de ]]></b:skin> adicione o seguinte código/estilo:

#nota-informativa {
padding:5px;
width:180px;
text-align:center;
background-color:#FFEE88;
position:fixed;
display:none;
left:200px;
bottom:80px;
box-shadow:0 0 5px #555;
}

Passo 4: Adicionar o script com a função no modelo:

Nesta etapa, vamos rever os conceitos básicos para executar uma função, lembre-se que com Javascript nativo, você precisa incluir tudo em um só evento, no nosso caso, a função vai começar no início do carregamento da página:

<script type="text/javascript">
$(document).ready(function () {
// Nosso script carregará quando o documento for carregado a 100%
});
</script>

Nosso seletor é #nota-informativa, procederemos a escrever o nosso script, para isso utilizaremos 4 efeitos:

Atraso do script (.delay) >> Uso de .show >> Atraso do próximo efeito >> Uso de .hide

Se não entendeu, possivelmente vendo o script, possa ver mais claramente:

<script type="text/javascript">
$(document).ready(function () {
$("#nota-informativa")
.delay(2500) // Tempo de atraso em milissegundos até que apareça o contenedor
.show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ) // Uso de .show, especificamente com bounce e alguns parâmetros específicos dessa animação.
.delay(2000) // Tempo de duração do contenedor na página
.hide( "drop", { direction: "down" }, "slow" ); // Uso de .hide, com o efeito drop.
});
</script>

Os valores numéricos correspondem ao tempo, e no caso do bouncing em "distância" é a altura máxima do ressalto.

Cada efeito é diferente e tem diferentes opções, mas basicamente seria o mesmo. Se quiser ver uma lista de efeitos compatíveis pode analisar a documentação do jQuery UI, na seção de Effect.

Se gostou do efeito dos exemplos, pode ver o código fonte que é mostrado abaixo, se você quiser executar um automaticamente, não esqueça de substituir o evento que é exposto no início do passo 4:

Efeito Puff:

Marcação HTML:

<div class="nota-informativa" id="puff">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:

<script>
$( "#handler-puff" ).click(function() { // PUFF
$( "#puff" ).show( "puff", 1000 )
.delay(2000)
.hide( "puff", 1000 );
});

</script>

Efeito Bounce:

<div class="nota-informativa" id="bounce">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:

<script>
$( "#handler-bounce" ).click(function() { // BOUNCE
$( "#bounce" ).show( "bounce", { times:3, distance:100, direction:'down' }, 2000 ).delay(2000).hide( "bounce", { times:1, distance:100, direction:'down' }, 1000 );
});

</script>

Efeito Blind:

<div class="nota-informativa" id="blind">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:

<script>
$( "#handler-blind" ).click(function() { // BLIND
$( "#blind" ).show( "blind", { direction:'down' }, 1000 )
.delay(2000)
.hide( "blind", { direction:'down' }, 1000 );
});

</script>

Efeito Explode:

<div class="nota-informativa" id="explode">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.
</div>

Script:

<script>
$( "#handler-explode" ).click(function() { // EXPLODE
$( "#explode" ).show( "explode", 500 )
.delay(2000)
.hide( "explode", 500 );
});
</script>

CSS Universal de todos os exemplos:

.nota-informativa {
padding:5px;
width:180px;
text-align:center;
background-color:#FFEE88;
position:fixed;
display:none;
left:200px;
bottom:80px;
box-shadow:0 0 5px #555;
}

Botões de execução:

<center>
<input class="button" id="handler-puff" type="button" value="Efecto Puff" /> <input class="button" id="handler-bounce" type="button" value="Efecto Bounce" /> <input class="button" id="handler-blind" type="button" value="Efecto Blind" /> <input class="button" id="handler-explode" type="button" value="Efecto Explode" /></center>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna.

Cartão de Natal em CSS

2012-12-24T01:31:00.000-03:00

Este post,na verdade, tem dois motivos, o primeiro é para desejar a cada um dos leitores deste blog, um Feliz Natal, porém, mais ainda, que estas datas são um pretexto para se reconciliar com quem discutimos, desfrutar de nossos entes queridos, e apreciar tudo o que temos para assim compartilhar com os outros um pouco do quanto que a vida nos dá.

Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.

Feliz Natal!

deseja o Bloggermin

A outra razão é para compartilhar com vocês este cartão de Natal feito apenas com CSS , as únicas imagens que estão nele são de flocos de neve.

Como é feito com CSS só ficam bem em navegadores modernos, por isso, se você vê meio abstrato, saberá a razão.

Este é o código para copiar e colar em um post:

<link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'/>
<style>
@keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#xmas-contenedor {
height: 380px;
width:580px;
background-color: #6b92b9;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpFObU03cJiVYe4_dkUHdNEjxTBNKK4nZZUv-X9VXtc8h2pDSDXLFzzyVdYHj0StfzKMwvdoI3nyfYfQa1fY_yQMhX45VMWDROjos65D2VTBX-PHqBkbmMC2SGw-ytY8anzuaNU74n7sI/s500/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVzHxubjSOQzoMrKFo4J2q4HGco0qAhwpUn9HF6bFsztauM_wk-4uA48H5n0hXqGm4TDxiPTfgxVxvplwA8jGOI3b51OIK6dxXNYgI_q3n3ZF0OxLon3bSR007j5C_M7D5y7zjc7GdUc/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpyXN6UVeNOKgl8TcWFmDilJuGqA0qAakdY-sFNwdbKqYkJc0YDD7y3d_ImfR6ga4pUSfCdtu36-zloeqXdX-v2-ZnEJGOyNYVrlyxkW9duYHH0PFAF5SomaaTkK94xuTrzP6Mtt8YfQ/s300/snow2.png);
-webkit-animation: xmas-snow 20s linear infinite;
-moz-animation: xmas-snow 20s linear infinite;
-ms-animation: xmas-snow 20s linear infinite;
animation: xmas-snow 20s linear infinite;
position:relative;
border:5px solid #98BF21;
z-index:1;
}
#xmas-contenedor:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom:0;
border: 5px solid #fff;
}
#xmas-contenedor:after {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border: 6px dotted #98BF21;
}
#xmas-contenedor h4, #xmas-contenedor p {
font-family: 'Clicker Script', cursive;
font-size:60px;
font-weight:bold;
text-align:center;
text-shadow: 2px 2px 4px #000000;
color:#fff;
margin-top:200px;
margin-bottom:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#xmas-contenedor p {
font-size:25px;
line-height:0;
margin-top:50px;
}
html>/**/body #xmas-contenedor h4, x:-moz-any-link, x:default {
font-weight:normal;
}
html>/**/body #xmas-contenedor p, x:-moz-any-link, x:default {
font-weight:normal;
}
#xmas-contenedor h4:hover {
font-size:75px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#bauble-container {
list-style: none;
width: 568px;
margin: 40px auto;
padding: 0;
}
#bauble-container li {
margin: 0 20px;
float: left;
}
#bauble-container li:before {
content: "";
background: #dadada;
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}
#bauble-container li:nth-child(odd) {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
}
#bauble-container li:nth-child(odd):hover {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
}
#bauble-container li:nth-child(even) {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}
#bauble-container li:nth-child(even):hover {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
.bauble {
border-radius: 100px;
box-shadow: 0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
.bauble:before {
content: "";
background: #fff;
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}
.bauble:after {
content: "";
border-radius: 100px;
background: #fff;
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}
.red-bauble {
background: #c8171f;
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble {
background: #00a1ee;
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble {
background: #fcb83d;
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble {
background: #4d8d00;
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}
</style>

<div id="xmas-contenedor">
<ul id="bauble-container">
<li>
<div class="bauble red-bauble">
</div>
</li>
<li>
<div class="bauble blue-bauble">
</div>
</li>
<li>
<div class="bauble yellow-bauble">
</div>
</li>
<li>
<div class="bauble green-bauble">
</div>
</li>
</ul>
<h4>Feliz Natal!</h4>
<p>deseja o Bloggermin</p>
</div>

Dito isso, Feliz Natal para todos!

Personalizar cabeçalho nas visualizações dinâmicas

2012-12-17T19:11:00.003-03:00

É verdade que nos novos modelos de Visualizações dinâmicas do Blogger, tenho gostado mais pelos efeitos que têm para mostrar os artigos/postagens e a maneira como navegar neles. Mas também é verdade que muitos tem decepcionado o não poder personalizá-los como gostariamos.

Siga o bloggermin no Twitter e no Google+ , e fique por dentro das novidades para o seu blog. E curta também a nossa página no Facebook.

Felizmente nem tudo está perdido, podemos colocar gadgets, e também personalizar determinadas áreas para que seu blog não seja igual ao demais. Então vamos ver como transformar as partes que podem ser; e começaremos a personalizar o Cabeçalho do Blog em modelos de visualização dinâmica.

Tutorial
O cabeçalho é basicamente o que definida a imagem do blog, assim podemos transformar isso:

Para isto:

Veja DEMO

A única coisa que precisamos é a imagem do nosso cabeçalho e nada mais. Se você não tiver um, aqui há 50 cabeçalhos para escolher.
Assim, escolhido a imagem, entre na seção Modelo | Personaliza | Avançado.
Então, onde diz Adicionar CSS acrescente o seguinte:

.header-bar {
background-color:#738a94 !important; /* Color do fundo */
background-image:url(URL da imagem) !important; /* Imagem de fundo */
background-repeat:no-repeat;
height:149px !important; /* Altura do cabeçalho */
border-bottom:25px solid #3b464b; /* Borda inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:115px !important;} /* Distancia entre o cabeçalho e o conteudo */

Altere a URL da imagem indicado em vermelho e personalizar os demais indicados em verde.
Algumas propriedades terá que descobrir por si mesmo, porque não há valores específicos, uma vez que depende de cada caso.Por exemplo, a altura deve ser de cerca de 20px menor que a altura da imagem, mas se a imagem é um padrão pequeno, então você pode definir a altura, na medida em que desejar.
Eu coloquei uma borda inferior, mas você pode removê-lo, torná-lo mais fino ou mais grosso, sendo é uma questão de gosto.

Como nós estabelecemos uma altura para o cabeçalho e temos (ou não) uma borda, então é muito provável que as entradas e o pequeno menu foram cobertos, para que isso não aconteça definimos uma margem em #main, aqui o valor você deverá descobrir, apenas uma questão de tentar vários valores até encontrar o adequado.

Simples? Sim, muito, mas o melhor de tudo é que, com esta pequena alteração, blog vai começar a ver com sua própria identidade.