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.

Categories: Tutorial