Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Como colocar tag title no widget Posts Recentes em Java?

Vanessa-YesWeHeartIt

Perguntado por Vanessa-YesWeHeartIt,

 Share

Pergunta

Vanessa-YesWeHeartIt

Vanessa-YesWeHeartIt

Postado
Postado

Gente, eu coloquei este widget de posts recentes no meu blog, onde o títulos aparecem abaixo das thumbs. Só que eu queria tirar os títulos e deixar só as imagens e fazer com que o título da postagem apareça quando o mouse é passado na imagem... como um title! Eu vi um exemplo neste blog: http://www.leblogdebetty.com/

Meu blog é este: http://www.yesweheartit.com/

O código que estou usando eu peguei no Bloggersphera.com.br

<div id='recent-posts' style='background-color: #ffffff; width: 318px; border: 1px solid #cfcfcf; margin-bottom: 13px; padding-bottom: 8px;'>
<h2><div style='text-align: center;'>
<img border='0' src='http://lh3.ggpht.com/_vf6epi5NSks/TBxhaVk9UzI/AAAAAAAALHU/CpBjX6T8784/ico.png'/> <span style='font-size: 20px;'><span style='font-family: Georgia,"Times New Roman",serif;'><i>Posts Recentes</i></span></span> <img border='0' src='http://lh3.ggpht.com/_vf6epi5NSks/TBxhaVk9UzI/AAAAAAAALHU/CpBjX6T8784/ico.png'/></div>
</h2>
&lt;script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/_vf6epi5NSks/TB7tkAVCciI/AAAAAAAALLo/89V0d-zui2k/s1600/avatar.jpg";
showRandomImg = true;
imgwidth = 86;
imgheight = 85;
summaryPost = 0;
startpost = 6;
numposts = 6;
home_page = "<data:blog.homepageUrl/>";
</script>
&lt;script type='text/javascript'>
//<![CDATA[
// <!-- Based on a Script by Anhvo  http://www.vietwebguide.com/ -->
// <!--  Modified by BloggerSPhera - www.bloggersphera.com/ -->
// <!-- Recent Posts with Thumbnail for Blogger Blogs -->
// <!--  bloggersphera-version 7 - script showing posts in a unordered list -->
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) {
document.write('<ul id="rec_posts">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;        
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;
}
}    
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";        
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;
var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> '+removeHtmlTag(postcontent,summaryPost)+'...</span></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>'; }
document.write(item);
j++;
}
document.write('</ul>');
}
document.write("&lt;script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
O CSS: 
#recent-posts h2 {
padding:0px;
padding-bottom: 10px;
background-color: #FFFFFF;
margin-top: 5px;
font-weight: normal;
}
#rec_posts {
width:100%; 
margin-left: 9px;
list-style:none;
}
.rec_thumbs {
float: left;
background: #ffffff;
margin-right: 6px;
margin-bottom: 6px;
border: 1px solid #000000;
padding-top: 3px;
padding-right: 3px;
padding-left: 3px;
}
.rec_thumbs span {
width: 85px;
height: 22px;
text-align: center;
display: block;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 1.0;
}
.rec_thumbs srong,.rec_thumbs span a:link,.rec_thumbs span a:hover {
text-decoration:none;
color: #828282!important;
}
.rec_thumbs img {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
border: 1px solid #000000!important;
}
.rec_thumbs img:hover {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.80; 
-ms-filter:"alpha(opacity=80)"; 
-moz-opacity:.80; 
filter:alpha(opacity=80); 
opacity:.80;
}

Alguém me ajude por favor???

Link para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
kuroi

kuroi

Postado
Postado

tenta trocar:

var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> '+removeHtmlTag(postcontent,summaryPost)+'...</span></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>'; }[/code]


por:

[code]var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>'; }

Link para o comentário
Compartilhar em outros sites
  • 0
Vanessa-YesWeHeartIt

