Diferentes Estilos no Blogue

O artigo original foi escrito de acordo com testes efectuados num template Minima (dos modelos antigos).
Entretanto, o Blogger deixou de dar suporte e ajuda aos Templates mais antigos, tal como o Minima que foi criado em 2004, até finalmente os retirarem totalmente com a implementação de códigos mais recentes e adaptados à internet actual onde temos que ter em conta que uma boa parte dos visitantes utiliza dispositivos móveis.

Por isso nesta republicação dum tutorial de 2010, resolvi reescrever e adaptar o artigo utlizando o modelo Emporio e todas as suas versões. ;)

E se cada visitante pudesse escolher qual o estilo em que desejava visualizar o teu blogue? :thinking:

Esta foi uma das opções que considerei implementar aqui no blogue mas que desisti devido ao peso que iria colocar nas páginas já de si um pouco pró pesado, embora em certos blogues que não sejam tão pesados ainda acho que pode ser uma possibilidade a considerar...

E como se poderia fazer isso, pode o leitor perguntar...
Bem, a resposta é com a ajuda do jQuery, e um pouco de javascript, claro. :D

Atenção: Esta é uma implementação de nível AVANÇADO, que requere bons conhecimentos do código do teu blogue.
Por isso RECOMENDO que testem primeiro num blogue de testes e mesmo assim, antes de tentar modificar o código do vosso blogue, é recomendado que salvem sempre o modelo actual!
Nota: Se decidirem implementar este efeito, tenham em conta que poderá interferir com outros scripts já instalados.

Explicando então o processo do início, podemos começar por dar uma olhada no CSS do blogue...
E mais uma vez, para entenderem melhor como funcionam os estilos dum blogue: Entendendo o Blogger... Parte 1: CSS.

Como já tinha mencionado no tutorial publicado no mês passado, nos modelos Emporio que é o que vamos usar neste guia, o CSS apresenta-se da seguinte maneira ou similar:

    <b:skin version='1.1.0'><![CDATA[ ....
....Restantes estilos CSS do blogue....
]]></b:skin>

    <b:template-skin>
      <![CDATA[
....Estilos CSS extra para o Esquema do template....
      ]]>
    </b:template-skin>

A parte que nos interessa aqui é a que vai de <b:skin version='1.1.0'><![CDATA[ (que se encontra ao principio do código) até ]]></b:skin> (que se encontra sensivelmente a meio do código), que é onde está a parte em CSS ou por outras palavras, onde estão a maioria dos estilos de cada elemento presente no blogue.

Então o primeiro passo para colocar estilos diferentes à escolha do visitante será copiar TODO O CONTEÚDO que se encontrar entre as tags mencionadas acima e colar no Bloco de Notas, WordPad (ambos presentes em qualquer Windows), ou qualquer outro editor de texto da tua preferência.

Pessoalmente, utilizo o Notepad++.
É mais completo com uma apresentação mais agradável, dá para salvar em vários formatos E é em Portugês... do Brasil mas do mal, o menos. :-P

Este novo documento de texto vai ser onde fica o CSS do primeiro estilo.
Deves salvar com um nome como por exemplo Estilo1.css, mas antes de salvares acrescenta o seguinte:

#est2, #est3, #est4, #est5 {
	display: none;
}

Estas linhas acima devem ser colocadas em cada novo documento CSS, substituindo a parte referente ao estilo de cada documento.
No caso, este primeiro documento vai ser o Estilo1.css, então estão presentes as restantes denominações (#est2, #est3, #est4, #est5) referentes aos restantes estilos que vamos colocar (Total de 5, que são as versões do modelo Emporio).
Por exemplo no Estilo2.css, as linhas a acrescentar devem ser assim:

#est1, #est3, #est4, #est5 {
	display: none;
}

Notaram a diferença?
Como se trata do Estilo2.css, o #est2 foi substituido por #est1... e por aí fora nos restantes ficheiros .css...

NOTA: Ao copiar o conteúdo entre tags <b:skin version='1.1.0'><![CDATA[ e ]]></b:skin>, precisam depois colar no novo documento da seguinte maneira:

<!--
...Conteúdo CSS do modelo ...

#est1, #est2, #est4, #est5 {
	display: none;
}
-->

Basicamente, substituir no ficheiro .css onde deveria estar <b:skin version='1.1.0'><![CDATA[ no modelo do blogue por <!-- e ]]></b:skin> por -->

A ideia aqui é que se crie diferentes estilos CSS, editar cada um dos estilos de cada elemento com outros estilos à escolha, que podem ser novas imagens de fundo ou novas cores, novos tipos de fontes, etc... deixar a imaginação fluir.
É recomendado ir pré-visualizando e salvando até estar a seu gosto (quase parece quase receita de culinária. :)) ), repetir o procedimento para criar um novo documento de texto com o novo estilo mas desta vez, salve com outro nome como por exemplo Estilox.css e depois alojar esses ficheiros .css num site de alojamento que aceite esse tipo de ficheiros.

Mas para efeitos de demonstração e porque não me apeteceu estar a criar estilos novos, decidi utilizar as 5 versões do modelo Emporio:

1. Porcelain (Estilo1.css)
2. Toolbox (Estilo2.css)
3. Apron (Estilo3.css)
4. Technica (Estilo4.css)
5. Flamingo (Estilo5.css)

Recapitulando, instalamos cada uma das 5 versões do modelo Emporio, na mesma aba clicamos na seta do botão Personalizar e escolhemos a opção Editar HTML.
Copiamos TODO O CONTEÚDO que se encontrar entre as tags <b:skin version='1.1.0'><![CDATA[ e ]]></b:skin> e colamos no novo ficheiro .css a que damos o nome de Estilox.css e repetimos o processo em cada versão até termos os 5 ficheiros .css com os estilos que vamos colocar no blogue.

É importante que utilizemos sempre o mesmo tipo de modelo (Contempo, Soho, Emporio, Notable, etc...) porque cada tipo de modelo tem um HTML específico.
Razão porque nesta demonstração, utilizei todas as versões do modelo Emporio. O HTML é o mesmo em todas as versões, só mudando o CSS que lhes dão o estilo e aparência.

Após termos os 5 ficheiros .css, apagamos TODO O CONTEÚDO que se encontrar entre as tags <b:skin version='1.1.0'><![CDATA[ e ]]></b:skin> e substituímos pelo seguinte que deverá ficar assim:

    <b:skin version='1.3.3'><![CDATA[
.estilotroca {
     padding:10px;
     margin:0;
     left:8px;
     top:50px;
     position:fixed;
     width:150px;
     font-size: 14px;
     z-index: 999999;
}
 .estilotroca span {
     color: #4f2;
     text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
     font-variant: small-caps;
     font-weight: 700;
     background: rgba(0,0,0,.25);
     padding: 3px 5px;
     border: 1px solid #2bf;
     border-radius: 3px;
     box-shadow: rgb(38, 57, 77) 0px 12px 3px -10px;
     display: block;
     width: fit-content;
     transition: all .35s;
}
 .estilotroca ul {
     list-style: none;
     margin: 0!important;
     padding: 0!important;
     padding-left: 20px!important;
}
 .estilotroca li {
     height: 10px;
     margin-bottom: 2px;
     position: relative;
}
 .estilotroca li::before {
     content: '👉🏼';
     font-size: inherit;
     position: absolute;
     left: -22px;
     top: -25%;
}
]]></b:skin>   

Este será o estilo do novo elemento a acrescentar depois onde irão ficar os controles para escolher os estilos.
Altera conforme o estilo que preferir.

