Widget de artigos recentes com rolagem automática

Um widget interessante definitivamente pode ser fundamental para fazer com que seus visitantes se interessem por mais artigos do que vieram procurar em seu blog. Hoje vamos ensinar como inserir o widget de artigos recentes com rolagem automática, uma ferramenta para Blogger que pode ser inserida na sidebar e que, com certeza fará que os leitores visitem um maior número de artgos em cada visita.

O cuidado com o local de implementação sempre deve ser tomado para qualquer recurso que formos inserir no blog então recomendo atenção para que este widget fique num local pouco invasivo e, ao mesmo tempo, atrativo. Tudo bem, tendo em mente estes quesitos, vamos ao tutorial:

PRIMEIRO PASSO: Login

Acesse o painel do seu blog e vá em Layout >> Elementos de Página.


SEGUNDO PASSO: Inserindo o código

Preferencialmente na barra lateral, selecione "Adicionar gadget" e escolha "Html/Javascript". Aqui iremos adicionar o código abaixo, editando conforme preferência pessoal:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:250px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:250px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#FFF url("http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg") repeat-x;
border:1px solid #FFF;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 20;

home_page = "http://ENDEREÇO-DO-SEU-BLOG/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/1367826/recentpostthumbspy-min.js
' type='text/javascript'></script>
</div>

TERCEIRO PASSO: Edições e personalizações

Aqui está uma parte importante deste widget. O padrão adotado serve perfeitamente para blogs com fundo claro mas para blogs com fundo escuro, como o Tutorial para Tudo por exemplo, precisará fazer algumas mudanças para melhor adaptação. Vamos às possíveis mudanças:

URL: Primeiramente vamos inserir a url do blog para que o widget procure pelos posts adequados em sua página. Troque onde está escrito ENDEREÇO-DO-SEU-BLOG pelo endereço de seu blog.

Altura do widget: Para modificar a altura do widget vá em #spylist e procure por height:, troque o número 350 pela altura desejada aumentando ou diminuindo (não recomendado).

Largura do widget: Vá em #spylist ul e #spylist li e procure em ambos por width:, mude o valor 250 para a largura que melhor se adequa ao tamanho dos widgets de sua barra lateral. Para saber a largura disponível para widgets na barra lateral vá no Html do seu blog e procure por widget-content, aí estará a indicação da largura disponível para os widgets.


Cor de Fundo: Em #spylist li procure por background e para mudar a cor retire o que está entre parenteses após URL, ficará assim URL( ). Ainda em background edite a cor do fundo substituindo a cor branca ( #FFF) pela cor de sua preferência sempre retirando o que está entre parenteses. Aqui temos um artigo com uma tabela de cores Html onde poderão consultar o código da cor desejada.

Borda: Também em #spylist li procure por Border e mude onde está 1px para a largura desejada aumentando o número, 2px por exemplo. Ainda em Border mude a cor #FFF pela cor desejada usando o código Html referente.

Número de artigos: Esta mudança é a mais utilizada, trata-se de scolher o número de artigos recentes a serem exibidos. Para modificar procure, mais ao final do código, por numposts: e mude a quantidade (20) para a quantidade que quiser exibir. recomendo colocar mais artigos do que sua página inicial já exibe mas sem exagerar para não prejudicar o desempenho.

Estas são as principais mudanças; outras podem ser feitas, se quiser fazer outra mudança deixe seu comentário e mostraremos como.


QUARTO PASSO: Salvando e finalizando

Tendo feito as mudanças salve o seu widget e confira como ficou. O título do widget fica à sua escolha. Nos vemos no próximo tutorial.

Posted in: Blogger, Widgets