Vanessa-YesWeHeartIt

Postado
  • Autor
Postado

Mais um probleminha gente! Sem querer abusar... hehe

No Posts recentes que eu citei acima, as thumbs estão ficando distorcidas quando a imagem tem larguraXaltura diferentes... Eu queria que a imagem fosse cortada para caber na thumb. Tipo definir a largura e deixar altura automática para que não fique distorcido...

O site agora é este: http://allthatglitterssssssss.blogspot.com/ (ainda está em testes)

Reparem que a segunda thumb está distorcida pois na imagem original a altura é maior que a largura! Como soluciono isso??

O código:

<div id='recent-posts' style='background-color: #ffffff; width: 318px; border: 1px solid #cfcfcf; margin-bottom: 13px; padding-bottom: 8px;'>
<h2><div style='text-align: center;'>
<img border='0' src='http://lh3.ggpht.com/_vf6epi5NSks/TBxhaVk9UzI/AAAAAAAALHU/CpBjX6T8784/ico.png'/> <span style='font-size: 20px;'><span style='font-family: Georgia,&quot;Times New Roman&quot;,serif;'><i>Posts Recentes</i></span></span> <img border='0' src='http://lh3.ggpht.com/_vf6epi5NSks/TBxhaVk9UzI/AAAAAAAALHU/CpBjX6T8784/ico.png'/></div>
</h2>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://3.bp.blogspot.com/_vf6epi5NSks/TB7tkAVCciI/AAAAAAAALLo/89V0d-zui2k/s1600/avatar.jpg&quot;;
showRandomImg = true;
imgwidth = 92;
imgheight = 92;
summaryPost = 0;
startpost = 1;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Based on a Script by Anhvo  http://www.vietwebguide.com/ -->
// <!--  Modified by BloggerSPhera - www.bloggersphera.com/ -->
// <!-- Recent Posts with Thumbnail for Blogger Blogs -->
// <!--  bloggersphera-version 7 - script showing posts in a unordered list -->
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) {
document.write('<ul id="rec_posts">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;        
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;
}
}    
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";        
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;
var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>'; }
document.write(item);
j++;
}
document.write('</ul>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
O CSS 
#recent-posts h2 {
padding:0px;
margin-top: 5px;
font-weight: normal;
}
#rec_posts {
width:100%; 
margin-left: -29px;
list-style:none;
}
.rec_thumbs {
float: left;
background: #ffffff;
margin-right: 7px;
margin-bottom: 4px;
}
.rec_thumbs span {
text-align: center;
display: none;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 1.0;
}
.rec_thumbs srong,.rec_thumbs span a:link,.rec_thumbs span a:hover {
text-decoration:none;
color: #828282!important;
}
.rec_thumbs img {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
border: 1px solid #CFCFCF!important;
}
.rec_thumbs img:hover {
filter: alpha(opacity:0.8); 
KHTMLOpacity: 0.8; 
MozOpacity: 0.8; 
-khtml-opacity:.80; 
-ms-filter:"alpha(opacity=80)"; 
-moz-opacity:.80; 
filter:alpha(opacity=80); 
opacity:.80;
}

Link para o comentário
Compartilhar em outros sites
  • 0
kuroi

kuroi

Postado
Postado (editado)

aiaiai agora você complicou em

tenta o seguinte. no javascript, antes da function showrecentposts(), adicione isso:

function redimensiona(img_id, h, w)
{
    var imagem = document.getElementById(img_id);
    
    if (imagem.complete)
    {
        var hh, ww;

        if (imagem.width > imagem.height)
        {
            ww = ((h / imagem.height) * imagem.width);
            hh = h;
        }
        else if (imagem.width < imagem.height)
        {
            ww = w;
            hh = ((w / imagem.width) * imagem.height);
        }
        else
        {
            ww = w;
            hh = h;
        }

        imagem.width = ww;
        imagem.height = hh;

        imagem.style.top = (hh > h ? "-" + parseInt((hh - h) / 2) : "0") + "px";
        imagem.style.left = (ww > w ? "-" + parseInt((ww - w) / 2) : "0") + "px"; 
    }
    else
    {
        setTimeout("redimensiona('" + img_id + "', " + h + ", " + w + ")", 100);
    }
}[/code]



