31 de jul de 2010

Slide com as postagens automaticamente no Blogger



Pizco ensinou e eu trouxe de la esta dica. Um slide que instalado de forma muito fácil já envia automaticamente as postagens.


Basta copiar o código, colar no HTML/Javascript, colocar o endereço de seu blog e no local indicado e pronto





<div class="widget-content">
<style>
#slideshow {
width: 960px; /*aqui o comprimento do slide*/
margin: 5px;
padding:0;
background:#fff;
height:270px;
overflow:hidden;
border:1px dashed #3A3B4C;
box-shadow: 0px 0px 1em #3A3B4C;
-webkit-box-shadow: 0px 0px 1em #3A3B4C;
-moz-box-shadow: 0px 0px 1em #3A3B4C;
margin: 6px 8px 6px 8px;
padding: 1px 2px 1px 2px;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
#slideshow .slides {
width:565px;
overflow: hidden;
float:left;
color: #000;
text-shadow: #fff 1px 1px 1px, #000 -1px -1px 1px;
}
#slideshow .slides ul {
float:left;
overflow: hidden;
width:565px;
height:270px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:565px;
height:270px;
display:block;
overflow: hidden;
background:#fff;
position:relative;
z-index:1;
}
.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:565px;
height:270px;
display:block;
overflow: hidden;
background:#fff;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {
width:565px;
height: 50px;/*area inscrição*/
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#585976;
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: 20px;
line-height: 1.1em;
margin:0;
color: #000;
text-shadow: #000 1px 1px 1px, #ccc -1px -1px 1px; !important;
margin: 0;
letter-spacing:0;
border:none !important;
}
#slideshow  ul.slides-nav {
height:270px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
border-bottom: 1px dashed #3A3B4C;
border-left: 1px dashed #3A3B4C;
}
#slideshow .slides-nav li a {/*area slide menor*/
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:7px;
list-style-type:none;
display:block;
height:12px;
color: #000;
text-shadow: #fff 1px 1px 1px, #ccc -1px -1px 1px;
font-size:10pt;
overflow:hidden;
background: #fff;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:270px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {
background: #585976;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
text-shadow: #000 1px 1px 1px, #ccc -1px -1px 1px;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#000;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: -2px 10px 0 0;
padding:2px;
border: 1px solid #aaa;
width:70px;
height:18px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/_BaCxSD9NFn8/TFImJ3xTRpI/AAAAAAAABpQ/CM1uyut9_R0/s320/templatesww.png";
showRandomImg = true;
aBold = true;
summaryPost = 300; //
summaryTitle = 250; //
numposts = 10; //
home_page = "AQUI O ENDEREÇO DO 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>

17 comentários:

  1. Em que lugar do HTML que coloca esse código!?

    ResponderExcluir
  2. também queria saber que mané endereço de javascript é esse não to conseguind

    ResponderExcluir
  3. consegui, entendi rsrs obrigada assim mesmo

    ResponderExcluir
  4. Também queria saber que mané endereço de javascript é esse não to conseguindo [2]?

    ResponderExcluir
  5. pros que queiram hospedar o script entra nesse site : http://www.yourjavascript.com/ dai clicar no link do 'javascript' ali em cima e faz o upload dele no site. Coloca o e-mail e ele vai estar no 'lixo' ( no caso do hotmail) dai la vai estar o link do java

    ResponderExcluir
  6. Muito bom gostei demais, só que quando diminuo o tamanho dele em menos 30 o slide menor some. Pode me dar uma ajuda?
    Agradeço

    ResponderExcluir
  7. Se eu quizer retirar a discriça como eu faço?só deixar o titulo e o outro titulo!

    ResponderExcluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Oi moça tudo bem? estou a bastante tempo procurando um código html para slide de post com imagens por categoria, e até agora nada. se puder me ajudar agradeceria muito. Até breve.meu site é esse: http://www.acaradevitoria.com.br/

    ResponderExcluir
  10. Boas templateseacessorios Admin
    Existe ou será possível criar um slider automático(de imagem ou de texto) com todos os posts do blog a passar 1 de cada vez?
    Colocar slider automático de posts recentes não me interessa.
    Se poder ajudar fica aqui meu contacto e blog.
    Email: Blatfenix@gmail.com
    Blog: http://odbp2p.blogspot.pt

    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