Antes de <b:skin version='1.1.0'><![CDATA[ , colocamos o seguinte:

<link href='URL-FICHEIRO-estilo1.css' media='screen' rel='stylesheet' title='estilo1' type='text/css'/>
 <link href='URL-FICHEIRO-estilo2.css' media='screen' rel='alternate stylesheet' title='estilo2' type='text/css'/>
 <link href='URL-FICHEIRO-estilo3.css' media='screen' rel='alternate stylesheet' title='estilo3' type='text/css'/>
 <link href='URL-FICHEIRO-estilo4.css' media='screen' rel='alternate stylesheet' title='estilo4' type='text/css'/>
 <link href='URL-FICHEIRO-estilo5.css' media='screen' rel='alternate stylesheet' title='estilo5' type='text/css'/> 

Uma das partes importantes nas linhas acima, além da URL onde está alojado cada ficheiro .css, é onde diz title='estilox' porque é necessário para fazer funcionar o script mais tarde.

Sobre o alojamento dos ficheiros .css, existem várias opções online.
Muitas são a pagar, mas ainda se encontram algumas opções gratuitas tal como se pode ver neste artigo.
Em todas as opções existem vantagens e desvantagens. Uma das desvantagens é que na maioria destes locais, se não os visitarmos regularmente perdemos o que lá colocarmos.

Como as minhas necessidades são ínfimas, eu utilizo o Firebase mas acho que a escolha depende da utilidade que cada um lhe pretenda dar... :Z

Agora é altura de criar o elemento onde o visitante pode escolher qual o tema (Estilo) que prefere.
Para fazer isso vamos procurar por <body> e colocar logo abaixo, o seguinte:

  <body>
<div class='estilotroca'>
   <p>
      Estilo Actual:
      <span id='est1'>Porcelain</span>
      <span id='est2'>Toolbox</span>
      <span id='est3'>Apron</span>
      <span id='est4'>Technica</span>
      <span id='est5'>Flamingo</span>
   </p>
   <p><a href='serversideSwitch.html' id='toggler'>Alternar</a> entre modelos Emporio.</p>
   <p>Escolha outro Estilo:</p>
   <ul>
      <li><a class='styleswitch' href='serversideSwitch.html?style=estilo1' rel='estilo1'>Porcelain</a></li>
      <li><a class='styleswitch' href='serversideSwitch.html?style=estilo2' rel='estilo2'>Toolbox</a></li>
      <li><a class='styleswitch' href='serversideSwitch.html?style=estilo3' rel='estilo3'>Apron</a></li>
      <li><a class='styleswitch' href='serversideSwitch.html?style=estilo4' rel='estilo4'>Technica</a></li>
      <li><a class='styleswitch' href='serversideSwitch.html?style=estilo5' rel='estilo5'>Flamingo</a></li>
   </ul>
</div>

Se repararem neste código acima, vão notar os elementos aos quais demos o estilo antes em cada novo ficheiro .css mas pode ver que temos uma ligação para algo com o nome serversideSwitch, que em teoria serve para direccionar aqueles raros visitantes que não têm o javascript activado e recomendar-lhes que sem javascript, o blogue não iria ter todas as funcionalidades a 100%.
Eu não o fiz porque já tenho um aviso desses no blogue, mas uma página dessas pode ser feita facilmente criando uma nova página estática para esse efeito e colocando a ligação assim: href='/p/serversideswitch.html?style=estilox'

Podem deixar o código como está, caso não se preocupem com esses raros visitantes sem javascript, ou criar uma personalizada nas próprias páginas estáticas do blogue...

Outra das partes importantes nas linhas acima, é onde diz rel='estilox', cujo conteúdo precisa ser igual ao que está em title='estilox' no código mais acima.

E finalmente, é chegado o momento de colocar o javascript que vai fazer tudo funcionar.
E o primeiro passo para isso será instalar o Jquery, caso ainda não o tenhas no template.

Podes ler mais sobre como instalar o Jquery em Como colocar jQuery num blogue.
Mas repara que para este script funcionar precisa da versão 1.3.1 do Jquery... e caso já tenham outra versão instalada, talvez seja necessário utilizar jQuery.noConflict().

Com o Jquery instalado, colocamos o seguinte LOGO ABAIXO:

        <!-- /* SCRIPT stylesheetToggle */ -->
    <script type='text/javascript'>
      //<![CDATA[
/**
* Stylesheet toggle variation on styleswitch stylesheet switcher.
* Built on jQuery.
* Under an CC Attribution, Share Alike License.
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/

(function($)
	{
		// Local vars for toggle
		var availableStylesheets = [];
		var activeStylesheetIndex = 0;
		
		// To loop through available stylesheets
		$.stylesheetToggle = function()
		{
			activeStylesheetIndex ++;
			activeStylesheetIndex %= availableStylesheets.length;
			$.stylesheetSwitch(availableStylesheets[activeStylesheetIndex]);
		};
		
		// To switch to a specific named stylesheet
		$.stylesheetSwitch = function(styleName)
		{
			$('link[@rel*=style][title]').each(
				function(i) 
				{
					this.disabled = true;
					if (this.getAttribute('title') == styleName) {
						this.disabled = false;
						activeStylesheetIndex = i;
					}
				}
			);
			createCookie('style', styleName, 365);
		};
		
		// To initialise the stylesheet with it's 
		$.stylesheetInit = function()
		{
			$('link[rel*=style][title]').each(
				function(i) 
				{
					availableStylesheets.push(this.getAttribute('title'));
				}
			);
			var ck = readCookie('style');
			if (ck) {
				$.stylesheetSwitch(ck);
			}
		};
	}
)(jQuery);

// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name)
{
	createCookie(name,"",-1);
}
// /cookie functions

	$(function()
		{
			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);
        //]]>
      </script>

E agora, pré-visualiza o blogue. Se tudo aparecer em ordem, podes salvar o modelo e ir testar os novos estilos. ;)
Podem ver como ficou no blogue que utilizei para os testes:

Caso prefiram ver no próprio blogue de teste (O exemplo acima não tem em conta os diversos aparelhos): DEMONSTRAÇÃO

Visto em jQuery styleswitch – now with toggle!

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?