Lista de Blogues Só com Miniaturas e Efeito jQuery

Para terminar esta serie de artigos sobre a Lista de Blogues ainda falta mais um artigo da serie original e não podia dar por terminada esta republicação sem incluir esse artigo. 8)

Atenção: antes de tentar modificar o código do blogue, é recomendado que salve sempre o modelo actual!

No artigo a seguir, praticamente todo o texto mantém-se o mesmo, mas actualizei os códigos apresentados para dar um aspecto final mais vistoso à Lista de Blogues como podem verificar na demonstração no fim do artigo. :D

Publicada originalmente em 07 de Março, 2010

Para terminar este tema da Lista de Blogues e possíveis personalizações, não queria deixar de mostrar uma maneira que testei e acho bem fixe em blogues de imagens tal como o meu.

Claro que dependendo do gosto pessoal de cada um também pode ficar bem em outro tipo de blogues. ;)

Esta foi uma das tentativas que testei ao criar o novo look aqui do blogue e ficou de fora ao decidir como ia colocar as coisas.

No caso de gostar desta Lista de blogues, recomendo que a coloque no rodapé do blogue ou então abaixo do cabeçalho.

Atenção que embora utilize jQuery para dar o efeito do movimento, o truque está no estilo em CSS e no próprio código HTML da lista.

Para colocar esta Lista, primeiro vamos à aba Modelo e depois Editar HTML para abrir o Editor de HTML, onde está toda a codificação presente no blogue e identificar a linha de código referente ao Cabeçalho (Header) ou Rodapé (Footer), conforme o local onde pretendem colocar a Lista de Blogues e que pode parecer algo como:

<b:section class='footer' id='footer'> se desejar colocar a lista no rodapé ou por
<b:widget id='Header1' locked='true' title='NOME_DO_BLOG (Cabeçalho)' type='Header'/> se preferir colocar abaixo do cabeçalho.

Atenção: dependendo do tipo de template, estas linhas de código podem se apresentar um pouco diferentes...

Podem também clicar em qualquer parte DENTRO do Editor de HTML e utilizar Ctrl+F (No Firefox, pelo menos...) para abrir a caixa de pesquisa onde se digita o titulo ou ID do elemento pretendido.

A outra opção é utilizar a opção Avançar para o widget, que neste caso deve ser bem fácil para o Cabeçalho (Header) embora para o Rodapé (Footer) já seja necessário saber se o Rodapé já contém outro elemento e qual para que o possamos identificar utilizando este recurso...

Enfim, após localizarem a secção (<b:section) onde querem colocar a Lista de Blogues, logo abaixo de uma dessas linhas, colocamos o seguinte código:

Ver Código
<b:widget id='BlogList99' locked='false' title='A minha Lista de blogues' type='BlogList'>
<b:includable id='main'>
<div class='widget-content'>
<div id='linklist'>
<ul id='linkthumb'>
<b:loop values='data:items' var='item'>
<li>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
  <span><em><data:item.blogTitle/></em><em> <data:item.itemTitle/></em><em> <data:item.timePeriodSinceLastUpdate/></em></span></a>
<b:else/>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' height='72' width='72' src='http://lh5.ggpht.com/_Jm8aDaSCrFU/S2d6YQnQ1-I/AAAAAAAAAss/7HB9JZ2r46c/noimage.png'/>
  <span><em><data:item.blogTitle/></em><em> <data:item.itemTitle/></em><em> <data:item.timePeriodSinceLastUpdate/></em></span>
