- Obter link
- Outras aplicações
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
Osvaldo
Mocheco⊗MarafadoPara 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
Ocultar 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 == "true"'> <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 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. =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
Ocultar 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
- Obter link
- Outras aplicações
Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário