LEIA OS EMAILS E NEWSLETTERS QUE ASSINO: Dicas para Blogs

terça-feira, 16 de março de 2010

Dicas para Blogs

Mostrar slides com as postagens recentes do blog

Posted: 14 Mar 2010 08:26 AM PDT

Veja como criar uma apresentação de slides com as suas postagens mais recentes no blog, assim você poderá gerar mais visitas dentro do seu próprio blog, melhorando até sua classificação no Google e outros sites de busca.

Slides das postagens recentes no blogspot

O modo de colocar esse widget é muito simples, entre na pagina layout, adicionar gadget, html/javascript e cole o código abaixo e já está pronto!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#slide li:first').html();
$('ul#slide li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#slide').append(last)
$('ul#slide li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#slide{
height:150px;
width:360px;
overflow:hidden;
border: 1px solid #ccc;
margin: auto;
padding:5px;
}
#slide li{
margin: 10px 0 0 0;
list-style:none;
}
#slide .news-title{
display:block;
text-align: center;
line-height: 10px;
}
#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
imgr[1] = "URL IMAGEN 2";
imgr[2] = "URL IMAGEN 3";
imgr[3] = "URL IMAGEN 4";
imgr[4] = "URL IMAGEN 5";
showRandomImg = true;
tablewidth = 360;
cellspacing = 1;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 120;
fntsize = 16;
acolor = "#ff0000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 12;
summaryColor = "#0000ff";
icon2 = " ";
numposts = 10;
label = "";
home_page = "http://www.dicasparablogs.com.br/";
</script>
<script src="http://acessoriosparablogs.com.br/scripts/slide.js" type="text/javascript"></script>

Apenas será necessário colocar o endereço do seu blog no local indicado no final do código (deixe a barra no final do endereço). Além disso, se quiser pode configurar os tamanhos de fontes e quantidades de caracteres que tem o resumo veja a seguir como personalizar o código da apresentação de slides dos posts recentes do blog, sugerimos primeiro instalar sem fazer nenhuma alteração apenas para testar, porque são muitas as opções que podemos alterar e fazendo isso aos poucos e visualizando o resultado no blog ficará mais fácil achar e corrigir algum erro durante as modificações.

Veja aqui o código das cores em html para alterar esse gadget. Outro trecho que está no inicio controla a velocidade, veja:
var first = 0;
var speed = 800;
var pause = 6500;

Como isso funciona:
var first: tempo para iniciar(deixe o valor 0)
var speed: velocidade da transição(mudança de slide)
var pause: tempo de pausa em cada slide

Veja este trecho fica no final de código e controla praticamente tudo:
imgwidth = 120;
imgheight = 120;
fntsize = 16;
acolor = "#000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 12;
summaryColor = "#ccc";
icon2 = " ";
numposts = 10;

Agora veja o que as principais linhas de código fazem e depois altere como desejar
Imgwidth: largura da miniatura
Imgheight: altura da miniatura
Fntsize: tamanho da letra do titulo
Acolor: cor do titulo
summaryPost: numero de letras do resumo(começo da postagem)
summaryFontsize: tamanho da letra do resumo
summaryColor: cor da letra do resumo
numposts: numero de postagens mostradas

Existem outras coisas que podem ser modificadas como, por exemplo, a cor da borda que é #ccc; e nas mesmas linhas podemos até mudar o estilo das bordas, mas enfim depois que instalar o código poderá ver quais modificações farão esse novo widget combinar melhor com o seu blog.