A revista Computerworld chegou a essa conclusão depois de fazer um teste que compara a velocidade de diferentes navegadores e leva em conta apenas a linguagem JavaScript.


Os técnicos da publicação realizaram o teste três vezes e descobriram que, em média, o navegador da Microsoft, o Internet Explorer 8 (IE 8), rodou 9,6 vezes mais rápido quando usado com o plug-in Frame do Google Chrome. Os especialistas dizem que o plug-in permite ao IE 8 usar as ferramentas de alto desempenho do Google Chrome.


O Google disse que a velocidade extra é necessária quando os usuários do IE querem usar aplicativos avançados para web, como o Google Wave, uma ferramenta multiplataforma de comunicação, que foi aberta para desenvolvedores em maio passado. Mais novo concorrente do Facebook, o Google Wave deverá ser lançado até o final deste ano (versão de testes foi lançada ontem e já pode ser testada).


Uma comparação entre diferentes navegadores nesta semana revelou que o Chrome 3.0 é mais rápido que o IE8, o Firefox 3.5, o Opera 10 e o Safari 4.0, da Apple.


O Google está cada vez mais provocando a Microsoft o que é muito bom pois gera concorrência e novos produtos cada vez melhores se você se interessou pelo plugin pode baixo-lo, mais eu indico baixar o Google Chrome que além de rápido tem muito desempenho.
Leia mais...



Este hack exibe o todas as postagens por data, mês e marcador muito bom para exibir como mapa do blog veja a baixo como proceder:


1.Faça login no Blogger


2.Vá para ''Postagem''->"Nova postagem"->"Editar HTML"
Insira o código abaixo modificando as partes indicadas na nota:
<script style="text/javascript" src="http://noticiaeblog.googlecode.com/files/blog_toc.js"></script>
<script src="http://noticiaeblog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Nota: Substitua a url em vermelho pela url do seu blog


3.Dê um nome para a postagem e salve.

Referência: Abu Farhan translate the script by Notícia e blog
Leia mais...
Em sites de notícia (R7,G1) é comum vermos pequenos links de mais e menos que quando pressionados aumentam ou diminuem a letra facilitando a visualização do artigo.

No Blogger isto é possivel adicionando um pequeno JavaScript que é colocado acima da <body> ou seja acima do texto e um link de +A e -A para indicar ao leitor que pressionando ali o texto vai aumentar ou diminuir vamos ver abaixo como adicionar no Blogger;

Primeiro vamos acessar a area do html do Blogger

1.Faça Login no Blogger

2.Vá para "Layout"->"Editar Html"

Acrescentando o script no Blog


3.Procure pelo código abaixo utilizando as tecla Ctrl e F(atalho de pesquisa rápida):
</head>
Adicione o código abaixo acima do código anterior:
&lt;script type=&quot;text/javascript&quot;&gt;
// Início do código de Aumentar/ Diminuir a letra
&nbsp;
// Para usar coloque o comando: &quot;javascript:mudaTamanho(&#039;tag_ou_id_alvo&#039;, -1);&quot; para diminuir
// e o comando &quot;javascript:mudaTamanho(&#039;tag_ou_id_alvo&#039;, +1);&quot; para aumentar
&nbsp;
var tagAlvo = new Array(&#039;p&#039;); //pega todas as tags p//
&nbsp;
// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small&#46;..
var tamanhos = new Array( &#039;9px&#039;,&#039;10px&#039;,&#039;11px&#039;,&#039;12px&#039;,&#039;13px&#039;,&#039;14px&#039;,&#039;15px&#039; );
var tamanhoInicial = 2;
&nbsp;
function mudaTamanho( idAlvo,acao ){
&nbsp;&nbsp;if (!document.getElementById) return
&nbsp;&nbsp;var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
&nbsp;&nbsp;tamanho += acao;
&nbsp;&nbsp;if ( tamanho &lt; 0 ) tamanho = 0;
&nbsp;&nbsp;if ( tamanho &gt; 6 ) tamanho = 6;
&nbsp;&nbsp;tamanhoInicial = tamanho;
&nbsp;&nbsp;if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
&nbsp;&nbsp;
&nbsp;&nbsp;selecionados.style.fontSize = tamanhos[ tamanho ];
&nbsp;&nbsp;
&nbsp;&nbsp;for ( i = 0; i &lt; tagAlvo.length; i++ ){
&nbsp;&nbsp;&nbsp;&nbsp;tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
&nbsp;&nbsp;&nbsp;&nbsp;for ( j = 0; j &lt; tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
&nbsp;&nbsp;}
}
// Fim do código de Aumentar/ Diminuir a letra
&nbsp;
&lt;/script&gt;


4.Salve as alterações.

Adicionando os links de -A - +A

5.Vá para "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript"
Adicione o código abaixo e salve:
<a class="menos" href="javascript:mudaTamanho('body', -1);" title="Diminuir tamanho do texto">-A</a> - <a class="menos" href="javascript:mudaTamanho('body', 1);" title="Aumentar tamanho do texto">+A</a>
6.Pronto, você adicionou com sucesso!

Aproveite e leve nossa caixa de busca personalizada!





Leia mais...
No Iconspedia você encontra vários ícones para personalizar seu  
Blog e deixa-lo do seu jeito. Icones não são apenas estética mas também servem para mostrar algumas coisas, veja o exemplo do seu computador o que seria ele sem ícones seria complicado encontrar o que você procura rápido. Veja alguns ícones encontrados lá:


iconesiconesiconesiconesicones




Baixar ícones:
Leia mais...


Este hack exibe as postagens relacionadas abaixo de todas as postagens, como você pode ver aqui no Notícia e blog. Isto é importante pois influência o leitor a buscar mais conteúdos no seu blog gerando mais visitas.

Funcionamento:
Ele faz um resumo de todas as postagens e seleciona aleatoriamente as postagens mais relevantes ao conteúdo, para que ele funcione é necessário a colocação de marcadores pois é isto que gera postagens parecidas.

Inserindo o Hack:
1.Faça login no Blogger

2.Vá para "Layout"->"Editar Html"->Marque "Expandir Modelos de Widgets"
Agora utilizando as tecla Ctrl e f pesquise o código abaixo:
]]></b:skin>
Agora abaixo do código anterior insira o código abaixo:
<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 cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}
}
document.write('</ul>');
}

