Tweet Template Dinâmico Para Blogspot !

Esse tutorial apresenta um hack que, depois de instalado, permite que o leitor escolha como quer ver seu blog. O tema escolhido será visto somente pelo leitor em particular , para o visitante. Para os outros usuários o template aparecerá no formato padrão . Ou seja, cada um poderá ver como quiser. Muito interessante. Para compreender mais rapidamente como funciona, veja ► TEMPLATE DINÂMICO

Todo o tutorial foi publicado pelo site BloggerStop para quem vão todos os créditos e agradecimento. Eu apenas testei, traduzi e adaptei alguns detalhes para que a gente possa compreender melhor.

Não é muito difícil de instalar, mas fica mais fácil se você já tem algum conhecimento, principalmente sobre como hospedar arquivos, porém, se eu consegui qualquer criança (curiosa e com boa vontade) consegue também.

Apesar deste hack poder ser usado para alterar todos os elementos css do seu blog (cabeçalho, imagem de fundo, cores de links, tamanho e estilo, etc), o BloggerStop fez um post curto e fácil de entender concentrando as mudanças apenas para o Cabeçalho (header) e Fundo com imagens (backgrounds).

Em qualquer dos modelos do Blogger, você verá os códigos semelhantes a estes abaixo, que permitem alterar imagens, cores do background e do header.Por exemplo:

PARA ALTERAÇÕES NO BACKGROUND (fundo)

body {
background:transparent;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

PARA ALTERAÇÕES NO HEADER (cabeçalho)

#header h1 {
color: $pagetitlecolor;
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Com esse hack, vamos adicionar mais de uma imagem de cabeçalho(header) e fundo (background), lembrando que apenas uma imagem será exibida de cada vez. Não se preocupe, não vai virar uma bagunça.

Vamos aprender em 5 ETAPAS. Siga com atenção as instruções.

ETAPA 1:

Fazer Dwounload dos arquivos CSS:

• style_1.css (para background 1)
• style_2.css (para background 2)
• style_3.css (para background 3)
• style_4.css (para header 1)
• style_5.css (para header 2)
• serversideSwitch.html

Download aqui ► Zipped File (do site Ziddu)◄
Fazer download do spcript ► StylesheetToggle.js (de KelvinLuck.com ) (Clic sobre o link com o botão direito e clic "Salvar link como")
ETAPA 2:
Abra e edite os arquivos CSS, para adicionar suas próprias imagens.
As folhas de estilo (style) 1, 2 e 3 determinam imagens para o background.

body
{background: url (LINK_DA_IMAGEM) repeat;
color: #333; }

As folhas de estilo (style) 4 e 5 determinam largura (width), altura (height), e a imagem do cabeçalho (header).

#header-wrapper {
width:800px;
height: 200px;
background: url(LINK_DA_IMAGEM) no-repeat;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

ETAPA 3:
Depois de editar tudo, hospede os arquivos no MyDataNest ou HotLinkFiles. É necessário fazer registro. Ou use outro site de sua preferencia. Copie os endereços (links) para esses arquivos.
NOTA: No MyDataNest, certifique-se que a pasta onde você tem carregado esses arquivos está selecionada como "hidden" e NÃO como "private".
ETAPA 4
Entrar no Blogger, ir em Layout e Editar HTML (não esqueça de fazer o backup)

Use CtrF para encontrar a tag:

</head>

Imediatamente ANTES/ACIMA dela coloque o seguinte código

<link href='http://mydatanest.com/files/............../Style_1.css' media='screen' rel='alternate stylesheet' title='styles1' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_2.css' media='screen' rel='alternate stylesheet' title='styles2' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_3.css' media='screen' rel='alternate stylesheet' title='styles3' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_4.css' media='screen' rel='alternate stylesheet' title='styles4' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_5.css' media='screen' rel='alternate stylesheet' title='styles5' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://mydatanest.com/files/............../stylesheetToggle.js' type='text/javascript'/>
<script type='text/javascript'>
$(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 &quot;toggler&quot; below.
$(&#39;#toggler&#39;).bind(
&#39;click&#39;,
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.
$(&#39;.styleswitch&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetSwitch(this.getAttribute(&#39;rel&#39;));
return false;
}
);
}
);
</script>

Troque os links (em vermelho) pelos que você copiou da ETAPA 3.
Feito isso. Salve o template.
ETAPA 5:
Abra a página Layout -> Elementos de página e clique em "Adicionar um Gadget". Escolha o gadget "HTML / JavaScript "
Dentro dele coloque o seguinte código:

<h3>Clic para mudar a imagem principal!</h3>
<center><a href="http://mydatanest.com/files/............../serversideSwitch.html?style=style_4" class="styleswitch" rel="styles4"><img width="200" src="http://i34.tinypic.com/24vmrv8.jpg"/></a><br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_5" class="styleswitch" rel="styles5"><img width="200" src="http://i38.tinypic.com/ivyhdc.jpg"/></a></center>
<h3>Escolha o Background</h3><center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_1" class="styleswitch" rel="styles1"><img width="100" src="http://i34.tinypic.com/28vsgef.jpg"/></a><br/><a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_2" class="styleswitch" rel="styles2"><img width="100" src="http://i33.tinypic.com/282j7ts.jpg"/></a><br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_3" class="styleswitch" rel="styles3"><img width="100" src="http://i35.tinypic.com/2d12u08.jpg"/></a></center>

Altere todos os link marcados em vermelho (serversideSwitch.html), pelo seu link no MyDataNest , HotLinkFiles ou outro.
Posicione o gadget onde considerar mais apropriado.
A dificuldade que eu encontrei, foi na hospedagem dos arquivos e colocação correta dos links. Faça tudo com muita atenção! Boa sorte! ♥
Créditos:

• BloggerStop
• StyleSwicth-Toggle -Kelvin Luck ► KelvinLuck.com. ►Twitter @vitch.