Widget Nuvem de Tags

Já ensinei como montar uma nuvem de tags para blogger com o código modificado do widget marcadores. Agora vou citar alguns serviços Web disponíveis para se montar uma nuvem de tags, sem precisar modificar o código de seu blogger.

Encurte sua URL para postar no Twitter

Com o avanço da Web as URL se tornaram cada vez maiores. Estas urls gigantes são especialmente ruins quando queremos postar no Twitter , cuja principal característica é seu limite de 140 caracteres. O que fazer? Devemos encurtar, compactar estas urls, economizando alguns caracteres, para escrever mais, deixando os microposts mais elaborados. Existe na Web dezenas de sites que disponibilizam este serviços. Analisaremos duas soluções, a gringa TinyUrl e a nacional Migre.me.

TinyUrl - URLs curtas e personalizadas

Primeiramente acesse o site TinyUrl , logo será apresentado a esta caixa de formulário abaixo:

Como mostrado acima, temos duas opções, para encurtar sua url.

Insira sua url (link) e clique no botão Make TinyURL. Você será direcionado para uma pagina confirmando a criação de sua url curta e pronta para uso.

A parte destacada com um retângulo laranja é a nova url, pronta para ser twittada.
Note que ela nos informa quantos caracteres tinha sua url original, 88 no caso, enquanto a tinyurl tem apenas 25, ou seja, economizamos 63 caracteres.

Nesta temos a opção de personalizar sua tinyurl, com alguma palavra que esteja ainda disponível. Por exemplo:

Utilizei o link do Artigo O manga Berserk é fodastico
http://bloggercaradepau.blogspot.com/2009/03/o-manga-berserk-e-fodastico.html

Como é um artigo sobre o manga Berserk com o download de seus 34 volumes, personalizei-o
http://tinyurl.com/berserk34vol

Desta forma fica mais bonito e fácil de identifica-lo.

Outro grande Trunfo do TinyUrl é ele possuir uma extensão para o firefox. Após baixar a extensão TinyUrl Creator, instalar e iniciar o firefox, com apenas dois cliques você gerará a tinyurl de qualquer pagina. Leia o tutorial do site do desenvolvedor.Em Inglês.

Migre.me - Estatísticas e Integração com Twitter

O migre.me é uma solução nacional, criada por Jonny Ken Itaya. Ainda está em versão pré-alfa, mas o serviço é bastante estável. Ela é especialmente útil para consulta dos links mais acessados, em poucos dias observei que as empresas com cadastro no twitter estavam utilizando-a em substituição ao tinyurl (como a Submarino). O Migre.me é também uma rede social, com muito conteúdo e fonte de pesquisa para blogueiros.

Para transformar sua url, preencha o formulário com seu link no campo URL e clique no botão Criar Redirecionamento, como mostra imagem abaixo:

Logo abaixo do formulário encontra-se as estatisticas de acesso dos link.

Caso queira saber mais, o próprio Migre.me oferece alguns artigos de blogs alheios que comentam sobre seu serviço.

Não sabe o que é Twitter ou como usá-lo ? Leia o Guia Twitter.

imagens by IceBreaker.

Efeito esmaecer com CSS

Um blog só tem futuro se possuir conteúdo relevante, no entanto um bom design atrai muitos outros usuários. Eu mesmo já favoritei vários blogs só por causa de seu layout e design.

O efeito esmaecer, é um recurso bonito aplicável com poucas linhas de código css. Esmaecer significa desbotar, perder a cor, enfraquecer.

Este efeito é ótimo para menus como listas de redes sociais, pois torna mais fácil a visualização da imagem em mouseover (selecionada).

No exemplo acima, as tags img (imagens) possuem a classe bandeira, e devem ser links. Veja como ficou o código HTML:

<div style="text-align:center;">
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
</div>

O código CSS ficaria então assim:

.esmaecer:hover {
  filter:alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.30;
}

Simples, bastou inserir a classe esmaecer a sua css. Você tambem pode inverter a ordem, deixando as imagens por padrão esmaecidas, o código css ficaria assim:

.desmaecer {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;}

.desmaecer:hover {filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
}

Muito simples, veja o exemplo abaixo e seu respectivo código:

<div style="text-align:center;">
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
</div>

pode-se aumentar ou reduzir os graus de esmaecimento da seguinte forma:

O valor da propriedade filter:alpha(opacity=xx); varia de 100(normal) à 00 (transparente).