//]]>
</script> 

Nota: Em verde "relatedTitles.length && i < 20)" define quantos caracteres deverá ter o título de cada postagem altere o numero "20" ao seu gosto, em laranja " if (cuantosPosts == 3) { " define quantas postagens relacionadas serão exibidas altere o número "3" pelo número desejado.

3.Agora procure pelo código abaixo:
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
e abaixo dele adicione o código seguinte:
<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=10"'
type='text/javascript'/>
</b:if>

4. Agora (tenha paciência) procure pelo código seguinte:
<div class='post-footer-line post-footer-line-3'/>
Se não encontrar pesquise por:
<p class='post-footer-line post-footer-line-3'/>
Adicione abaixo dele o próximo código:
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<h3>Artigos relacionados: </h3> <script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>

5.Salve as alterações e visualize

Você adicionou com sucesso!? responda nós comentários
Referência:Diyva 
Imagem por: Sempre 9vidades 
Leia mais...


Hoje vou ensinar como adicionar ao lado do título da postagem uma imagem ou ícone, para deixar seu Blog com Layout personalizado veja abaixo como fazer, mas atenção antes de começar é recomendado fazer uma cópia do template pois se alguma coisa der errado você pode voltar rapidamente:

1.Faça login no Blogger

2.Vá para Layout->Editar HTML->marque a caixinha Expandir modelo de Widget
Agora utilizando as teclas Ctrl e F procure pelo código abaixo:
<b:includable id='post' var='post'>
Agora um pouco abaixo dele encontre o seguinte código:
<a expr:href='data:post.url'>
3.Agora após o código anterior insira o código abaixo modificando de acordo com a nota:
<img src='http://Url da imagem ou icone' style='vertical-align: middle;'/>
Nota:Altere onde está em azul pela url da imagem ex: http://i38.tinypic.com/29li8zl.png

Depois de adicionar a linha acima deverá ficar parecido com a imagem abaixo:








4.Salve as alterações e visualize.

Pronto! O ícone ou imagem vai aparecer em todos os títulos das postagens se não encontrou um ícone sugiro o Famfamfam 
Leia mais...


Antes ter o seu botão vamos saber um pouco sobre o assunto "tweet" e "retweet"
Tweet é uma mensagem enviada pelo Twitter
RT ou Retweet é um método muito rápido para partilhar informação no Twitter
O Retweet consiste basicamente em repetir o tweet de outra pessoa, mas reconhecendo essa mesma pessoa como a fonte de informação.
Agora que já sabemos o que são estas palavras e siglas vamos ao hack:


1.Faça login no Blogger
2.Vá para Layout->Editar HTML->marque a caixinha Expandir modelo de Widgets
Agora procure pelo código abaixo utilizando as teclas Ctrl e F:
<data:post.body/>
Agora acima dele adicione o código abaixo modificando de acordo com a nota:
<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'seu_nome_de_usuário_do_twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Nota: Substitua o texto em azul pelo seu nome de usuário do Twitter ex: noticiaeblog.
3.Salve as alterações e visualize.


Veja como fica após instalado:











