JavaScript Para Rotacionar Banners

Este código é capaz de rotacionar qualquer quantidade de banners, e o que é melhor ainda, em qualquer tamanho!

Esta é uma ótima alternativa para que seus banners sempre chamem a atenção de seus leitores assim que entrarem em  seu site, afinal, algo estará diferente!


Pode parecer que não muda muita coisa, mas para seu leitor muda, afinal ele não passa horas olhando para o material do seu blog, ele apenas acostuma com o padrão, e quebrar este padrão sem perder sua marca, sua identidade visual é importante!

<script language="JavaScript">

var how_many_ads = 2;

var now = new Date()

var sec = now.getSeconds()

var ad = sec % how_many_ads;

ad +=1;

if (ad==1) {

txt="";

url="http://www.sitedobanner.com";

alt="texto alternativo";

banner="url completa do banner";

width="largura do banner em px";

height="altura do banner em px";

}

if (ad==2) {

txt="";

url=" http://www.sitedobanner.com ";

alt=" texto alternativo ";

banner=" url completa do banner ";

width=" largura do banner em px ";

height=" altura do banner em px ";

}

document.write('<center>');

document.write('<a href=\"' + url + '\" target=\"_blank\">');

document.write('<img src=\"' + banner + '\" width=')

document.write(width + ' height=' + height + ' ');

document.write('alt=\"' + alt + '\" border=0><br>');

document.write('<small>' + txt + '</small></a>');

document.write('</center>');

// End -->

</script>

Para que seu código funcione adequadamente, basta que você substitua os campos em vermelho pelos dados referentes aos banners. Vale lembrar que em:

url= refere-se a onde o leitor será levado clicando no banner;

alt= é o texto alternativo que aparece quando se passa o mouse sobre uma imagem do banner;

Para adicionar mais banners:

Cole este código após a chave”}” ao término do banner final

if (ad==2) {

txt="";

url=" http://www.sitedobanner.com ";

alt=" texto alternativo ";

banner=" url completa do banner ";

width=" largura do banner em px ";

height=" altura do banner em px ";

}

Outra alteração que deve ser feita ao adicionar banners é o seguinte. No início do código repare que há esta linha:

var how_many_ads = 2;

O “2” em vermelho indica a quantidade de banners existentes no código, portanto se adicionar o retirar algum banner, lembre de alterar estenúmero.

E o código de cada banner se inicia com

if (ad==2) {

Onde “2” é o número individual do banner, ou seja, teremos números diferentes para cada banner, o primeiro é(add==1)o segundo (ad==2) o terceiro (ad==3) e assim sucessivamente.

Uma última dica que deixo aqui é para que você tome o cuidado de colocar banners do mesmo tamanho, pois banners de tamanhos diferentes vão deixar uma imagem ridícula inadequada em seu site. 

Leia Mais ►

Plugins SEO para WordPress.org

Você está montando seu site em em uma plataforma wordpress.org, o que já considero um bom começo, afinal é uma plataforma com realmente muitos recursos e simples de ser usada. Está colocando bastante conteúdo de qualidade que seja relevante para seu nicho isso também já é uma ótima coisa.

Já está tudo indo bem, mas você quer melhorar seu posicionamento nos resultados dos buscadores. Para isso existem plugins específicos, que poderão te ajudar bastante na otimização, assim alavancando seu site para novos níveis de atuação na web.

Google XML SiteMaps

Este plugin irá criar um xml sitemap especial para ajudar os motores de busca (Google, Yahoo, Bing, Ask) a indexarem seu site e páginas internas. O plugin suporta todos os tipos de wordpress e páginas geradas e url’s personalizadas.

Permalink Redirect

Este plugin garante que você não terá “? Ek=q”, ou outras variáveis estranhas em suas URLs. Isso também oajudará bastante.

All in one SEO Pack

Este já é um plugin mais completo, trás várias alternativas de otimização SEO, eu realmente o recomendo.

Optimal Title

Faz com que as informações da página apareçam antes que seu nome no título do blog, o que ajuda bastante na hora de aparecer nos resultados com conteúdo relevante para a busca que foi feita.

SEO Title Tag

Tags dos títulos são indiscutivelmente muito importantes na otimização SEO, e poder incluir sinônimos para ganhar uma maior visibilidade com seu título é muito bom.

Leia Mais ►

Resumo automático com imagem para Blogger

Você já deve ter reparado que em muitos blogs e sites na página inicial são exibidos apenas resumos dos artigos e não os artigos completos, o que torna sua página inicial muito mais interessante, mais compacta e com mais informações.

Este código serve para fazer isso no blogger, mas devo alertar que caso você tenha um domínio próprio não funcionará. O JavaScript no Blogger funciona quando está em domínio .blogspot, para usar em domínio próprio será necessário o JavaScript completo instalado em seu servidor.

Bom, vamos aos passos para modificar seu Blogger. Inicialmente vamos implementar o Java no código do seu Blog:

Vá em Design >> Editar HTML

Antes da Tag </head> coloque o código abaixo:

<!-- JavaScript Resumo do Artigo -->

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 450;

summary_img = 400;

img_thumb_height = 100;

img_thumb_width = 100;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }

strx =  s.join(""); }

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...'; }

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

if(thumbnail_mode == "float") {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

} else {

imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';

summ = summary_img;

}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;}

//]]>

</script>

<!-- JavaScript Resumo do Artigo - Fim-->

Editando o código:

summary_noimg  — Aqui você vai definir a quantidade de caracteres para quando o resumo não tiver imagem.

summary_img — Aqui você vai definer a quantidade de caracteres para quando seu resumo tiver uma imagem.

img_thumb_height — Altura da imagem em pixels

img_thumb_width — Largura da imagem em pixels

Agora vamos implementar o código no HTML

Em Design >> Editar HTML

Mande expandir windgats e procure pelo seguinte código:

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Subistitua ele por esse código:

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Você pode também aplicar estilo CSS ao “Leia mais…”

Desta forma vai personalizar ainda mais seu blog, para isso basta novamente em Design >> Editar HTML

Procurar por ]]></b:skin>

E antes coloque o código abaixo

font-size: 12px; /* escolha o tamanho da fonte para o link */

float: right; /* escolha se quer link flutuando à esquerda ou direita */

margin-right: 30px; /* aplique margens para posicionar link */

margin-top: -2px; /*a margem negativa para o topo aproxima o link do texto do post */

font-weight: bold;

}

#showlink a {

color: #ffffff;  /* escolha a cor de seu link */

}

#showlink a:visited {

color: #cccccc;  /* escolha a cor de seu link quando visitado */

}

#showlink a:hover {

color: #000000;  /* escolha a cor de seu link quando passa o mouse em cima */

}

Leia Mais ►

Tudo sobre Notebook!

Tudo Sobre Notebooks é um dos sites pertencentes ao portal Tudo Sobre, nos mostra realmente TUDO sobre notebooks, facilita e muito a vida de quem pretende comprar seu notebook mas está meio perdido entre tantas alternativas. 

Entre muitas facilidades que este site proporciona para seus compradores vou destacar algumas que são realmente muito criativas e funcionais, vamos ver quais são: 

Busca Inteligente! 

O campo de busca interna é personalizável, ou seja, lá não tem essa de digitar alguma coisa qualquer e ficar revirando linhas e mais linhas de resultados. Além da busca tradicional por palavra-chave, eles também oferecem outros campos personalizáveis, que são: 

Busca por tamanho: Neste campo temos alternativas em polegadas, assim você vai direto para o notebook do tamanho que você deseja! 

Busca por Valor: Você pode referenciar a faixa de valor que pretende investir em seu notebook, o que facilita bastante para encontrar aquele notebook que você quer e pode comprar! 

Busca por memória: Você também pode escolher a capacidade de memória RAM que terão os notebooks do resultado de sua busca! 

Ou seja, ao fazer uma busca no Tudo Sobre Notebook o resultado é o Notebook do tamanho que você quer, que cabe no seu orçamento e com a memória que você precisa! Melhor que isso, só dois disso! 

Marcas

Lá também temos um menu onde você pode escolher seu notebook pela marca de sua preferência! Não é obrigado a ficar garimpando aquela marca que você gosta entre tantas outras. Você vai direto no resultado certo! 

Este é mais um dos sites do portal Tudo Sobre! Que inclusive está realizando uma promoção, onde você pode concorrer a iPads e a um HP mini! Para maiores informações acesse o portal Tudo Sobre! 

"Estou participando do Concurso Cultural Post Criativo do Portal Tudo Sobre para concorrer a 02 iPads e 01 HP Mini. Saiba mais! http://www.portaltudosobre.com.br".

Leia Mais ►

Nuvenus Chovendus vai dar um Ipad!

O mundo de otimização de sites está sendo revolucionado nos últimos dias com uma promoção lançada no site Mestre SEO. Onde entre outros prêmios será dado um Ipad 16 GB Wifi! 

Para ganhar o Ipad o site terá que estar na primeira posição do Google no dia 14-01-2011 para o termo “Nuvenus Chovendus”. 

Ta bom, sei da notoriedade do Mestre SEO e sei o que é um Ipad, mas o que é Nuvenus Chovendus? 

Nuvenus Chovendus é o nome do novo aplicativo desenvolvido para Ipad, que ao posicionar seu Ipad para as nuvens, ele terá como prever se irá ou não chover onde você está! 

Essa análise é feita com base em diversos fatores da nuvem, como sua cor, movimentos, é não tem muito o que falar, é a tecnologia cada dia mais literalmente na palma de nossas mãos! 

Esta é uma das novidades dos novos Ipads que chegaram a pouco no Brasil: 

- Ipad 64GB Wi-fi , Ipad 64GB Wi-fi e 3G; 

- Ipad 32GB Wi-fi , Ipad 32GB Wi-fi e 3G; 

- Ipad 16GB Wi-fi , Ipad 16GB Wi-fi e 3G; 

Certamente neste final de ano estes serão os aparelhos mais procurados, e quer coisa melhor do que ganhar um na promoção do Mestre SEO? Ora, melhor que isso só dois disso! 

Como posso participar da Promoção?

Você pode ler as informações de como participar desta promoção na página oficial da promoção no http://www.mestreseo.com.br/promocao/desafio-mestreseo-2010 ou também em um artigo de Rogério Gomes da wrg.com.br no o SabeTudo.com e participar também da promoção Nuvenus Chovendus!

Leia Mais ►