O valor da propriedade -moz-opacity:xx; varia de 1 (normal) à 0.0 (transparente).

O valor da propriedade opacity: xx; varia de 1 (normal) à 0.0 (transparente).

Os valores em vermelho acima devem ser substituídos pelos valores entre as faixas acima estabelecidos.

Sidebar com 2 colunas para Blogger

Um blog ou site é comumente dividido em 04 áreas. Cabeçalho, barra lateral (menus), conteúdo e rodapé, em ingles Header, sidebar, content, footer. A sidebar desempenha especial função, pois nela estão opções de navegação, perfil, propaganda, feed, e tal. Também tem função estética. Portanto é importante que você de a devida importância a esta área. Neste artigo vamos adicionar uma nova coluna a sidebar, dividindo uma coluna em dois.

Siga os 4 passos deste tutorial, o resultado será semelhante ao da imagem.

Sempre faça o backup.

Antes de fazer quaisquer modificações em seu blogger/blogspot, é essencial que você faça um backup do seu modelo existente. Então, se você fizer quaisquer erros, ou decidir que não gostou do novo visual, você pode facilmente voltar ao layout anterior.

Para fazer backup do seu modelo existente, vá para o Modelo > Editar HTML. No seu Painel do Blogger, e clique em "Baixar modelo completo", link na parte superior da página. Você pode então salvar o seu modelo como um arquivo XML para o seu computador.

OBSERVAÇÃO: Não sou responsável por quaisquer problemas que venha ocorrer com seu blogger/blogspot, durante o procedimento usei o Layout Minima (o mais simples e sempre indicado nestes tutorais). Boa sorte.

Mova todos os widgets existentes da seção Sidebar.

Na seção Layout do seu Painel do blogger/blogspot, mova todos os elementos que estão presentes em sua seção de sidebar para o cabeçalho (header), rodapé (footer) ou qualquer outro ponto. Isto é apenas temporário, você pode movê-los novamente mais tarde quando tivermos terminado as modificações. Mais importante, isso garante que você não perca suas widgets durante a modificação, e torna-se muito mais fácil para se completar.

Modificando o código do blogger/blogspot

Vá para Modelo > Editar HTML no seu Painel do Blogger, e não marque a caixa verificar o "Expandir modelos de widgets" (isso simplifica o processo).

Agora você precisa encontrar esse código no seu modelo:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

Substitua todo o trecho de código destacado em vermelho, pelo código abaixo:

<!-- Sidebar -->
<div id='sidebar-wrapper'>
<div class='sidebar-top' id='sidebar-top'>
<b:section class='sidebar' id='sidebar1' preferred='yes'/>
</div>

<div class='sidebar-column' id='sidebar-column-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>

<div class='sidebar-column' id='sidebar-column-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>

<div style='clear:both;'/>

<div class='sidebar-bottom' id='sidebar-bottom'>
<b:section class='sidebar' id='sidebar4' preferred='yes'/>
</div>

</div>

<!-- End Sidebar -->

Adicionando estilo a nova seção Sidebar

Mais uma vez, abra a seção Editar HTML no seu Painel do Blogger. Localize o seguinte trecho de código:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Substitua todo o código destacado em vermelho acima pelas linhas de código abaixo:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
text-align:left;
float: $startSide;
width:100%;
clear:both;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.sidebar-column {
color: $sidebartextcolor;
line-height: 1.5em;
width:50%;
}
#sidebar-column-left {
float: $startSide;
padding: auto 10px;
}

#sidebar-column-right {
float: $endSide;
padding: auto 10px;
}
#sidebar-top{
width:100%;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-bottom{
width:100%;
word-wrap: break-word;
overflow: hidden;
}

Espero que deva ter ocorrido tudo na paz. Qualquer dúvida ou problema, comente. Fui!

Favicon no blogger

Favicon - Palavra derivada de favorite (favorito) e icon (ícone), são pequenas imagens no formato *.ico com de cerca de 16x16 pixels que ficam guardados em um site para visualização pelo navegador.

fonte: Wikipédia

Não são somente imagens no formato .ico que podem se tornar favicons, os navegadores tem se atualizado para suportar diversos tipos de imagens, como png, gif e jpg.

Os favicon também tem teor de acessibilidade pois ajudam o usuário a identificar uma página quando ela está sendo exibida em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Rodapé com 3 colunas para blogger

O Rodapé (footer) é uma parte que vem se destacando nos novos blogs. Podemos utiliza-la para por os créditos ou widgets variados, tais como comentários recentes e backlinks.

