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.

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.

Publicada originalmente em 07 de Março, 2010

Osvaldo

Mocheco⊗Marafado

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

---

ver código

imprimir?

01	<b:widget id='BlogList99' locked='false' title='A minha Lista de blogues' type='BlogList'>

02	<b:includable id='main'>

03	<div class='widget-content'>

04	<div id='linklist'>

05	<ul id='linkthumb'>

06	<b:loop values='data:items' var='item'>

07

<li>

08	<b:if cond='data:showItemThumbnail == &quot;true&quot;'>

09	<b:if cond='data:item.itemThumbnail'>

10	<a expr:href='data:item.blogUrl' target='_blank'>

11	<img alt='' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>

12	<span><em><data:item.blogTitle/></em><em> <data:item.itemTitle/></em><em> <data:item.timePeriodSinceLastUpdate/></em></span></a>

13

<b:else/>

14	<a expr:href='data:item.blogUrl' target='_blank'>

15	<img alt='' height='72' width='72' src='http://lh5.ggpht.com/_Jm8aDaSCrFU/S2d6YQnQ1-I/AAAAAAAAAss/7HB9JZ2r46c/noimage.png'/>

16	<span><em><data:item.blogTitle/></em><em> <data:item.itemTitle/></em><em> <data:item.timePeriodSinceLastUpdate/></em></span>

17

</a>

18

</b:if>

19

</b:if>

20

</li>

21

</b:loop>

22

</ul>

23

</div>

24	<script type='text/javascript'>

25	//<![CDATA[

26	$(document).ready(function(){

27	var first = 0;

28	var speed = 800;

29	var pause = 6500;

30	function removeFirst(){

31	first = $('ul#linkthumb li:first').html();

32	$('ul#linkthumb li:first')

33	.animate({opacity: 0.5}, speed)

34	.fadeOut('slow', function() {$(this).remove();});

35	addLast(first);

36

}

37	function addLast(first){

38	last = '<li style="display:none">'+first+'</li>';

39	$('ul#linkthumb').append(last)

40	$('ul#linkthumb li:last')

41	.animate({opacity: 1}, speed)

42	.fadeIn('slow')

43

}

44	interval = setInterval(removeFirst, pause);

45

});

46

//]]>

47

</script>

48	<div style='clear: both;'/>

49	<b:include name='quickedit'/>

50

</div>

51	</b:includable>

52	</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 Como colocar jQuery num blogue.

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.

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

---

ver código

imprimir?

01	#linklist { /* A parte visivel da lista */

02	padding:5px;

03	width:500px;

04	height:75px;

05	overflow:hidden;

06

07

}

08	#linklist ul{

09	list-style-type: none;

10	padding: 0;

11	margin: 0;

12

}

13	#linklist li{  /* Cada uma das secções onde aparece a imagem */

14	background:#234;

15	border:1px solid #456;

16	display:inline;

17	float: left;

18	min-height:71px;

19	min-width:71px;

20	max-height:72px;

21	max-width:72px;

22	padding:3px;

23	margin-right:3px;

24	-webkit-border-radius: 3px;

25	-moz-border-radius: 3px;

26	border-radius:3px;

27

}

28	#linklist a span { /* A parte com as informações referente a cada imagem, escondida por definição */

29	background: none repeat scroll 0 0 #fff;

30	border: 5px solid #000;

31	border-radius: 20px;

32	height: 70px;

33	padding: 0;

34	position: relative;

35	width: 200px;

36	color: #000;

37	display: none;

38

}

39	#linklist a span:before {

40	border-color: #000 transparent;

41	border-style: solid;

42	border-width: 15px 15px 0;

43	bottom: -20px;

44	content: "";

45	display: block;

46	left: 100px;

47	position: absolute;

48

width: 0;

49	z-index: 1;

50

}

51	#linklist a span:after {

52	border-color: #fff transparent;

53	border-style: solid;

54	border-width: 16px 16px 0;

55	bottom: -12px;

56	content: "";

57	display: block;

58	left: 99px;

59	position: absolute;

60

width: 0;

61	z-index: 2;

62

}

63	#linklist a em {  /* Cada secção referente às informações de cada blgue na lista (Nome, Titulo do artigo, Data) */

64	display: block;

65	overflow: hidden;

66	white-space: nowrap;  /* Dizemos que o texto de cada secção deve ser apresentado numa unica linha */

67	width: 180px; /* Definimos uma largura, alguns pixels a menos que secção acima que envolve estas */

68	margin: 2px auto;

69	text-overflow: ellipsis; /* Dizemos que quando o texto ultrapassa a largura, deverá apresentar os 3 pontinhos */

70

}

71	#linklist a em:before {  /* A pequena imagem antes de cada item nas informações de cada blogue */

72	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAYAAADeM14FAAAAVUlEQVR4Xj2MQQoAIQwDs/sgT1686peEvq4v8DsFL0LWrdSBQhqSIKXEDeJebFprxOEYpRTknN30ypyTvXf+2hNmhrUWbkJEWGvlHR1jQFWfGI3H+QDvhi06/rbHiwAAAABJRU5ErkJggg==);

73	margin-right:3px;

74

}

75	#linklist a:hover span {  /* Parte do codigo que faz aparecer a caixinha com as informações ao colocar o rato encima da imagem */

76	display: block;

77	margin-top: -160px;

78	margin-left: -70px;

79	z-index:999;

80	position:absolute;

81	text-decoration:none;

82

83	#linklist a:hover img {  /* Só para dar um certo brilho na imagem ao passar o rato */

84	box-shadow: 0 0 8px yellow;

85

}

Ocultar Código

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

DEMONSTRAÇÃO

Até Breve.

Queres ler outro artigo ao calhas?