Como dividir a sidebar em duas

Em vez de colocar 3 colunas no blog (um menu de cada lado das postagens) uma opção bem interessante é dividir a sidebar em duas colunas, isso deixar a sidebar (menu do blog) largo no começo e a partir do ponto que desejar ele se divide em duas colunas, com na imagem abaixo:


Para fazer isso no seu blog entre na pagina editar HTML, antes de começar salve uma cópia do seu template (baixar modelo completo) assim poderá facilmente voltar ao modelo atual se tiver algum problema. Usamos o template Mínima do Blogger para fazer essa explicação,
procure por:

#sidebar-wrapper {

width: 220px;......}

Logo abaixo desse trecho coloque:

#sidebar-wrapper-doble {

width: 220px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar
float */

}

#columna-izda {

width: 48%;

float: left;

}

#columna-dcha {

width: 48%;

float: right;

}

Depois disso procure por:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget
id='HTML3' locked='false' title='' type='HTML'/>

</b:section>

</div>

O trecho em negrito são os gadgets que tem no seu blog, portanto no seu blog deverá ter varias linhas parecidas com essa, elas não interferem em nada essa modificação é apenas o conteúdo da sua sidebar. O importante é colocar o código abaixo entre </b:section> e </div>

<div id='sidebar-wrapper-doble'>

<b:section class='sidebar' id='columna-izda'
showaddelement='yes'>

</b:section>

<b:section class='sidebar' id='columna-dcha'
showaddelement='yes'>

</b:section>

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

</div>

Salve e depois entre na pagina layout e arraste os gadgets para essas novas sub colunas (coluna dividida em dois)

Para ficar melhor podemos aumentar a largura total do blog, volte a pagina editar html e procure por:

#header-wrapper {

width:660px;.........

#outer-wrapper {

width: 660px;............

#footer {

width:660px;............

Mais informações »

Gadget Top Comentaristas

Divulgar os leitores que mais comentam em seu blog pode ser um ótimo chamativo para mais comentários. E com isso você intera mais o seu leitor com o seu blog.

Funcionamento:
O gadget conta a quantidade de comentários para o mesmo “Nick name” (nome) e mesmo link, dessa forma se uma pessoa comenta várias vezes, mas todas com nome e link diferentes, o gadget vai contar separadamente cada comentário. Essa é a razão de muitas vezes o número de comentários não bater com a quantidade acusada por ele.

Configuração/Instalação:
1º - Faça login no Blogger, entre em “Layout” -> “Elementos da página”;

2º - Clique em “Adicionar um Gadget” e dentre as opções escolha “HTML/Java Script”;

3º - Copie e cole o seguinte código no campo oferecido pela opção:

<script src="http://acessoriosparablogs.com.br/scripts/topcomentarios.js"
type="text/javascript"></script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&amp;_callback=pipeCallback&amp;_id=2351a7b3195ee95ef3643998bc8def5e&amp;url=http%3A%2F%2FLINK DO BLOG&amp;num=10&amp;filter=SEU NOME"
type="text/javascript"></script>

Modifique onde necessário:
LINK DO BLOG: Coloque o link do seu blog sem o HTTP://. Exemplo: seublog.blogspot.com
SEU NOME: Coloque o nome que você usa para comentar em seu blog. Para que o gadget elimine você da contagem.

Exemplo:

4º - Salve.

Texto Deslizante

Para colocar um texto deslizante no seu Blog basta copiar o código abaixo:

<marquee behavior="alternate" width="400" height="50"


scrolldelay="2" scrollamount="2" direction="left"


onmouseover="this.stop()" onmouseout="this.start()">Coloque aqui


seu texto! ! !</marquee>


Simples Não?

Código para Posts Relacionados

1º - Faça login no blogger , clique em "Layout" -> "Modelo" -> "Editar HTMl".
Antes de tudo clique em "Baixar modelo completo", para caso tenha algum erro você tem o layout salvo.

2º - Procure (Ctrl + F) a tag:

</head>

Cole o seguinte código antes dela:

<script
type="text/javascript">
//<![CDATA[
var relatedTitles =
new Array();
var relatedTitlesNum
= 0;
var relatedUrls = new
Array();
function
related_results_labels(json) {
for (var i = 0; i
< json.feed.entry.length; i++) {
var entry =
json.feed.entry[i];
relatedTitles[relatedTitlesNum]
= entry.title.$t;
for (var k = 0; k
< entry.link.length; k++) {
if (entry.link[k].rel
== 'alternate') {
relatedUrls[relatedTitlesNum]
= entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function
removeRelatedDuplicates() {
var tmp = new
Array(0);
var tmp2 = new
Array(0);
for(var i = 0; i
< relatedUrls.length; i++) {
if(!contains(tmp,
relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] =
relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1]
= relatedTitles[i];
}
}
relatedTitles = tmp2;

relatedUrls = tmp;
}
function contains(a,
e) {
for(var j = 0; j
< a.length; j++) if (a[j]==e) return true;
return false;
}
function
printRelatedLabels() {
var r =
Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');

while (i <
relatedTitles.length && i < 20) {
document.write('<li><a
href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a></li>');

if (r <
relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');

}
//]]>
</script>

3º - Salve

4º - Clique em “Expandir modelos de widgets”

5º - Procure o seguinte código:

<b:if
cond='data:post.labels'>
<data:postLabelsLabel/>

<b:loop
values='data:post.labels' var='label'>
<a
expr:href='data:label.url'
rel='tag'><data:label.name/></a>
<b:if
cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

</b:if>

6º - Cole este código abaixo antes do: </b:loop>

<b:if
cond='data:blog.pageType == "item"'>
<script
expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"'

type='text/javascript'/>

</b:if>

7º - Salve o template!

8º - Procure esse código:

<p class='post-footer-line post-footer-line-3'/>

9º - Adicione este código logo depois:

<b:if cond='data:blog.url !=
data:blog.homepageUrl'>Posts Relacionados</b:if>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

É isso ai pessoal, é simples só fazer como explicado no turorial ai de cima que funciona 100%

Alterando ou Criando favicon e hospedando imagem .ico

Favicon é aquele iconezinho, que aparece antes do endereço de um site ou blog.

Para personalizar seu favicon,crie uma imagem em 16 x 16 pixels, salve em PNG e faça o upload no servidor de sua preferência.(Eu uso o ImageShack)

Vá no html do seu template e procure pela tag .

<head>

Insira o seguinte código:

<link href='http://SUAIMAGEM.png' rel='shortcut icon'/>

Trocando SUAIMAGEM pelo link fornecido pelo site de uploads.

Salve o modelo.

Simples, não?

Se caso vc não ache essa Tag aqui um tutorial como criar um faveicon

Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.

Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.

Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site: http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.

Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.

Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!

Nuvem de Tags no Blogger

Nuvem de tags – ou lista hierarquizada visualmente — é uma forma de apresentar os itens de conteúdo de um website.

Tag [tégui] é ‘rótulo’, ‘legenda’. Pense na tag como uma categoria simples. As pessoas em geral podem categorizar páginas web, fotos, e vídeos com qualquer tag que faça sentido. O uso das tags na web foi difundido por sites como Technorati, del.icio.us e Flickr.

Uma nuvem de tags em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.

Fonte: Ministério da Cultura

Quer inserir uma nuvem de tags no seu blog?

Simples!

Basta entrar no site Make Cloud, colocar o endereço do seu blog e aguardar o código em javascript.

Depois é só copiar e colar em "elementos de página" no layout do Blogger.

Para quem utiliza o Technorati, tem um widget que já faz o serviço:

http://technorati.com/widgets/blogwidgets

Procure por Your Top Tags Widgts. Copie o código e onde está escrito {URL}, insira o endereço do seu blog.

Para entender melhor a importância das nuvens, leia este artigo do Alexandre Fujita:

Uma nuvem vale por mil palavras

Abraços e uma ótima semana!

Widget "Assine o Feed" no rodapé dos posts

Que tal colocar no rodapé dos seus posts, um convite para que os visitantes assinem os Feeds do seu blog? É um widget semelhante ao Assine Já, porém ele só aparecerá nas páginas individuais, evitando assim a poluição visual.

Entre no html do seu template, clique em "expandir modelos de widgets" e procure por:

<div class='post-header-line-1'/>

Após esta tag, cole o código abaixo, com as devidas modificações:

• nos locais onde aparecem a url do FeedBurner, coloque a do seu blog
  
• onde aparece feedID=XXX, em XXX coloque sua ID do FeedBurner
  
• a imagem você pode trocar em src=

<b:if
cond='data:blog.pageType == &quot;item&quot;'>

<div id='subscribe'> <table border='0' cellpadding='2' cellspacing='2' style='text-align: left; width:
100%;'>

<tbody>

<tr>

<td style='background-color: rgb(237, 237,
237);'><a href='http://feeds.feedburner.com/SEUBLOG'><img
alt='Feed' src='http://img228c.imageshack.us/img228/8136/ballonfeedadd32x32up8.png'
style='border: 0px solid ; width: 32px; height: 32px; float: left;'
title='Assine'/></a><br/>

Assine nosso <a href='http://feeds.feedburner.com/SEUBLOG'
target='_blank'>Feed</a>

ou receba os artigos por <a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXX&amp;loc=pt_BR'>email</a>

</td>

</tr>

</tbody>

</table>

</div>

</b:if>

Este código é uma adaptação do Hack Compulsivo Como personalizar o rodapé dos posts.

Retirar Navbar do Blogger

Para quem não sabe, a Navbar, é aquela barrinha do Blogger que fica acima do cabeçalho.

Para retirá-la, faça o seguinte:

Vá em layout>editar html>

Procure no html do seu blog por esta tag:

]]></b:skin>


</head>

eu costumo usar o recurso Crtl + F do teclado para encontrar trechos no html
Uma vez encontrada a tag, copie este código:

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

Cole ANTES da tag, devendo ficar assim:

#navbar-iframe { height: 0px; visibility:hidden; display: none; }
]]></b:skin>
</head>

Depois é só clicar em "salvar modelo".

Esta dica já é um pouco antiga mas eu ainda não tinha publicado aqui no Mundo Clique