Referência:Blogger Plugins



Leia mais...


O Blogger é considerado uma das melhores plataforma de Blog, mais ainda falta algumas funcionalidades que outros sistemas oferecem e uma delas é destacar os comentários do autor. É importante destacar, para o leitor ter uma certeza de que quem respondeu o comentários dele foi o autor e não um usuário e assim poder confiar na dica ou na resposta dada. Veja abaixo como destacar no seu Blog:


1.Faça login no Blogger


2.Vá para Layout->Editar HTML-> marque a caixinha Expandir modelos de Widget
Lembre-se de salvar uma Cópia do modelo (basta clicar em "Baixar o modelo completo" e depois selecionar o local que deseja salvar ).


3.Procure pelo seguinte trecho utilizando as teclas Ctrl e F:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Agora insira o código seguinte abaixo do código acima:
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

4.Agora procure pelo código abaixo:
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

E insira o código seguinte abaixo do código acima:
</b:if>
5.Agora vamos alterar a CSS do Blog, procure pelo código seguinte:
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

E abaixo dele insira o código seguinte " Se não encontrou coloque antes de ]]></b:skin>  "
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}

6.Salve as alterações e confira o resultado.

O resultado é esse da imagem abaixo:


Referência: el escaparate de rosa
Leia mais...



Este script exibe o número total de postagens do seu Blog automaticamente veja abaixo como aplica-lo ao seu Blogger:


1.Faça login no Blogger


2.Vá para Layout->Elementos da página->Adicionar um Gadget->HTML/JavaScript










Nota:Insira o código abaixo modificando de acordo com seu Blog:
<script style="text/javascript">
function showpostcount(json) {
document.write('<b><i> <font color="#9E5205" size="6">' + parseInt(json.feed.openSearch$totalResults.$t,10) + '<br></font></i></b>');
}</script>

<script src="http://seu-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

Nota:Em vermelho coloque o nome do seu Blog, o código em verde definine a cor da letra de exibição dos número, o número em laranja é o tamanho da letra.


Para ver como inserir um contador de comentários veja nesse link


Referência:Anujpathania
Leia mais...
contador


Este script exibe o total de comentários de todas as postagens do Blog, veja abaixo como inserir em seu Blogger:


1.Faça login no Blogger


2.Vá para Layout->Elementos da página->Adicionar um Gadget->HTML/JavaScript










Insira o código abaixo modificando de acordo com seu blog
<script style="text/javascript">
function showcommentcount(json) {
document.write('<b><i> <font color="#9E5205" size="6">' + parseInt(json.feed.openSearch$totalResults.$t,10) + '<br></font></i></b>');
}</script>

<script src="http://seu-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showcommentcount"></script>



Nota: Em vermelho insira seu Blog 

Veja o exemplo abaixo:






Update: Este script não funciona mais! Pois meu blog possui mais de 300 comentários e ele está exibindo 81.

Referência:Anujpathania
Leia mais...
Uma maneira fácil de ganhar espaço é colocar mais um espaço para adição de Gadget, este espaço será divido em dois permitindo adicionar dois Gadgets no espaço de um.


O modelo que usei no exemplo é o template mínima então antes de fazer as alterações salve uma copia do modelo pois se der errado você pode voltar ao normal, então vamos a aplicação.


 1.Faça login no Blogger


2.Vá para Layout->Editar HTML->Marque a caixinha Expandir Modelos de Widget
Agora utilize as teclas Ctrl e F para para encontrar o código abaixo:
#sidebar-wrapper {
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 */
}

Se não encontrar desta forma pesquise apenas o código abaixo mas lembre-se que o final tem que ter uma chave como está }.
#sidebar-wrapper { 
Agora abaixo deste código insira o código abaixo mas lembre-se de que o código abaixo tem que ficar depois de uma chave }, veja o exemplo: #sidebar-wrapper { ....}coloque o código aqui
#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; }
3.Agora procure pelo código abaixo:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div>
Se não encontrar procure por este:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Agora abaixo deste código insira o código abaixo:
<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>

4.Salve as alterações.

5.Vá para Layout->Elemento da página
E veja se ficou como a imagem abaixo:
Sidebar dobleDoble sidebar




Se preferir baixe o template mínima com sidebar dupla -                                                                             Alguns direito reservados ao autor 
Referência: Elescaparatederosa
Leia mais...

O Blogger Buzz informou ontem que o blogger agora permite a adição de fotos aos comentários. As imagens são incorporadas ao lado dos comentários, também se tornou fácil fazer o upload da foto para o comentário, agora é adicionado automaticamente uma caixa que permite o fácil upload, basta clicar em visualizar ao lado do botão de postar comentário. Ou seja toda vez que comentar em Blogs do Blogger sua foto do perfil aparecerá junto ao comentário.



