Hack-Blogger

Fim do Blog

2009-01-27T22:17:00.001-02:00

Aos leitores e parceiros,
Acho que todos provavelmente perceberam que o blog anda abandonado, pensei em retomar mas decidir pôr fim de vez a esse blog. O conteúdo continuará até que o EasyShare resolva apagar os arquivos de vez.

Resolvi escrever um outro blog, com uma temática diferente.

Aos leitores sejam bem vindos.

Aos parceiros que quiserem retomar a parceria é só deixar uma mensagem por lá....

Emoticons no Blogger

2008-03-10T22:51:00.003-03:00

Para inserir emoticons no blogger vamos fazer o seguinte:

1 - Procure pelo código abaixo:

</head>

2 - Logo acima copie e cole o código abaixo:

E pronto é só isso...

O script reconhece os seguintes caracteres:

:) ou :-) -
:( ou :-( -
:P ou :-P -
:D ou :-D -
:$ ou :-$ -
;) ou ;-) -

Os emoticons podem ser usados nos posts e nos comentários

My Cool Buttons

2008-03-10T21:42:00.007-03:00

No site My Cool Button você pode gerar, de maneira fácil e rápida botões no estilo web 2.0, confira...

A Cheats’ Guide to Customizing Blogger Templates

2008-03-10T21:11:00.004-03:00

Um ótimo ebook escrito por Amanda do Blogger Buster, descrevendo como personalizar seu blogger. São 53 páginas de conteúdo (em inglês).

Código HTML no Blogger

2008-02-11T11:43:00.000-02:00

Essa é uma dica simples, mas que muita gente não conhece, eu mesmo bati muito a cabeça até descobrir como publicar os códigos, porque blogger reconhece os sinais < (menor) e > (maior), como o início de um código e não publica os caracteres. Para resolver o problema basta substituir o < por < e > por >

Lightbox 2

2008-02-06T14:39:00.000-02:00

O hack Lightbox 2, é uma maneira interessante de visualizar imagens, sem sair do seu blog ou carregar uma nova página e além disso de forma visualmente agradável, com efeitos em javascript, que lembram muito as animações em flash. Para visualizar o efeito clique na imagem abaixo.

Para implementar o Lightbox 2, vamos por a mão na massa, ou no código.

1 - Vá em "Modelo", "Editar HTML" e marque a caixa "Expandir modelo de widgets". Agora vamos localizar o seguinte bloco:

]]></b:skin>

2 - Logo abaixo copie e cole o seguinte código:

3 - Agora toda vez que você quiser que uma imagem seja aberta pelo lightbox, basta colocar o seguinte código:

Colocando a descrição e os endereços da thumb e da imagem.

4 - Você também pode abrir varias imagens, como se fosse um slideshow, basta colocar o seguinte código:

Veja abaixo o efeito:

O original deste hack pode ser encontrado, clicando aqui.

Botões Web 2.0

2008-02-01T16:10:00.000-02:00

Pack com 23 botões estilo web 2.0, no formato PSD para você personalizar seu blog.

Personalize os links Postagens mais recentes, Postagens mais antigas e Início

2008-02-01T15:12:00.000-02:00

Podemos mudar os links que ficam no rodapé do blogger, para as Postagens mais recentes, Postagens mais antigas e Início. Para fazer isso, vá em "Modelo", "Editar HTML" e marque a caixa "Expandir modelo de widgets". Agora vamos localizar o seguinte bloco:

Agora vamos as explicações:

<data:newerPageTitle/> - Corresponde ao link “Postagens mais recentes”
<data:olderPageTitle/> - Corresponde ao link “Postagens mais antigas ”
<data:homeMsg/> - Corresponde ao link “Início”

Se você quiser mudar o texto, basta substituir o código pelo texto que você quiser, por exemplo substitua o código <data:newerPageTitle/> por Posts Novos .

Se você quiser colocar uma imagem em vez dos textos basta substituir o código pelo código da imagem <img src="url"/>

Se você quiser personalizar os links, mudar a cor, tamanho, estilo do link etc você pode personalizar as classes:

#blog-pager-newer-link - Para “Postagens mais recentes”
#blog-pager-older-link - Para “Postagens mais antigas ”
#home-link - Para “Início”

Comemore o Aniversário de seu Blog

2008-01-31T21:13:00.000-02:00

Navegando pela web, encontrei um interessante widget: O Blogoversary. Ele conta quanto tempo falta para o seu blog fazer aniversário. Achei a idéia interessante e coloquei aqui no Hack-Blogger. Mas como meu e apenas um bebê (5 dias) ainda falta bastante...

Meu widget:

Para fazer o seu vá até o site Blogoversary e preencha o formulário que é bem simples:
Born Date: data de nascimeto no formato mm-dd-aaaa
Blog Name: o nome do seu blog (dado opcional)
Blog URL: o endereço do seu blog (dado opcional)
Depois Clique "Generate Code Bellow" para gerar o seu código.

Se quiser coloca-lo na sidebar basta ir em "Modelo", "Elementos de Página", e na sua sidebar clique "Adicionar um elemento de página", dê um nome ao novo elemento e copie e cole código gerado

Caixa de Procura estilo Web 2.0

2008-01-31T20:30:00.000-02:00

Para adicionar uma caixa de procura no estilo da web 2.0, basta entrar no seu blog, ir em "Modelo", "Elementos de Página", e na sua sidebar clique "Adicionar um elemento de página", dê um nome ao novo elemento e copie e cole cógigo abaixo:

