Código para exibição aleatória de banners

Fui procurada pelo Patrick Nogueira, do blog Boas Promoções, para conhecer um script desenvolvido por ele que tem a função de randomizar a exibição de banners na sidebar.

O Patrick me pediu para publicar o script aqui no Dicas Blogger, a fim de compartilhá-lo com um maior número de usuários. Como achei a idéia interessante, principalmente para quem  utiliza o sistema de parcerias com banners, resolvi escrever o post.  Com este script, os blogs parceiros irão aparecer de forma aleatória, a cada nova exibição de página.

Não entendeu? Então vamos para um exemplo: quero exibir na minha sidebar os banners de 10 blogs diferentes; o primeiro é o blog 1, o segundo é o 2, o terceiro é o 3 e assim sucessivamente. O blog 10 vai ficar lá no final da fila, certo? Errado. Com o script do Patrick, ele irá aparecer em uma nova posição toda vez que a página for atualizada.

O procedimento para inserir o script no blog é bem simples. Copie o código abaixo, cole no bloco de notas e substitua as partes em vermelho pelo código de cada banner a ser exibido. Depois, copie o código editado e cole na sidebar em html/javascript.

<script type="text/javascript">

function randOrd()

{

return (Math.round(Math.random())-0.5);

}

function randBan(){

var parceiros = new Array();

parceiros[0]='CÓDIGO DO BANNER';
parceiros[1]='CÓDIGO DO BANNER';
parceiros.sort( randOrd );

for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');

return;

}

randBan();

</script>

Vou dar um exemplo, usando os banners do Dicas Blogger e do blog Boas Promoções:

<script type="text/javascript">

/* Esta função irá fazer o randômico dos banners */

function randOrd()

{

return (Math.round(Math.random())-0.5);

}

/* Função que irá escrever os banners na tela*/

function randBan(){

var parceiros = new Array();
/* Aqui colocamos a quantidade de banners para rotacionar. Você pode criar de parceiros[0] até parceiros[N] */
parceiros[0]='<a href="http://www.boaspromocoes.com.br" target="_blank"><img border="0" src="http://img34.imageshack.us/img34/9468/56072301.gif" title="As melhores promoções da internet"/></a>';
parceiros[1]='<a target="_blank" href="http://dicasblogger.blogspot.com/" title="Dicas Blogger"alt="Dicas Blogger"><img src="http://lh6.ggpht.com/ekosterapia/SJQh02kmhBI/AAAAAAAABnE/Bxr3ACrLRoo/s144/banner.png" style="border: 1px solid #000000" /></a>';
//Aqui iremos randomizar a posição dos banners

parceiros.sort( randOrd );
//Aqui iremos escrever os banners em sua ordem aleatória

for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');

return;

}

randBan();

</script>

O código também pode ser visualizado aqui.

Eu testei e funciona! Qualquer dúvida referente à instalação do script, deve ser encaminhada ao seu desenvolvedor. Os elogios podem ser encaminhados pra nós dois ( lol )

Fote da Postagem

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.

Imagem: Keyler Wagner on Flicker

Fonte da Postagem

Anúncios nas postagens do Blogger

Divulguei, recentemente, formas de exibir os anúncios pagos dentro dos posts.
Porém, hoje fui fazer os procedimentos para meu novo blog e me perdi um pouco entre tantos links, de tantos blogs... então, resolvi colocar tudo em um único post, para facilitar a minha vida e a de vocês.
Vale tanto para o AdSense quanto para o UOL afiliados.
Os créditos irão para os seguintes blogs, de onde retirei o conteúdo para este tutorial:
Templates Novo Blogger-Usuário Compulsivo-Blosque

• CONVERTENDO O CÓDIGO 

A primeira coisa que devemos fazer para colocar anúncios nos posts é converter o código gerado pelo programa de afiliados. Este procedimento não fere os termos do AdSense.

1. Vá no site do programa de anúncios e gere o código.
2. Entre neste site , cole o código na caixa em branco e clique em PARSE. Assim estaremos convertendo-o para a linguagem aceita pelo Blogger.

• COLOCANDO OS ANÚNCIOS NOS POSTS 

Para inserirmos as anúncios nas postagens, é necessário editar o html do template.
Basta ir em "Layout" e escolher "editar html"
Uma forma fácil de encontrar as tags (trechos de códigos) é utilizando o Crtl+F do teclado.

