No outro dia estava passeando pelo meu antigo blogue (sim, está extinto mas ainda o tenho guardado para estas ocasiões... :-` ), tentando encontrar alguns dos códigos do Blogger que salvei em alguns artigos quando notei que embora os tenha escrito em 2010, esta série de artigos sobre como funcionava a estrutura do Blogger ainda tem o seu interesse e continua actual mesmo que em alguns dos modelos mais recentes a codificação já funcione de maneira diferente.
Por essa razão resolvi republicar estes três artigos aqui neste blogue:
- Entendendo o Blogger... Parte 1: CSS
- Entendendo o Blogger... Parte 2: Javascript ou/e as Condicionais do Blogger Este Artigo
- Entendendo o Blogger... Parte 3: HTML
Nada foi alterado no texto a seguir em relação ao que escrevi originalmente, por isso alguns dos códigos apresentados podem aparecer de maneira diferente em modelos mais recentes.
Bem... como devem ter percebido, onde termina a secção normal do CSS, é onde começa esta:
Javascript ou CSS(segunda parte), começa em ]]></b:skin> e termina em </head>:
Esta secção dos templates normalmente não tem nada mas é nesta secção que colocam os estilos que não são aceites na parte dita normal do CSS tal como quando se utiliza as condicionais (condicionais são códigos que utiliza para por exemplo dar estilo somente a determinadas paginas ou navegador).
Imagine que não queria que determinado elemento da barra lateral fosse visível nas paginas individuais... Então, primeiro identificamos o elemento em causa... digamos o perfil do autor.
Se procurar no seu template na secção de HTML pelo elemento do perfil, encontra algo como isto:
<b:widget id='Profile1' locked='false' title='Acerca de mim' type='Profile'/>
Ou seja, temos uma id que podemos utilizar. Na verdade, esta id já é utilizada para dar estilo a este elemento na maior parte dos templates para o Blogger, mas este é somente um exemplo para demonstrar o que deve procurar.
Sabendo o id ou class do elemento a esconder nas paginas individuais, colocamos nesta secção o seguinte:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#Profile1 { display: none;}
</style>
</b:if>
Explicando:
1ª linha é a condicional para as paginas individuais.
2ª linha abre o estilo CSS.
Na linha 3 são os estilos que damos ao elemento. Podemos aqui colocar qualquer estilo que quisermos e quantos elementos quisermos, podemos esconder a barra lateral, aumentar a parte principal onde se encontram os artigos, colocar fundos diferentes de outro tipo de pagina, etc... mas atenção, se for uma class devemos colocar antes um ponto (.) e se for uma id devemos colocar o símbolo cardinal (#).
É somente uma questão de ir experimentando com os vários tipos de condicional que o Blogger permite e com os estilos que queremos colocar.
4ª linha é o fecho dos estilos CSS.
5ª linha é o fecho da condicional.
Tipo de condicionais que o Blogger permite nesta secção até ao momento:
<b:if cond='data:blog.pageType == "item"'>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
<b:if cond='data:blog.pageName == "Contacto"'>
</b:if>
<b:if cond='data:blog.url == "http://ocportugal.blogspot.com/2007/11/parceria.html"'>
</b:if>
Existem mais condicionais no Blogger mas pela minha experiência, funcionam melhor no próprio código HTML do que nesta secção mas estas já dá para ter uma ideia das possibilidades.
No caso de um navegador como o Internet Explorer (IE) que não utiliza a maior parte das definições da maioria dos restantes e muitas vezes ao visualizar um blogue no IE as coisas não aparecem bem como pretendíamos, também se pode colocar nesta secção estilos próprios para esse navegador, embora mesmo assim certos códigos o IE não tem como ler de maneira nenhuma.
Neste exemplo vou mostrar como utilizando a condicional para a versão 7 ou superior, (acho que já ninguém usa versões anteriores ou pelo menos não deveria):
<!--[if gte IE 7]>
<style type='text/css'>
#outer-wrapper {
width:660px;
margin: 0px 5px 5px 5px;
height:100%;
color:#AFAFAF;
font: 13px century gothic,Arial,verdana, sans-serif;
border:1px solid #222629;
}
</style>
<![endif]-->
Tudo o que colocarmos na parte em destaque, somente vai ser lida pelo IE. Utiliza-se esta condicional quando algum elemento aparece deformado em relação ao resto quando visualizado no IE.
Se quisermos colocar certos efeitos ou elementos de pagina como slides ou outros que utilizem javascript, é necessário colocar o javascript no código e é também nesta secção que normalmente se faz isso.
Ora no javascript alguns códigos precisam de bibliotecas de javascript para funcionar, existem varias que se podem utilizar mas atenção ao escolher uma delas porque por norma só é conveniente utilizar uma delas já que podem provocar conflitos ao utilizar mais de uma biblioteca ao mesmo tempo.
As bibliotecas mais conhecidas são o jQuery, script.aculo.us e Mootools.
Existem duas maneiras de colocar no código, uma é alojar num site de alojamento que aceite javascript como o Google Sites e coloca-se o código da seguinte maneira:
<script src='URL DO ARQUIVO.js' type='text/javascript'/>
A outra maneira é aproveitar as bibliotecas do Google e utilizar os arquivos alojados nos servidores do Google, por exemplo para a biblioteca jQuery que é a que eu utilizo:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
NOTA: Onde está o número 3.3.1 é a versão do jQuery, neste caso. Para colocar outra versão entre as que estão disponíveis na Biblioteca do Google na ligação acima, basta substituir esses números pelos da versão desejada.
Desde que publiquei este artigo originalmente já surgiram mais locais do género das bibliotecas do Google, tais como:
Algumas destas Bibliotecas de Recursos têm ainda a vantagem de alojar também populares estilos de CSS.
E actualmente também já se pode escolher colocar neste tipo de recursos, uma verificação de integridade numa tradução livre. Algo como uma garantia de como o produto que estamos a utilizar vai manter-se sem alterações de terceiros...
Mas isso é assunto para um outro artigo. Mais pormenorizado... ;)
Atenção que ao colocar qualquer destas bibliotecas de javascript, devem ficar antes de qualquer outro código javascript que dependa delas para funcionar.
Para colocar outros códigos javascript, normalmente utiliza-se a primeira opção. Embora também se possa colocar os códigos directamente no template, algo que eu evito para não tornar o template muito poluído mas que facilita a edição se for necessário, e que se faz da seguinte maneira:
<script type='text/javascript'>
// <![CDATA[
....Codigo Javacript....
// ]]>
</script>
Embora se colocar alguns códigos dentro de um elemento HTML/Javascript, baste somente colocar:
<script type='text/javascript'>
....Codigo Javacript....
</script>
Uma ultima nota sobre os códigos javascript: alguns códigos para funcionarem devem ficar numa determinada ordem em relação aos restantes.
Por isso é recomendado antes de colocar num blogue, criar um blogue de testes e ir testando a ordem até acertar. ~X
A seguir e para terminar, a parte HTML (o corpo do blogue, a parte visível).
Até Breve. :-F
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