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 artigos 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 Design >> Elementos da 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> <br /> <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> <br /> <br /> <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> <br /> <br /> <div id="spylist"><script src='http://dl.getdropbox.com/u/1367826/recentpostthumbspy-min.js ' type='text/javascript'></script> <br /> </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 escuros, 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, se isto não for feito, o Widget não vai funcionar.

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 Widget de sua barra lateral. Para saber a largura disponível para Widget 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 Widget. 


Cor de Fundo: Em #spylist li procure por background e para mudar a cor retire o que está entre parênteses 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 parênteses. 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 escolher 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.

Duvidas? escreva um comentário, e a equipe do construtor de blogs vai lhe responder o mais rapido possível.

Até o Próximo Post.