22 setembro 2009

Código para Posts Relacionados

0 comentários
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

0 comentários

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

0 comentários

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.

Sem título

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.

widget-toptags-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

0 comentários
image

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.
Sem título

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.
 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com