• ESCOLHENDO A MELHOR LOCALIZAÇÃO 

PARA INSERIR ENTRE O TÍTULO E O POST:
Insira o script convertido antes da tag <div class='post-body'>

PARA INSERIR NO FINAL DO POST:
Insira o script antes da tag <div class='post-footer'>

PARA INSERIR APÓS OS CRÉDITOS:
Insira o script antes da tag <p class='post-footer-line post-footer-line-3'>

• ESCOLHENDO A HOME OU PÁGINAS INDIVIDUAIS 

É possível configurar para que os anúncios apareçam na home page ou apenas nas páginas individuais. Eu prefiro a segunda opção pois deixa o visual mais clean.
Abra o bloco de notas, copie os código em vermelho e insira o do anúncio conforme indicado.

PARA INSERIR  OS ANÚNCIOS NAS PÁGINAS INDIVIDUAIS:
<b:if cond='data:blog.pageType == "item"'> BLOCO DE ANÚNCIO
</b:if>
PARA INSERIR NA HOME:
<b:if cond='data:blog.pageType != "item"'>
BLOCO DE ANÚNCIO
</b:if>
Feito isto, escolha a melhor localização como explicado anteriormente.

• UM EXEMPLO PRÁTICO 

Quero colocar um anúncio do AdSense, entre o título e o post, somente nas páginas individuais.
<b:if cond='data:blog.pageType == "item"'> BLOCO DE ANÚNCIO CONVERTIDO
</b:if> <div class='post-body'>

 

Espero ter conseguido facilitar a vida dos futuros ProBloggers.
Meus agradecimentos aos queridos gurus, Ariane e Compulsivo.

Fonte da Postagem

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>

Veja na imagem:

Depois é só clicar em "salvar modelo".

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

Alterando Favicon

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?

Abraços

ATUALIZAÇÃO:

Para funcionar em todos os navegadores, leia este post:
Favicon:Como criar e hospedar imagens .ico

Fonte da Postagem 

Código para Posts Relacionados

Super dica que vi no Blog do meu amigo Paulo Estevão, do Códigos Blog.
Pedi sua autorização para publicar e ele, prontamente, concordou.
É um tutorial para inserir os Posts Relacionados no Blogger.
Colocando este código no layout do nosso blog, ao final de cada post, aparecerão links de posts com assuntos semelhantes, baseados nos "marcadores",o que facilitará a navegação dos nossos leitores.
Exemplo:


Vamos lá?

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 logo 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 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.pageType == &quot;item&quot;'> Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Valeu Paulo!!!! Excelente dica!
Post original aqui

Aí pessoal, podem fazer sem medo. Deu certinho!

Os comentários para este post estão desabilitados. Em caso de dúvidas, por favor, dirija-se ao nosso fórum.

Fonte da Postagem

Widget Últimos Comentários

Para inserir os comentários mais recentes do seu blog na barra lateral (sidebar), clique em adicionar widget, escolha FEED e coloque o seguinte código:

http://morada_do_seu_blogue.blogspot.com/feeds/comments/default

Substituindo "morada do seu blogue" pelo link do seu blog.

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>

RESULTADO

Caixa de Texto

Com esta caixinha de texto, que retirei de um blog que gosto muito, o BlogMania ,é possível também publicar códigos ou mesmo dar um destaque em um post.

<textarea
rows="5"
cols="50"
style="background-color: #ffffff; color: rgb(0, 0, 0);"
wrap="soft">ESCREVA AQUI O SEU TEXTO</textarea>

RESULTADO

FONTE:

Imagem Linkada

Para inserir uma imagem no seu blog, apontando para um link, basta copiar o código abaixo:

<a href="endereço do site"><img src="endereço da imagem" /></a>

EXEMPLO

Busca

Para inserir um campo de busca no Blog:

Lembrando de trocar MORADA DO SEU BLOGUE pelo seu link do Blog que você vai utilizar.

<div class="module-search module">
<div class="module-content">
<form action="http://blogsearch.google.com/blogsearch"
method="get">
<input value="MORADA DO SEU BLOG" name="bl_url"
type="hidden"/>
<label for="search"
accesskey="4"></label><br/>
<input id="search" name="as_q" size="20" type="text"/>
<input value="Buscar" name="submit"
type="submit"/></form></div></div>

RESULTADO

Fonte da Postagem