Siga os 4 passos deste tutorial para adicionar 03 colunas ao rodapé do teu blog da plataforma blogger/blogspot. O resultado será semelhante ao da imagem.

Antes de fazer quaisquer modificações no seu blogger, é essencial que você faça o backup do seu modelo existente. Então, se você fizer quaisquer erros, ou decidir que não gostou do novo visual, você pode facilmente voltar ao layout anterior.

Para fazer backup do seu modelo existente, vá para o Layout > Editar HTML. No seu Painel do Blogger, e clique em "Baixar modelo completo", link na parte superior da página. Você pode então salvar o seu modelo como um arquivo XML para o seu computador.

OBSERVAÇÃO: Não sou responsável por qualquer problema que ocorra com seu blogger durante o processo, usei o Layout Minima(o mais simples e sempre indicado nestes tutorais). Boa sorte.

Mova todos os widgets existentes da seção rodapé:

Na seção de Layouts seu Painel do Blogger, mova todos os elementos que estão presentes em sua seção de rodapé para sua barra lateral ou qualquer outro ponto. Isto é apenas temporário, você pode movê-los novamente mais tarde quando tivermos terminado de adicionar a sua nova seção de rodapé. Mais importante, isso garante que você não perca estas widgets durante a modificação, e torna-se muito mais fácil para se completar.

Agora vamos a modificações no código do blogger.

Vá para Modelo > Editar HTML no seu Painel do Blogger, e não marque a caixa verificar o "Expandir modelos de widgets" (isso simplifica o processo).

Agora você precisa encontrar esse código no seu modelo:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Substitua toda a linha destacada em vermelho, com o código abaixo:

<!-- footer -->

<div id='footer-wrapper'>

<div class='footer-top' id='footer-top'>
<b:section class='footer' id='footer1' preferred='yes'/>
</div>

<div class='footer-column' id='footer-column-left' style='float:left;'>
<b:section class='footer' id='footer2' preferred='yes'/>
</div>

<div class='footer-column' id='footer-column-center' style='margin-left:5px;float:left;'>
<b:section class='footer' id='footer3' preferred='yes'/>
</div>

<div class='footer-column' id='footer-column-right' style='float:right;'>
<b:section class='footer' id='footer4' preferred='yes'/>
</div>

<div style='clear:both;'/>

<div class='footer-bottom' id='footer-bottom'>
<b:section class='footer' id='footer5' preferred='yes'/>
</div>

</div>
<!-- end footer -->

Adicionando estilo a nova seção de rodapé .

Mais uma vez, abra a seção Editar HTML no seu Painel do Blogger. Desta vez encontre o código ]]></b:skin> , que é onde o estilo do seu modelo termina. Localize o seguinte trecho de código abaixo:

/* ------------ Footer ------------ */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Obs: o código acima é do layout minima, sem modificações. Se o seu footer já foi modificado ignore o trecho acima.

Imediatamente antes do código ]]></b:skin>, adicione as seguintes linhas em substituição ao antigo código footer:

/* ------------ Footer ------------ */
#footer-wrapper {
background: #ffffff;
clear:both;
width:100%;
margin:0 auto 10px;
}
.footer-column {
text-align:left;
margin:0;
padding:0px;
width:33%;      /* você pode substituir este valor em % por px */
}
#footer-top {
width:100%;
text-align:left;
word-wrap: break-word; 
overflow: hidden;     
}
#footer-bottom {
width:100%;
text-align:left;
word-wrap: break-word; 
overflow: hidden;  
}
#footer-wrapper h2 {
color: $sidebarcolor;
background-color: #ffffff;
font:$headerfont;
padding: .5em;
}
#footer-wrapper ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-wrapper li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
/* end css footer */

Finish, espero que deva ter ocorrido tudo perfeitamente.

Agradecimentos ao UsuárioCompulsivo, adaptei os códigos a partir de seu template.

Animes é com o Fansub

Sou viciado em animes e mangas, otaku com orgulho, portanto resolvi fazer este artigo para explicar melhor sobre os fansubs, como funcionam e onde encontra-los. Alias meus animes favoritos são, Bersek, FullMetal Alchemist, YuYu Hakusho, Dragon Ball, Golden Boy, Death Note e Naturo.

A palavra Fansub deriva do inglês, é formada pela contração de fan (fã) com subtitle (legendado), traduzido em miúdos, legendado por fãs.