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: , , ,

10 Comentários:

Às 13 de dezembro de 2010 11:08 , Blogger Gustavo Silva disse...

Esqueceram de colocar que fui eu que pedi tbem :(

Muito bom, parabéns. Usei aquele código do slide do baixaki também, ficou excelente. só precisei fazer alguns ajustes de tamanho (deu trabalho).

 
Às 13 de dezembro de 2010 16:29 , Blogger Códigos Blogger disse...

@Gustavo Silva
aiojsdioajsiodjioasjd
depois o autor desta postagem ve isso. =D

 
Às 11 de janeiro de 2011 19:49 , Blogger JamesFoxBR disse...

aonde entre as partes do codigo eu colo esse?

 
Às 12 de janeiro de 2011 11:26 , Blogger Códigos Blogger disse...

É só ir em Editar HTML > Adicionar Um GatGet > HTML/JavaScript e colar o código.

 
Às 23 de março de 2011 09:33 , Blogger Ana (Ballet de Palavras) disse...

Boa tarde,
Obrigada pela informação. Mas como faço para o slide ficar na horizontal? Pode explicar-me?

Ana

 
Às 27 de março de 2011 00:43 , Blogger Códigos Blogger disse...

Acho que isso não é possível, mas se eu estiver enganado prometo te informar.

 
Às 24 de abril de 2011 01:55 , Blogger Alessandro disse...

kkkkkk eu ja vi essa dica no www.dicasparablogs.com.br

 
Às 25 de abril de 2011 11:07 , Blogger Dav7 disse...

eu gostava mesmo era de ver um exemplo desse widget a funcionar :(

 
Às 29 de julho de 2011 18:25 , Blogger ministrando.comDeus disse...

no meu blog nao funciona .. nao aparece nada

 
Às 26 de agosto de 2011 13:48 , Blogger Larissa Borges disse...

eu quero que o slide fique com um monte de imagem e um link me ensina ? por favor ?

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial