segunda-feira, 10 de março de 2008

Emoticons no Blogger

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:


<script src='http://blog.hackblogger.googlepages.com/addSmiley.js' type='text/javascript'/>


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



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



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).




segunda-feira, 11 de fevereiro de 2008

Código HTML no Blogger

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 &lt; e > por &gt;

quarta-feira, 6 de fevereiro de 2008

Lightbox 2

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:


<script src='http://blog.hackblogger.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/effects.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/scriptaculous.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/lightbox.js' type='text/javascript'></script>

<link rel="stylesheet" href="http://blog.hackblogger.googlepages.com/lightbox.css" type="text/css" media="screen" />

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


<a title="Aqui vai a descrição que aparace no Lightbox" href="endereço da imagem que vai ser carregada" rel="lightbox"><img src="endereço do thumb"/></a>

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:


<a title="Aqui vai a descrição que aparace no Lightbox-1" href="endereço da imagem que vai ser carregada-1" rel="lightbox[roadtrip]"><img src="endereço do thumb-1"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-2" href="endereço da imagem que vai ser carregada-2" rel="lightbox[roadtrip]"><img src="endereço do thumb-2"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-3" href="endereço da imagem que vai ser carregada-3" rel="lightbox[roadtrip]"><img src="endereço do thumb-3"/></a>

Veja abaixo o efeito:



O original deste hack pode ser encontrado, clicando aqui.

sexta-feira, 1 de fevereiro de 2008

Botões Web 2.0



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

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:



<DIV class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<SPAN id='blog-pager-newer-link'>
<A class='blog-pager-newer-link' 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 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>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
<b:else/>
<b:if cond='data:newerPageUrl'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
</b:if>
</b:if>
</DIV>

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”

quinta-feira, 31 de janeiro de 2008

Comemore o Aniversário de seu Blog

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:
Get your own free Blogoversary button!

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

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:



<form id="searchthis" action="/search" style="display:inline;" method="get">
<table border="0" width="250" cellspacing="5">
<tr>
<td valign="middle"><input id="search-box" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #000000; border: 1px solid #000000; width: 200px;" name="q" type="text"/></td>
<td valign="middle"><input id="search-btn" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #CCCCCC; border: 1px solid #000000; font-weight: bold; padding: 4px;" value="OK" type="submit"/>
</td>
</tr>
</table>
</form>

quarta-feira, 30 de janeiro de 2008

Conserte o bug dos comentários

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.

terça-feira, 29 de janeiro de 2008

Ocultar Navbar

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;
}

segunda-feira, 28 de janeiro de 2008

Drop Caps

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.

domingo, 27 de janeiro de 2008

Sidebar Expansível

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:


<script language="javascript">
function showdiv(ativar,id1,id2)
{ var A=document.getElementById(id1);
var B=document.getElementById(id2);
if(ativar=='sim')
{
B.style.display = 'block';
A.style.display= 'none';
}
else
{
A.style.display = 'block';
B.style.display= 'none';
}
}</script>

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:


<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>

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:


<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>

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

sábado, 26 de janeiro de 2008

Bem Vindo

Bem vindo ao Hack-Blogger :)