Quinze Desejos: HTML

Tutorial: Categorias em Duas Colunas

Atendendo a pedidos, hoje vou ensinar como dividir as categorias do blog em duas colunas. O que pode ser muito útil para quem tem vários itens. Você tem várias maneiras de dividir as colunas, só vai depender de quantas colunas você vai querer criar. O tutorial que vou colocar aqui é o que eu aprendi no Chica Blogger e é super simples.

01. Vá em Design > Editar HTML. Aperte CTRL+F e procure por ]]> </ b: skin>

02. Copie o código abaixo e cole ACIMA da tag encontrada.

#Label1 ul li{ 
float: left;
width: 45%; 
}

OBS: A largura (width) vai depender de quantas colunas você deseja incluir. Neste caso, 45% é ideal para duas colunas. Para 3 colunas o ideal seria entre 30 a 33%.

Este código pode ser aplicado para qualquer widget, por exemplo, a lista de links /wink
Caso queira pedir algum tutorial é só deixar seu comentário.

0 comentários

HTML

Ativando a opção de responder comentários do Blogger

Fonte da imagem (flickr)

Faz tempo que não coloco tutoriais aqui né? Vou tentar atualizar esta tag mais vezes. Tenho recebido várias queixas(?) em relação a ausência da opção de responder comentários no Layout Free que disponibilizei a algum tempo. A opção de responder comentários foi disponibilizada depois que eu disponibilizei o layout, então é claro que ele não tinha essa opção ainda. Tentei arrumar o código várias vezes, até que finalmente achei um código que desse certo. O código original pertence ao Mundo Blogger, porém ele foi modificado por mim exclusivamente para o layout free. Então se você possuiu outro layout pode ser que não dê certo.

01. Vá em Design > Editar HTML > e clique em Expandir Modelos de Widgets

02. Aperte CRTL+F e procure pelo seguinte código:

<b:if cond="data:blog.pageType == "static_page"">
          <b:if cond="data:post.showThreadedComments">
            <b:include data="post" name="threaded_comments">
          <b:else>
            <b:include data="post" name="comments">
          </b:include></b:else></b:include></b:if>
        </b:if>

OBS: Se não achar todo o código, procure apenas pela primeira linha e depois localize o resto.

03. Agora substitua o código encontrado pelo código abaixo:

<b:include data="post" name="post"> <b:if cond="data:blog.pageType == "static_page""> <b:if cond="data:post.showThreadedComments"> <b:include data="post" name="threaded_comments"> <b:else> <b:include data="post" name="comments"> </b:include></b:else></b:include></b:if> </b:if> <b:if cond="data:blog.pageType == "item""> <b:if cond="data:post.showThreadedComments"> <b:include data="post" name="threaded_comments"> <b:else> <b:include data="post" name="comments"> </b:include></b:else></b:include></b:if> </b:if>
</b:include>

04. Salve e visualize!

Lembre-se: após ter feito tudo vá em Configurações > Comentários. Aonde está escrito Posição do formulário de comentários selecione a opção Postagem abaixo incorporada, salve e pronto.

0 comentários

HTML

Tutorial: páginas internas com postagens resumidas

Faz tempo que não posto um tutorial por aqui... Então, hoje vou mostrar como deixar os posts resumidos nas páginas internas, igual aqui do blog. Eu, particularmente, gosto deste hack. Acho bem útil e prático, além de deixar o blog mais "clean" e fofo. Sempre vi ele ser usado no Wordpress e até então eu nunca tinha visto no Blogger e nem achado nenhum tutorial. Mas... Para nossa alegria eu achei um tutorial bem simples e vou compartilhar aqui. O tutorial original pertence ao Notícia e Blog (créditos a ele).

O hack, além de resumir a postagem, também exibe uma miniatura da imagem da postagem, porém ele diminui um pouco da velocidade na 1ª vez que é carregado, já que usa um JavaScript. Lembrando que este hack só funciona com as páginas internas. Para aplicar em todas as postagens, eu recomendo este tutorial. Para ver como o hack fica clique aqui.

Instalando

01. Vá em Design > Editar HTML > e clique em Expandir Modelos de Widgets

02. Aperte CTRL+F e rocure pela tag </head>

03. Antes de </head> adicione:

<script type="text/javascript">
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src="http://noticiaeblog.googlecode.com/files/miniaturizacao.js" type="text/javascript">
</script>

04. Agora, procure por <data:post.body/> e substitua por:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leia mais...</a></span><b:else/>
<data:post.body/></b:if><b:else/><data:post.body/></b:if><b:else/><data:post.body/></b:if>

05. Salve e visualize.

Espero que o tutorial tenha ajudado, qualquer dúvida e sugestões deixe nos comentários e até o próximo post! Alguém ai notou algumas mudanças ~~minimas~~ no blog?

0 comentários

HTML

Tutorial: perfil do blog

Mais um tutorial para vocês!!! Hoje vou ensinar como fazer um perfil igual o meu, para felicidade de vocês. E o mais importante: esse tutorial é bem simples.

Vá em Design > Editar HTML > Aperte CTRL + F e procure por: ]]></b:skin>

Cole antes dele o código abaixo:


#sidebar #perfil {
display: block; 
padding: 10px 10px 10px 10px; --/*espaçamento/margem da 'caixa'*/
background-color: #fff0f3; --/*cor do fundo*/
border-radius: 6px; --/*borda arredondada, quanto maior o px mais redonda*/
box-shadow: 0 0 1em #ff93aa; --/*sombra da 'caixa' do perfil*/
}

Salve e ainda na aba Design vá em Elementos da página.

Clique em adicionar um Gadget > Html/JavaScript e cole:


<div id="perfil">
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 
</div>

Substitua a palavra 'texto' pelo o que você quer que apareça no seu pefil. Diga seu nome, personalidade, o que gosta e o que não gosta.

Caso queira adicionar uma imagem sua adicione o código depois de <div id="perfil">

<img src="LINKDASUAFOTO" class="alignright"/>
Substitua o LINKDASUAFOTO. Troque alignright por alignleft caso queira que sua imagem se posicione no canto esquerdo, e vice versa. NÃO retire as aspas!

Obs: Para adicionar os ícones das redes sociais, veja este tutorial. Se não sabe como hospedar imagens, clique aqui.