Mostrando postagens com marcador Hacks. Mostrar todas as postagens
Mostrando postagens com marcador Hacks. Mostrar todas as postagens

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!

Retirar Navbar do Blogger

0 comentários

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

blogger-edit-navbar02

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
 

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