11 de mar. de 2011

Slide com atualizações automáticas 2


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Copie o código e cole no HTML/Javascript, cole o endereço de seu blog no local indicado e salve.




ATENÇÃO: COLOQUE O ENDEREÇO DE SEU BLOG NO LOCAL INDICADO


<div class="widget-content">

<style>
#slideshow {
width: 900px; /*aqui o comprimento do slide*/
margin: 5px 5px 5px 0;
padding:0;
background:#292929;/*cor de fundo slide*/
height:310px;/*altura do slide*/
overflow:hidden;
border: 1px solid #000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow: 0px 0px 1em #3A3B4C;
-webkit-box-shadow: 0px 0px 1em #3A3B4C;
-moz-box-shadow: 0px 0px 1em #3A3B4C;
padding: 1px 2px 1px 2px;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
#slideshow .slides {/*maior*/
width:600px;/*slide do lado esquerdo*/
overflow: hidden;
float:left;
color: #fff;
}
#slideshow .slides ul {/*maior*/
float:left;
overflow: hidden;
width:600px;
height:310px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:600px;
height:200px;
display:block;
overflow: hidden;
position:relative;
z-index:1;
}
.js #slideshow .slides li {/*maior*/
margin: 0;
padding: 0;
list-style-type: none;
width:700px;/*area maior*/
height:310px;
display:block;
overflow: hidden;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {/*area maior*/
width:600px;
color: #fff;
height: 100px;/*area inscrição tarja grande*/
padding: 40px 35px 10px 10px;
font-size: 14px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 ,
#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active  {
font-size: 12px;
line-height: 1.1em;
margin:0;
color: #808080;
margin: 0;
letter-spacing:0;
border:none !important;
}
#slideshow  ul.slides-nav {/*Menor*/
height:310px;
width:300px;/*area menor*/
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}
#slideshow .slides-nav li a {/*area slide menor*/
width:300px;/*area tarja menor*/
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:7px;
text-align: left;
list-style-type:none;
display:block;
height:46px;
color: #ccc;
font-size:12px;/*tamanho letra menu menor*/
overflow:hidden;
background: transparent;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:310px;
left:0;
opacity:1;
position:absolute;
top:0;
width:500px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {/*area tarja menor*/
background: #fff;
color: #000;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 1px 10px 2px 18px;
padding:2px;
border: 1px solid #000;
width:75px;
height:60px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#cc0000 !important;margin: 2px 2px 2px 2px; padding: 1px;/*area imagens pequenas slecionadas*/
}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggluIxk3JdUuOlcXhAM0FuOgimY81HlqY6z1-_1kNram0l2A3zPkxHLCHJb38jl59ckNWrN44ZnKptBXkiwGwoqhMK8VmSyhU6v61khtF_MuZgRVMObS58Kku_ope3LDpPw2bNMndoDfd5/s320/templatesww.png";
showRandomImg = true;
aBold = true;
summaryPost = 300; //
summaryTitle = 250; //
numposts = 5; //
home_page = "AQUI O ENDEREÇO DE SEU BLOG/";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="slides-nav">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = ' <li id="post-'+i+'" class="clearfix"> <a href="#main-post-'+i+'" class=""><img height="150px" width="150px" class="post_thumbnail thumbnail thumbnail post_thumbnail" alt="" src="'+img[i]+'"/>'+posttitle+'</a> </li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul class="clearfix" style="position: relative;">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
posttitle = (aBold) ? ""+posttitle+"" : posttitle;
var trtd = '<li style="background: transparent url('+img[i]+')" id="main-post-'+i+'"><div class="entry"><h2 class="post-title"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';
document.write(trtd);
j++;
}
document.write('</ul>');
}
</script>
<script src="http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$slideshow = {
context: false,
tabs: false,
timeout: 7000,
slideSpeed: 1000,
tabSpeed: 1000,
fx: 'toss',
init: function() {
this.context = $('#slideshow');
this.tabs = $('ul.slides-nav li', this.context);
this.prepareSlideshow();
},
prepareSlideshow: function() {
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('ul.slides-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$slideshow.init();
});
</script>


<div id="slideshow" class="clearfix">
<div class="slides">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class="slides-nav">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

</div>
</div>
</div>

<script src='http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.cycle.js' type='text/javascript'/></script>

15 comentários:

  1. Não funcionou para mim, snif...

    ResponderExcluir
  2. ola elki como axo vc na internet msn orkut gostaria de uma ajuda

    ResponderExcluir
  3. oii td bem??
    rolou uma duvida minha aqui, eu coloquei o slide no meu blog, atraves desse codigo que passou, deu certo aparentemente, só que no blog fika um quadrado azul e não fica rolando os slide...

    ai é q ta a minha duvida, ja era pra passar um slide das coisas q tem no meu blog, ou ele só vai começar a fazer slide das coisas que eu postar após ter colocado o slide...

    Vlw pelas dicas, seu blog é o melhor q achei até agora, parabens!!

    ResponderExcluir
  4. Consegui ja, fiquei fuçando , fuçando e o problema era tão besta kkk o problema era na hora de escrever o url do meu blog, tem q por exatamente como eh, com o http://www.meublog.blogspot.com/ ... http e a barra no final rs

    vlwwwwwww

    ResponderExcluir
  5. Gostaria de saber oq fazer caso ele não tenha funcionado, instalei o template que tem ele já, porém o slideshow não funciona, poderia me ajudar? Desde já Obrigado e parabéns pelo blog!

    ResponderExcluir
  6. Oi Elke!
    O novo layout do Templates está muito lindo, e a navegação ficou mega fácil!
    Tenho duas perguntas: Na sua sidebar, gosto muito da forma como vc reuniu marcadores, seguidores, postagens populares e outros colocando guias em cima.. É uma exclusividade do seu blog ou vc tambem disponibilizou aqui? Procurei mas não encontrei.. =)
    E há um tempo atrás, no antigo layout do blog Tudo Disney, reparei tambem que no fim da página tinha um video comum do youtube, e ao lado dele na vertical, vários outros, que clicando em cima eram exibidos no lugar do outro. Tipo um slide de videos, uma galeria talvez.. Tambem era exclusividade do blog, ou dá pra fazer aquilo?

    Beijos.

    ResponderExcluir
  7. Oi Jess, obrigada. Olha, essa dica está no blog no endereço abaixo.

    Existem muitas maneiras.

    http://templateseacessorios.blogspot.com/search/label/Menu%20em%20abas

    ResponderExcluir
  8. Pessoal, vejam se estão colocando o endereço correto do blog de vcs no local indicado. Tem que ser EXATAMENTE igual, ou não funcionará. Beijos

    ResponderExcluir
  9. Que pessoa rápida! rsrs.. Por isso sou fã da Elke! rsrs..
    Encontrei várias opções querida, obrigada!

    ResponderExcluir
  10. Oiieee aproveito para trazer elogio que deixaram pra você lá no blog de receitas, amaram o novo visual do blog, parabéns a você lindona e mais uma vez muito obrigada.♥
    beijos

    ResponderExcluir
  11. Obrigada Dete querida, foi um prazer reformular seu blog. ;-) Beijos

    ResponderExcluir
  12. quando coloco aparece apenas as imagens não aparece nada nem do lado direito nem embaixo da imagen (titulo da postagem)

    ResponderExcluir
  13. Cara!Funcionou PERFEITAMENTE! Agradecido.

    ResponderExcluir
  14. GOSTEI MUITO , A ÚNICA COISA RUIN É QUE ELE NÃO LINKA O ARTIGO CERTO? NÃO HÁ ESSA OPÇÃO???

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube