24/05/2011

Criando slide com postagem recente no blog


Há sempre uma grande necessidade de "linkarmos" o nosso próprio conteúdo, e um método muito bom para isso é através dos widgets, neste irá aparecer um slide com uma imagem e descrição (Opcionais) das últimas postagens de seu blog.

O melhor de tudo deste widget é a simplicidade da instalação.



Entre em seu blog, entre em DESIGN na pagina layout, adicionar gadget, html/javascript e cole o código abaixo:

<script src="https://sites.google.com/site/irecenoticias/irece-news/jquery.min.js?attredirects=0&d=1" 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";
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.seublog.blogspot.com/";
</script>
<script src="https://sites.google.com/site/irecenoticias/irece-news/slide.js?attredirects=0&d=1" type="text/javascript"></script>
Lembre-se de modificar o endereço de seu blog, é a única alteração obrigatória do código e não esqueça de manter a barra invertida no final ("/"), sem ela o widget não funcionará.

E além do endereço do blogger, porém não obrigatório é que voce deve colocar uma imagem qualquer para aparecer no slide caso sua postagem não possua nenhuma imagem: imgr[0] = "URL IMAGEN 1"; Substitua o endereço da imagem.



Para modificar o widget ao seu modo basta seguir os passos abaixo:



1º Largura e cor:



tablewidth = 360;  

width:360px;    /* Modifique estes dois valores para alterar a largura do gadget, os dois devem possuir os mesmos valores */

bgTD = "#ffffff";   /* Modifique a cor de fundo do widget alterando o codigo html da cor, clicando aqui: Código das cores html */



2º Controle de velocidade das transições:



var first = 0;   /* var first: tempo para iniciar (deixe o valor 0) */

var speed = 800;    /* var speed: velocidade da transição (mudança de slide) */

var pause = 6500;   /* var pause: tempo de pausa em cada slide  */



3º Tamanho de imagens, fonte, cores, etc:

 



imgwidth = 120;     /* Largura da imagem do slide */

imgheight = 120;     /* Altura da imagem do slide */

fntsize = 16;     /* Tamanho da fonte do título do slide */

acolor = "#000";     /* Cor do título do slide */

aBold = true;     /* Negrito para o titulo do slide: true = negrito | false = não estar em negrito */

icon = " ";     /*

text = "no";     /*

showPostDate = false;     /* Referente a mostrar a data da postagem ou não. true=mostra | false=não mostra */

summaryPost = 40;     /* Número de letras do resumo */

summaryFontsize = 12;     /* Tamanho da fonte do resumo do slide */

summaryColor = "#ccc";     /* Cor da fonte do resumo do slide */

icon2 = " ";     /*

numposts = 10;     /* Número de postagens que devem ser mostradas */



Escolha as melhores modificações que devem combinar com seu layout, vá testando e escolha o melhor.

0 comentários:

Postar um comentário