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
quinta-feira, 31 de janeiro de 2008
Comemore o Aniversário de seu Blog
Postado por FiascoNegro em 1/31/2008 09:13:00 PM Ninguém Comentou
Tags: Widgets
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:
<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>
Postado por FiascoNegro em 1/31/2008 08:30:00 PM Ninguém Comentou
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: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: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.
Postado por FiascoNegro em 1/30/2008 05:45:00 PM Ninguém Comentou
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:
2 - Logo acima copie cole o código abaixo:
height: 0px;
visibility: hidden;
display: none;
}
Postado por FiascoNegro em 1/29/2008 05:03:00 PM Ninguém Comentou
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:
2 - Logo acima copie e cole o código abaixo:
.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:
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.
Postado por Igor Fonseca em 1/28/2008 01:21:00 AM 3 Comentaram
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.
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:
2 - Logo abaixo copie e cole o código:
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:
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:
<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 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>
Pronto está feito mande salvar e confira.
7 - Para os arquivos vamos procurar o seguinte bloco:
<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
Postado por Igor Fonseca em 1/27/2008 11:30:00 PM 3 Comentaram
sábado, 26 de janeiro de 2008
Bem Vindo
Bem vindo ao Hack-Blogger :)
Postado por FiascoNegro em 1/26/2008 10:38:00 PM Ninguém Comentou