Conserte o bug dos comentários

2008-01-30T17:45:00.000-02:00

Nos comentários o blogger não entende direito quando, ninguém ou apenas uma pessoa comentou. Então vemos escrito "0 comentários" ou "1 comentários" com esse hack vamos consertar esse bug.

1 - Entre no seu blog, clique em "Modelo" e depois em "Editar html". Marque caixa Expandir modelo de widgets". Procure por:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/><data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

2 - Substitua pelo código abaixo:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 Comentou
<b:else/>
<b:if cond='data:post.numComments == 0'>Ninguém Comentou
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

3 - Você pode substituir os textos "1 Comentou" e "Ninguém Comentou" por qualquer texto que você quiser.

4 - Lembrando que para o texto no plural voce pode muda-lo clicando em "Modelo", "Elementos de Página" e no bloco "Postagens no blog" clicar em editar e mudar o texto.

Ocultar Navbar

2008-01-29T17:03:00.000-02:00

A Navbar é aquela barrinha do blogger que fica no topo de cada blog, ela é até útil, mas acaba com design de qualquer blog. Para oculta-la bastar seguir os passos:

1 - Procure pelo código abaixo:

]]></b:skin]>

2 - Logo acima copie cole o código abaixo:

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

Drop Caps

2008-01-28T01:21:00.000-02:00

O Drop Caps é um efeito muito utilizado em jornais, mas se você não sabe o que é, ele simplesmente consiste em aumentar a primeira letra do texto, como você pode conferir aqui no Hack Blogger, em cada post a primeira letra e bem maior do que o resto do texto.

É um efeito bem simples, mas que dá um belo visual à qualquer blog, e não é dificil de fazer, então, mão na massa, ou no código.

1 - Primeiro localize o seguinte código:

]]></b:skin>

2 - Logo acima copie e cole o código abaixo:

/* ---( drop caps )--- */

.dropcaps { float:left; color: #000000; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

3 - Pronto no início de cada postagem em "Editar Html" basta colocar o código abaixo:

<span class="dropcaps">X1</span>X2

onde X1 é a primeira letra do texto e X2 a continução, lembramdo que X2 pode ter um espaço antes, caso o post comece com um artigo.

4 - Você pode configurar o blogger para que cada post novo já insira o código do Drop Caps, basta ir configurações > Formatação, e lá embaixo em Modelo de Postagem, colar o código do passo 3. Assim cada vez que você criar uma nova postagem, ao clicar em Editar Html o código do Drop Caps vais estar lá bastando editar e continuar a escrever o post.

Sidebar Expansível

2008-01-27T23:30:00.000-02:00

No Blogger temos 3 maneiras de mostrar os post arquivados: Hierarquia, que mostra os arquivos do ultimo mês (ou dias dependendo da sua configuração), expandido e o resto escondido, Lista simples, que mostra somente os anos e menu, que é uma combobox com os anos. Eu prefiro usar o modo hierarquia para que o visitante possa visualizar os arquivos postados recentemente. O Problema e as vezes a lista fica muito grande, criando uma certa poluição visual.

Procurei na internet e não achei nada que eu pudesse usar, então criei este hack, que pode ser usado em qualquer elemento de página da sidebar.

Escolha dos tipos

P.S. o código javascript eu peguei na internet e não sei quem escreveu, se autor aparecer por aqui eu coloco os créditos.

Então, mão na massa, ou no código.

1 - Entre no seu blog, clique em "Modelo" e depois em "Editar html". Marque caixa Expandir modelo de widgets". Procure por:

]]></b:skin>

2 - Logo abaixo copie e cole o código:

3 - E logo acima copie e cole o código:

.mais {
background-image: url(http://i201.photobucket.com/albums/aa309/control_add.png);
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.menos {
background-image: url(http://i201.photobucket.com/albums/aa309/control_remove.png);
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}

Agora vamos a parte que dá um pouco mais de trabalho, porque temos que enteder um pouco da estrurura do blogger, nos elementos de página como os aquivos e as tags é próprio blogger que gera, então temos que buscar o bloco correspondente ao elemento.

4 - Para as tags vamos procurar o seguinte bloco:

Isole o código, de alguns enter antes e depois para que não aconteça nehum erro.

5 - Antes desse bloco, copie e cole o código abaixo:

<div id='ocultarcat'>
<div class='mais'>
<a href='#' onClick='showdiv("sim","ocultarcat","mostrarcat"); return false'><strong> Mostrar</strong></a>
</div>
</div>
<div id='mostrarcat' style='display:none'>
<div align='left'>
<div class='menos'>
<a href='#' onClick='showdiv("nao","ocultarcat","mostrarcat"); return false'><strong>Ocultar</strong>
</a>
</div>

Obs.: para cada bloco deve-se mudar os nomes da divs, por exemplo aqui como modifiquei as categorias, atribuí os nomes de mostrarcat e ocultarcat, para o bloco de arquivos, mudei onde aparece mostrarcat para mostrararq e ocultarcat para ocultararq.

6 - E depois dele copie e cole o código abaixo:

</div>
</div>

Pronto está feito mande salvar e confira.

7 - Para os arquivos vamos procurar o seguinte bloco:

8 - Depois repita os procedimentos 5 e 6.

9 - Para os elementos de página HTML/Javascript, basta fazer o procedimento 5 antes do conteúdo e 6 depois do conteúdo.

Bom é isso, espero ter ajudado

Bem Vindo

2008-01-26T22:38:00.001-02:00

Bem vindo ao Hack-Blogger :)