"Para ativar ou desativar as imagens de perfil nos comentários do seu blog, vá para Configurações | Comentários."
Este que é mais um recurso dos 10 anos do Blogger. Parabéns! 


Você deve ter visto o recurso funcionando aqui na area de comentário se no seu blog não apareceu não se preocupe o IceBreaker criou uma postagem de como adicionar as imagens do perfil ao lado dos comentários do Blogger.


Referência: Blogger Buzz
Leia mais...




Aprenda a destacar seus artigos de forma simples, usando imagens que tem relação com as postagens, ainda é possível adicionar uma breve descrição da postagem, aqui no Notícia e blog eu utilizo para realçar as postagens mais interessantes. Este hack é o Smooth Gallery um script de simples aplicação mais muito util veja abaixo como criar seu Gadget de destaque de postagens:


1.Faça login no Blogger


2.Vá para Layout->Editar HTML
Agora Utilizando as tecla Ctrl e F procure pelo código abaixo:
</head>
E abaixo deste código adicione o código abaixo:
<script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/> <link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341SM0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

3.Agora procure pelo código abaixo:
]]></b:skin>
Antes dele adicione o trecho abaixo personalizando de acordo com a nota:
#myGallery{
width200px !important;
height100px !important;
overflow: hidden;
}


 Nota: Width é a largura personalize o número de acordo com largura desejada, Height é a altura personalize a de acordo com a altura desejada.


4.Salve as alterações


5.Vá para Layout->Elementos da página->Adicionar um Gadget->HTML/JavaScript


Agora insira como conteúdo o código abaixo personalizando:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGallery">
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2009/10/hoje-um-dos-problemas-do-blogger-e-nao.html"/>
<img alt="Otimizando os títulos das postagens" src="http://i33.tinypic.com/25ppf84.png" class="full"/>
<h3>Otimizando os títulos das postagens</h3>
<p>Veja como ter seu blog bem posicionado... </p>
</a></div>
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2009/12/exibindo-p.html"/>
<img src="http://imgur.com/iA61u.png" class="full"/>
<h3>Posts Randômicos</h3>
<p>Aprenda a  colocar seus posts em random...</p>
</a></div>
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2010/01/calcular-pagerank-verifique-seu.html"/>
<img src="http://i.imgur.com/Fi0Po.jpg" class="full"/>
<h3>Calcular PageRank - verifique seu PageRank</h3>
<p>Verifique seu PageRank...</p>
</a></div>
</div>

Nota: Substitua os itens em vermelho pelas urls
6.Salve


Pronto você destacou seu artigos!

Se quiser Hospedar os scripts baixe e coloque no seu servidor se não tiver veja Hospedagem Gratis


Update: Atenção se você teve algun erro ao tentar fazer o uso destes códigos refaça o tutorial pois eles foram corrigidos!
Leia mais...



Favicon é um ícone que fica ao lado do navegador, não é tão importante, mas para deixar o seu design completo ele é necessário, por padrão o Blogger já adiciona automaticamente um favicon mesmo que você não tenha colocado para personaliza-lo é muito facil veja o tutorial abaixo:
Primeiro você deve ter uma imagem de 16x16 no formato icone e uma no formato png se não uma imagem no formato icone, use o convertico e converta sua imagem png para o formato ico. Agora vamos aplica-la ao template:


1.Faça login no Blogger


2.Vá para Layout->Editar Html
E utilizando as teclas Ctrl e F procure pelo código abaixo:
]]></b:skin>Após o código acima adicione o seguinte:
<link href='http://sites.google.com/site/noticiaeblog/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/> <link href='http://lh4.ggpht.com/_QocHY3CSRM0/SXI9iDvVcMI/AAAAAAAABME/h3eiEKFXn8c/s144/blackseagull_favicon.png' rel='shortcut icon'/>
<link href='http://lh4.ggpht.com/_QocHY3CSRM0/SXI9iDvVcMI/AAAAAAAABME/h3eiEKFXn8c/s144/blackseagull_favicon.png' rel='apple-touch-icon'/>
<link href='http://lh4.ggpht.com/_QocHY3CSRM0/SXI9iDvVcMI/AAAAAAAABME/h3eiEKFXn8c/s144/blackseagull_favicon.png' rel='shortcut icon' type='image/x-icon'/>


Nota:Substitua as urls pelos urls de sua imagens respeitando o a parte em negrito.Onde está ico adicione a url da imagem no formato ico e onde está em png coloque a url da imagem png


3.Salve as alterações.

Você adicionou sua favicon com sucesso mas lembre-se que para você visualisa-lo você tem que remover seu historico de navegação pois o navegador salvou a favicon antiga.

Leia mais...