Lista de Ligações... com Blogumus

Ainda relacionado com a serie de artigos sobre a Lista de Blogues, mas mais como um aparte já que neste caso se refere a uma lista de ligações que tanto podem ser externas como internas. Este foi um artigo que escrevi no MochecoMarafado a pedido de um leitor na altura e que agora republico aqui. 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, somente actualizei as ligações incluídas para outros artigos, a imagem apresentando o exemplo de como incluir a dita Lista e claro, actualizei também a parte descrevendo como encontrar os códigos. :)

Publicada originalmente em 18 de Maio, 2010

Escrevo este passo a passo em resposta a um leitor aqui do blogue que, pelo que entendi, tentou criar uma lista de ligações internas utilizando a Lista de Blogues... com Blogumus.

Convém mencionar que essa Lista é para mostrar ligações (links) para blogues externos, de amigos, blogues que gostamos, etc... ;)

Neste caso, em que o objectivo é criar uma lista de ligações internas, tipo menu de navegação utilizando o Blogumus, tem 2 maneiras de fazer, ambas aproveitando mini-aplicações providenciadas pelo Blogger:

Uma é a miniaplicação Páginas (Pagelist) que geralmente se utiliza quando se cria paginas estáticas no blogue e a outra, que vou utilizar aqui neste passo a passo já que nos dá mais liberdade de colocar ligações sem ser para paginas estáticas, é a Lista de Links (Linklist) ou Lista de Ligações/Hiperligações.

Antes de ler mais adiante, recomendo que ler Blogumus? Que é isso?, para saber como configurar, para baixar os ficheiros necessários ao funcionamento do Blogumus e saber como fazer para alojar esses ficheiros.

Bem, então vamos ao tutorial:

Primeiro vá a Esquema (1º Passo na imagem abaixo) e adicione uma nova miniaplicação (2º Passo na imagem abaixo), escolha a Lista de Links (3º Passo na imagem abaixo) e coloque uma ligação, não importa qual, pode ser para a pagina inicial do seu blogue e salve.

Add Link List

a seguir vamos à aba Modelo e depois Editar HTML para abrir o Editor de HTML, onde está toda a codificação presente no blogue e procuramos:

<b:widget id='LinkList1' locked='false' title='LinkList' type='LinkList'>

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 é bem fácil já que aparece LinkList nas opções a escolher...

Embora onde tem id='LinkList1' possa ter outro numero, dependendo se já tem outro elemento do mesmo tipo no blogue e title='LinkList' também pode estar diferente, caso tenha colocado algum titulo diferente ao criar o elemento.

Enfim, após localizarem o elemento em questão, substitua o que está desde <b:includable id='main'> até </b:widget> pelo seguinte código, após fazer as alterações necessários como mencionado no artigo acima sobre o Blogumus:

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'><center>
<script src='URL_DO_SITE_ALOJAMENTO/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda
Fazani</a> | Distributed by <a href='http://blogger-templates-designs.blogspot.com/'>Blogger Templates Designs</a></div>
<script type='text/javascript'>
var so = new
SWFObject(&quot;URL_DO_SITE_ALOJAMENTO/tagcloud.swf&quot;,
&quot;tagcloud&quot;, &quot;295&quot;, <!-- width="295" -->
&quot;250&quot;, &quot;7&quot;, <!-- height="250" -->
&quot;#2e3335&quot;);
// uncomment next line to enable transparency
so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x045FB4&quot;);
so.addVariable("hicolor",  "0x79C7E8");
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;,
&quot;<tags><b:loop values='data:links' var='link'><a expr:href='data:link.target' style='12'><data:link.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/></center>
</div>
</b:includable>
</b:widget>

Pré-Visualize e se tudo estar em ordem, Salve.

Após estas operações, agora já pode adicionar quantos links desejar, sejam internos ou externos simplesmente utilizando a opção editar do próprio elemento sem ser necessário mexer mais no código do template.

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

DEMONSTRAÇÃO

NOTA: No código acima, as ligações (coloquei algumas deste blogue e mais uma dum blogue externo para fins de demonstração) abrem na mesma janela. No exemplo coloquei a abrirem numa nova janela porque utilizo uma iframe para puder publicar a demonstração dentro dum artigo aqui no blogue.

Espero ter ajudado.

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