domingo, 23 de janeiro de 2011

Slide Com Postagem Recente no Blogger


Olá Amigos, meu nome è Rodrigo Fernandes Autor do Blog  FazerBlogger.Com estou aqui a convite do meu amigo Gedi, Autor e Administrador desse Blog.

Ensinarei hoje a fazer um slide com as postagem recentes, além de dá um visual elegante ao blog, contribui para que os visitantes fique por mais tempo em seu blog

Blogger.com > EditarHTML>Adicionar Um GatGet > HTML/ JavaScript

Cole o código abaixo com as devidas alterações:



<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 = 6000;
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:172px;
width:600px;
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:6px;
padding:10px;
border:solid 2px #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN AQUI";
showRandomImg = true;
tablewidth = 600;
cellspacing = 0;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 130;
imgheight = 130;
fntsize = 16;
acolor = "#ff0000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 450;
summaryFontsize = 12;
summaryColor = "#0055e5";
icon2 = " ";
numposts = 6;
label = "";
home_page = http://www.SEUBLOG.com/;
</script>
<script src="http://log7.net/arquivos/slide.js" type="text/javascript"></script>

*O trecho em Vermelho é obrigatório editar.

-* http://www.SEUBLOG.com  Coloque o nome do seu Blog
-* URL IMAGEN AQUI Coloque o endereço de uma imagem que você queira que apareça nos post que não tenha imagem

Outros trechos que também pode ser editado.

Veja as traduções:
Imgheight: altura da miniatura
Imgwidth: largura da miniatura
Acolor: cor do titulo
numposts: numero de postagens mostradas
Fntsize: tamanho da letra do titulo
summaryFontsize: tamanho da letra do resumo
summaryPost: numero de letras do resumo(começo da postagem)
summaryColor: cor da letra do resumo

Vlw Gedi pela Oportunidade, sinta a vontade para fazer posts no FazerBlogger.Com


Marcadores: , , ,