ai no css, adicione isso dentro de .rec_thumbs:

[code]overflow: hidden;
position: relative;
e isso dentro de .rec_thumbs img: 
position: absolute;
e no javascript, troque isso: 
var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>'; }
document.write(item);[/code]

por:

[code]var img_id = 'thumbx' + i;
var item = '<li style="width: ' + imgwidth + 'px; height: ' + imgheight + 'px;" class="rec_thumbs"><a href="'+posturl+'"><img id="' + img_id + '" src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>';
if(summaryPost == 0) { item = '<li style="width: ' + imgwidth + 'px; height: ' + imgheight + 'px;" class="rec_thumbs"><a href="'+posturl+'"><img id="' + img_id + '" src="'+img[i]+'" title="'+posttitle+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></li>'; }
document.write(item);
redimensiona(img_id, imgheight, imgwidth);

ai veja se funciona e se você gosta do resultado, qualquer coisa poste.

Editado por kuroi
Link para o comentário
Compartilhar em outros sites
  • 0
Vanessa-YesWeHeartIt

Vanessa-YesWeHeartIt

Postado
  • Autor
Postado

Não funcionou! :(

O widget desaparece depois que eu aplico essas modificações...

Tentei várias vezes e de várias formas e me parece (não entendo quase nada) que o problema é causado por esta parte do código:

redimensiona(img_id, imgheight, imgwidth);

Quando eu tiro esta linha o widget aparece de novo mas a imagem ainda está distorcida!

Link para o comentário
Compartilhar em outros sites
  • 0
kuroi

kuroi

Postado
Postado

então vanessa, olha la em cima q eu atualizei o meu post as 03:10. você deve ter pego o codigo q eu tinha postado antes de atualizar, onde tava faltando algumas linhas, mas depois eu corrigi.

na funcao redimensiona, tinha faltado aquele else pra caso height e width sejam iguais.

e no javascript do final, tinha faltado setar o tamanho da li e essa era a parte mais importante, por isso o widget sumiu.

copie os codigos do post de cima tudo de novo, e veja se não funciona agora.

Link para o comentário
Compartilhar em outros sites
  • 0
kuroi

kuroi

Postado
Postado

é mesmo, os li tem q ir com o tamanho definido, mas as img não.

o codigo do javascript q passei no post anterior teria q ser esse:

var img_id = 'thumbx' + i;
var item = '<li style="width: ' + imgwidth + 'px; height: ' + imgheight + 'px;" class="rec_thumbs"><a href="'+posturl+'"><img id="' + img_id + '" src="'+img[i]+'" title="'+posttitle+'" /></a></li>';
if(summaryPost == 0) { item = '<li style="width: ' + imgwidth + 'px; height: ' + imgheight + 'px;" class="rec_thumbs"><a href="'+posturl+'"><img id="' + img_id + '" src="'+img[i]+'" title="'+posttitle+'" /></a></li>'; }
document.write(item);
redimensiona(img_id, imgheight, imgwidth);[/code]


fora isso, faca as alteracoes no css q falei, e tb declare aquela funcao redimensiona() q passei e ai pode testar agora q é certeza q vai funcionar, vanessa.


a e fora isso, percebi q as imagens vao perder a borda se ficarem maiores q a li.
pra corrigir isso, no css, retire a linha:

[code]border: 1px solid #CFCFCF!important;

q esta dentro de .rec_thumbs img e transfira ela para dentro de .rec_thumbs

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,5k
    • Posts
      652,4k
×
×
  • Criar Novo...