</a>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#linkthumb li:first').html();
$('ul#linkthumb 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#linkthumb').append(last)
$('ul#linkthumb li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
//]]>
</script>
<div style='clear: both;'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ocultar Código

Como podem verificar pelo código acima, alterei quase todo o código original de maneira que agora somente vai aparecer a imagem publicada no ultimo artigo de cada blogue presente na lista, e o resto das informações coloquei abaixo das imagens em miniatura numa span, também coloquei um b:else para no caso de não existir imagem, mostrar uma imagem pré-definida mas de maneira a linkar na mesma para o blogue em causa.

A parte destacada é a parte do código que vai fazer a lista mover-se, claro que necessita ter o jQuery no blogue para funcionar, veja em Lista de Blogues com jQuery como colocar.

http://lh5.ggpht.com/_Jm8aDaSCrFU/S2d6YQnQ1-I/AAAAAAAAAss/7HB9JZ2r46c/noimage.png é a imagem pré-definida para mostrar em caso de não existir nenhuma. É recomendado descarregar essa imagem para o vosso computador e alojá-la em um local de vossa confiança, substituindo a URL na linha 15 do código acima. Como é lógico, também no caso de desejarem colocar outra imagem pré-definida, aqui é onde fazem isso.

Salve o modelo e vá à aba Esquema, procure pela sua nova Lista de Blogues e antes de adicionar qualquer blogue à lista, desmarque todas as opções e marque somente para mostrar Miniatura do item mais recente.

Claro que se ir ver no blogue como fica a Lista após este passo, vai tudo numa confusão já que precisa colocar o estilo no CSS para que tudo fique organizado e como desejamos. =D

E para colocar os estilos no CSS, procuramos pelo local onde estão os estilos da área do blogue que escolhemos para colocar a Lista (Recomendado para melhor localizar no futuro, embora possa colocar onde quiser desde que seja na parte do CSS) e colocamos junto o seguinte código:

Ver Código
#linklist { /* A parte visivel da lista */
    padding:5px;
    width:500px;
    height:75px;
    overflow:hidden;

}
#linklist ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#linklist li{  /* Cada uma das secções onde aparece a imagem */
    background:#234;
    border:1px solid #456;
    display:inline;
    float: left;
    min-height:71px;
    min-width:71px;
    max-height:72px;
    max-width:72px;
    padding:3px;
    margin-right:3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:3px;
}
#linklist a span { /* A parte com as informações referente a cada imagem, escondida por definição */
    background: none repeat scroll 0 0 #fff;
    border: 5px solid #000;
    border-radius: 20px;
    height: 70px;
    padding: 0;
    position: relative;
    width: 200px;
    color: #000;
    display: none;
}
#linklist a span:before {
    border-color: #000 transparent;
    border-style: solid;
    border-width: 15px 15px 0;
    bottom: -20px;
    content: "";
    display: block;
    left: 100px;
    position: absolute;
    width: 0;
    z-index: 1;
}
#linklist a span:after {
    border-color: #fff transparent;
    border-style: solid;
    border-width: 16px 16px 0;
    bottom: -12px;
    content: "";
    display: block;
    left: 99px;
    position: absolute;
    width: 0;
    z-index: 2;
}
#linklist a em {  /* Cada secção referente às informações de cada blgue na lista (Nome, Titulo do artigo, Data) */
    display: block;
    overflow: hidden;
    white-space: nowrap;  /* Dizemos que o texto de cada secção deve ser apresentado numa unica linha */
    width: 180px; /* Definimos uma largura, alguns pixels a menos que secção acima que envolve estas */
    margin: 2px auto;
    text-overflow: ellipsis; /* Dizemos que quando o texto ultrapassa a largura, deverá apresentar os 3 pontinhos */
}
#linklist a em:before {  /* A pequena imagem antes de cada item nas informações de cada blogue */
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAYAAADeM14FAAAAVUlEQVR4Xj2MQQoAIQwDs/sgT1686peEvq4v8DsFL0LWrdSBQhqSIKXEDeJebFprxOEYpRTknN30ypyTvXf+2hNmhrUWbkJEWGvlHR1jQFWfGI3H+QDvhi06/rbHiwAAAABJRU5ErkJggg==);
    margin-right:3px;
} 
#linklist a:hover span {  /* Parte do codigo que faz aparecer a caixinha com as informações ao colocar o rato encima da imagem */
    display: block;
    margin-top: -160px;
    margin-left: -70px;
    z-index:999;
    position:absolute;
    text-decoration:none;

#linklist a:hover img {  /* Só para dar um certo brilho na imagem ao passar o rato */
    box-shadow: 0 0 8px yellow;
}

Ocultar Código

Termino deixando aqui um exemplo do como fica a lista a funcionar:

DEMONSTRAÇÃO

Até Breve. :-F

Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário