Mas o código que vamos mostrar a seguir exibi somente os links sem imagens e pode ser uma boa opção para mostrar os assuntos relacionados sem precisa carregar imagens o que ajuda o blog ficar com a navegação mais rápida entre as paginas do seu blog.

Entre na pagina editar html e cole esse trecho antes de linha </head>
<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;
while (i < relatedTitles.length && i < 20) {
document.write('<br/><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>
Clique para salvar, depois marque a opção Expandir modelos de widgets e procure por:
<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>
Agora coloque o trecho abaixo antes da linha </b:loop>:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=5"'
type='text/javascript'/>
</b:if>
Salve novamente as alterações e procure por <p class='post-footer-line post-footer-line-3'/>, quando achar cole esse código logo após:
<b:if cond='data:blog.pageType == "item"'> Posts Relacionados</b:if>
<div class='assuntos'><script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
Salve as alterações. Agora nesta parte final vamos fazer a formatação os links ou fazer botões com eles, veja que definimos um estilo de formatação(CSS) div class="assuntos", então volte até o inicio do HTML do seu blog e antes da linha body{.... } coloque esse código:
.assuntos a{text-indent:15px;background-image: url(http://img829.imageshack.us/img829/2537/outc.gif);background-repeat: no-repeat;background-position: left 4px;padding-left:15px;padding-top:1px;padding-bottom:1px}
.assuntos a:hover{background-image: url(http://img522.imageshack.us/img522/9107/overl.gif);background-repeat: no-repeat;background-position: left 3px}
Veja aqui como mudar o estilo dos links:
Como fazer e colocar botões no blog
Como Formatar o Texto do Blog
Código das Cores
Imagem ao lado do texto ou link
A maior parte deste código já foi publicado anteriormente pelo Códigos Blog, nós apenas acrescentamos a parte da formatação para melhorar a aparência da lista de links.
Legal!
ResponderExcluirHá um tempo eu queria saber... como se cria uma imagem ou texto que, quando clicado, aparece algo em baixo? Tipo o arquivo do blog como menu suspenso, sabe?
É usando o onmouseover?
Obrigado!
Ai mano vim agradecer a tudo o que sei pertence a voce, hoje meu blog está com 6000 visitas diárias e em primeiro lugar no google
ResponderExcluirObrigado por postar tutoriais
me ajudou muito
vlw
:D
não consegui fazer meu template n tem
ResponderExcluir:S
meu template ñ achou os codigos o que faço?
ResponderExcluirse baixou seu template de algum site é provável que tenha tags diferentes.
ResponderExcluiralguns modelos novos do blogger também tem tags diferentes, estamos fazendo alguns testes para achar outra maneira de mostrar essa lista, assim que concluirmos vamos publicar aqui no Dicas para Blogs
olha essa foto do meu blog ( http://img87.imageshack.us/img87/3715/blogggggggggggggg.jpg ), essa postagem relacionada eh do LinkWithin e ta sem imagem,só que algumas ficam com imagem outras nao,eu queria uma tipo assim,mais na pagina inicial do blog,nao dentro de cada postagem,nessa vc pode ver q ta na pagina principal do blog...ainda nao conseguiu uma assim neh? abraços
ResponderExcluirinfelizmente isso é proprio do linkwithin, não temos como controlar quando ele mostra imagens ou somente links
ResponderExcluirGostei, muito legal mesmo.
ResponderExcluirGostaria de saber como fazer, assim como nesse blog, algum recadinho. Exemplo:
"Leia antes de comentar
Comentários com insultos ou escritos em miguxês serão excluídos.
Não faça spam, comentários com endereço ou links de blogs serão deletados.
Muitas pessoas tem acesso a esse blog portanto não deixe seu email ou senha nos comentários"
Vocês tem algum post que fala sobre isso? Aguardo respostas.
Beijos
Paulinha, isso é simples de fazer, entre em configurações, comentários lá você encontra Mensagem do formulário de comentário, então é só digitar um texto, vou fazer uma explicação mais detalhada sobre isso, afinal ainda não tocamos neste assunto
ResponderExcluirOlá Fabiano.
ResponderExcluirGostaria de saber se você sabe como resolver este "problema".
Adicionei no meu blog, e as listas aparecem (q por sinal são ótimas). mas gostaria de saber se tem como retirar um link que aparece escrito "undefined" em todos os posts.
está aparecendo undefined usando o código desta postagem? é muito estranho, veja se fez as alterações corretas, provalmente houve algum erro de caracter no copiar e colar o código
ResponderExcluirmeu template não tem esse codigo---> body{.... }
ResponderExcluircomo faço por favor!
não aparece exatamente assim no lugar dos pontinhos tem códigos de formatação
ResponderExcluirOlá! Como tenho dois blogs com o mesmo assunto mas com enfoques diferentes, gostaria de saber se existe alguma ferramenta/código para fazer com que fiquem interligados através da automatização de links relacionados, ou seja, que os links relacionados sejam buscados nos 2 blogs?
ResponderExcluirValeu!
não tem como juntar os dois blogs nos assuntos relacionados, mas você pode fazer um lista de links aleatoria de um blog no outro, veja aqui:
ResponderExcluirLista aleatória das postagens recentes do blog
Fabiano... Como deixar os links posicionados do lado esquerdo (left)?
ResponderExcluirBeijinho
na parte final do post tem a formatação dos links, então dentro do estilo .assuntos a{...
ResponderExcluircoloque text-align: left;
Com text-align:left;
ResponderExcluirNão deu certo, porém consegui com float: left;, mas fica encima da barrinha de separação das postagens e os links estão todos em maiúsculo...
Como resolver isso?
se usou o float left, coloque também padding-left:5px; e ajuste o valor 5px
ResponderExcluirsobre as letras todas maiusculas veja se tem esse estilo no seu código quando encontrar apague
text-transform: uppercase;
Veja bem, no código já tem padding-left:5px; é só para ajustar o valor 5px?
ResponderExcluirE as letras continuam em maiúsculas mesmo tendo apagado text-transform: uppercase; Há outro código possível provocando isso?
tem como fazer com que esse codigo fique na pagina inicial do blog em cada postagem? e nao só dentro da msm....pq tipow,só aparece os posts relacionados qnd clicamos na postagem né
ResponderExcluirabraços
esse código só funciona dentro das postagens. o que usamos em nossa barra lateral é uma adaptação de outro código: Lista aleatória das postagens recentes do blog
ResponderExcluirah! droga! o que qui eu faço?????
ResponderExcluirnas duas primeiras deu certo, ai eu salvei,
so que depois, eu caçei apertanto control F e não existe o <p class='post-footer-line post e nem no resto num existe +! meu blog já era! o que qui eu faço?
U_U
pesquise por post-footer-line deve ser mais facil de achar
ResponderExcluiro que o (a) @@@@ está querendo dizer que caçou pelo control F?? o que isso faz e como se faz??
ResponderExcluirporque eu to lendo o textinho la dos htmls inteeeiro a procura do post-footer-line e não acho
Aahhh, eu to com a impressão que eu coloquei o código do 1° passo no segundo tambem e depois salvei !!!!e agora eu nao acho por nada o post-footer-line !! meu blog já era!!!!! O que eu faço????
ResponderExcluirJuuh s2
ResponderExcluiraperte o botão ctrl e a tecla F no seu teclado vai aparecer uma caixa para buscar texto dentro da pagina atual, assim pode achar os códigos mais facil, mas digite trechos pequenos, e iguais ao código que procura (espaços em branco fazem diferença na busca)
precisa clicar para expandir o modelo para achar o trecho post-footer-line
ResponderExcluirFabiano, no código... Onde está o controle de quantidade?
ResponderExcluirOu seja, se quero colocar apenas 6 assuntos, onde mexo?
a quantidade está neste trecho pt&callback=related_results_labels&max-results=5
ResponderExcluirFabiano... Eu coloco a quantidade e não obedece... aparece uma quantidade muito grande.
ResponderExcluirEstá feio. O que faço agora?
vou fazer mais alguns testes no código... quando fiz o tutorial usei o código e funcionou normalmente, mas fui fazer agora e realmente não consegui mudar o numero de postagens
ResponderExcluira ultima parte nao consigo! nao tem o body.. lá! q q eu faço pra fik sem imagens?
ResponderExcluirkarolvmc
ResponderExcluiresse trecho final pode ser antes de ]]></b:skin>
veja mais aqui: Onde colocar os códigos no blog
muito boa estas dicas,gosto muito desse blog,eu gostaria que vcs fizesse artigos sobre meta tags séria possivel?
ResponderExcluirentretenimentoinfo
ResponderExcluirveja aqui:
Descrição e Palavras Chave - Meta Tags
Quais as Palavras Chaves mais Pesquisadas no Google
Não consegui e preciso muito disso
ResponderExcluira linha
-p class='post-footer-line post-footer-line-3'/-
não existe esta linha
existe em ves de post seria coments
'coments-footer'
Se souber me dizer se posso criar a linha -p class- em em que lugar devo criá-la?
use o ctrl f e pesquise por um trecho menor, por exemplo footer-line
ResponderExcluiro crtl f procura texto exatamente igual, as vezes um espaço dá erro
pesquisei somente a palavra footer
ResponderExcluire ela aparece duas veses e diz:
coment-footer
nas duas!
creio que eu tenho que fazer essa linha
se tiver algun tutorial de como faze-la!
então uma delas deve ser parecida com o trecho que citamos na postagem
ResponderExcluirOlá fabiano depois de quase desistir estou aqui denovo!
ResponderExcluirAté o passo 2 tudo certo
dps desse passo ja tenho posts relacionados mas ficam abaixo dos comentarios lá longe!
No passo 3 como não existe a linha line-3
resolvi colocar o codigo em varios lugares
1º ele apareceu no mesmo lugar embaixo dos comentarios só que ele duplicou
2º A Parte Duplicada consegui colocar no Lugar certo ficou entre os posts e os comentarios. O Problema que meu template não tem essa sidebar e fica tudo escuro aparece somente as imagens
Se Puder me ajudar a desduplicar e fazer uma sidebar :D
valews
Baixe A Mais
ResponderExcluira idéia de colocar em varios lugares até achar a posição certa é boa ... já fiz isso varias vezes...
mas tem que colocar uma por vez e apagar na hora de trocar senão ficará mesmo com conteudo duplicado
Puxa, fiz tudo passo a passoe nao apareceu nenhuma lista no meu blog... Nao tenho que necessariamente fazer os botoes, né? Depois de editar o HTML comod escrito aqui, onde deveria aparecer a lista de assuntos do meu blog?
ResponderExcluirObrigada!
Ah, acho que achei, quando clico nas postagens, lá embaixo aparece "posts relacionados". É isso? E como faço para relacionar os posts?
ResponderExcluirMony ;-)
ResponderExcluirisso mesmo, os posts relacionados só aparecem na pagina das postagens do blog e não na pagina inicial
Mas como faço para relacionar os posts? Porque só aparece escrito "posts relacionados", mas nao aparece nenhum link para nenhum post...
ResponderExcluirMony ;-)
ResponderExcluirvocê usa os marcadores no seu blog?.... os assuntos relacionados são feitos com base nos marcadores
Ah, obrigada, já me liguei! Deu certinho! Muito obrigada pelas dicas!
ResponderExcluirmuito bom mesmo!!!!!!!
ResponderExcluirparabens!
não consigo achar a terceira parte ja procurei 8 vezes por que ???
ResponderExcluirtalvez seu template seja diferente... se for o caso não tem o que fazer.
ResponderExcluirmas veja se marcou para expandir o modelo e use o ctrl F
isso quer dizer que n tem jeito de colocar no meu blogger ? tambem coloqueno ctrl + F e n encontrou
ResponderExcluirseu template deve ser modificado, por isso usa tags diferentes então não tem como modificar.
ResponderExcluirsó de entender de html para achar os trechos certos e claro fazer testes até descobrir
Olá! Tenho uma dúvida: instalei o linkwithin no meu blog, porém ele mostra posts que eu já havia excluído. Existe alguma forma de corrigir isso?
ResponderExcluirinfelizmente não tem como resolver problemas de posts já excluidos no linkwithin
ResponderExcluirOlá Fabiano, gostaria de tirar uma dúvida. Sabe em baixo do seu post onde colocou: Outros Tutoriais.
ResponderExcluirComo eu faço isso igual ao seu utilizando imagens?
Outra dúvida. rs. Como faço pra apagar o Tecnologia do Blogger do rodapé e deixar os créditos q eu quiser? Vlw ai e parabéns pelo Blog, tem me ajudado muito.
ResponderExcluirJC
ResponderExcluirusamos o linkwithin para mostrar "Outros Tutoriai..." ,veja aqui Mostrar assuntos relacionados no blog
não posso mostrar como retirar os creditos do blogger
Obrigado suas dicas me ajudam muito
ResponderExcluirNão dá certo de jeito nenhum.
ResponderExcluirPrimeiro tentei não alterar nada no código; aparece o "leia mais" formatado mas sem nenhum link embaixo.
Depois tentei modificar a parte que indica o link do feed do blog e colocar o link do feedburner n lugar e nada.
Por último, tentei trocar as ocorrências de " por aspas e & por & e aparecia uma mensagem de texto dizendo que a referência à entidade "max-results" foi referenciada, mas não declarada.
ϟ Rαumschiffkαpitänin
ResponderExcluiro sinal & faz parte do código não pode modificar isso.
Muito bom seu post, útil.
ResponderExcluirOlá, por favor me ajudem.
ResponderExcluirColoquei linkwithin no blog da minha escola, mas os posts colocados após a instalação do linkwithin não estão aparecendo. O que eu faço?