» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

TEMPLATE ANIME 02





Clique na imagem para ampliar.
Image and video hosting by TinyPic
»DOWNLOAD AQUI«

Para Configurar as Abas Sobrepostas.
Clique em Layout
►Em Elementos de Página altere o que preferir;
►Em Editar HTML, na caixinha com o código do seu blog faça as alterações necessárias.
▼Clique em Continue Lendo▼

1º► COMO ACRESCENTAR AS WIDGETS NAS ABAS
Em Layout→Elementos da página→Clique nos números 1, 2, 3 e 4 para acrescentar as widgets ou editar as pré-existentes.

Atenção: Cada aba aceita apenas uma widget e o título da widget será o da aba.

»Se você quiser acrescentar mais abas ou mais menus em abas siga as instruções do post do Template Tabs.


APROVEITEM O TEMPLATE!

Marcadores na forma de Nuvem de Tags - Label Clouds





Este é um recurso interessante que você pode colocar na sidebar do seu blog.

Não se esqueça que seus posts precisam ter marcadores que os classificam, aí de acordo com a freqüência de postagens de um mesmo marcador no seu blog, este marcador aparecerá maior ou menor na nuvem de tags.
Clique em continue lendo para aprender a colocar a Nuvem de Tags no seu blog:

» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
1º Encontre a linha:
]]></b:skin>
2º Adicione ACIMA dela a seguinte configuração do CSS:
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:$textcolor;}
/*se seu blog não tiver a variável textcolor→substitua por um código de cor. Ex:#000000(preto)*/
#labelCloud .label-cloud li:before{content:"" !important}
Este código vai definir a aparência da sua nuvem de tags. Por exemplo se você quer mudar a cor dos links, alinhamento, etc.
3º Copie e cole o código Javascript entre as tags: ]]></b:skin> e </head>
Ficando assim:
]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


</head>

Não se esqueça:

►Substitua YOURBLOG em 'http://YOURBLOG.blogspot.com' pelo nome do endereço do seu blog.

4º Certifique-se que o comando Expand Widget Templates, na tela de edição do template, canto superior direito, esteja DESMARCADA.
Pois se ela estiver marcada o código
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

vai se expandir, então você vai ter que adicionar o próximo código do ínicio ao fim, ou seja, até a tag

</b:widget>
estar finalizada.

Portanto é mais fácil deixar a Expand Widget Templates desmarcada e procurar pelo comando:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

e substituí-lo completamente por:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Não mude nada a partir desse ponto -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

5º Clique em preview para ver o resultado.
Se der algum problema clique em desfazer as alterações (LIMPAR EDIÇÕES) e refaça os passos.

Assim a widget marcadores será na forma de Nuvem de Tags o que é: Muito bonito e útil pois sinaliza aos mecanismos de busca a suas palavras chaves mais importantes.

Atualização:17/06/09-17:14h

Fonte:Phydeaux3 com auxílio da tradução Verdinhas

Widget de Posts mais Populares e de Top Comentários




Gente acabei de ler no Dicas Blogger uma dica sobre a Widget de Posts mais Populares!
Nem acreditei! Como já procurei sobre este assunto na internet!!!
Ótimo!

A Ju do Dicas Blogger dá a dica de como fazer para colocar na sua sidebar a widget de Posts mais Populares, vai lá conferir! É um post da Amanda do Blogger Buster!

Claro que eu fui correndo né!

Lá encontrei uma dica da própria Amanda para a widget traduzida para o português pelo Ricardo Santos neste Post.

Também no blog do Ricardo Santos ele traduziu a Widget de Top Comentários, também do Blogger Buster, que indica a pessoa que mais comenta no seu blog. É uma maneira de prestigiar seu leitor que gosta do que você escreve!

Aproveitem as dicas, que eu já estou correndo colocando estas widgets aqui no Templates!

Um abraço e Tenha uma Ótima Semana!

TEMPLATES BUTTERFLY




Para começar a série de templates femininos com o tema Butterfly
Já estão prontos o Pink e o Yellow para vocês!


Clique na imagem para ampliar.










Image and video hosting by TinyPic
»DOWNLOAD AQUI«
















Clique na imagem para ampliar.













Image and video hosting by TinyPic
»DOWNLOAD AQUI«



















Para Configurar a Barra de Navegação Superior e as Abas Sobrepostas.
Clique em Layout
►Em Elementos de Página altere o que preferir;
►Em Editar HTML, na caixinha com o código do seu blog faça as alterações necessárias.
▼Clique em Continue Lendo▼

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR
Vá em Layout→ Editar HTML e encontre o código:
<div id='tabsE'>
<ul>
<li> <a href='#' title='Link 1'> <span>Link 1 </span> </a> </li>
<li> <a href='#' title='Link 2'> <span>Link 2 </span> </a> </li>
<li> <a href='#' title='Link 3'> <span>Link 3 </span> </a> </li>
<li> <a href='#' title='Link 5'> <span>Link 5 </span> </a> </li>
<li> <a href='#' title='Link 6'> <span>Link 6 </span> </a> </li>
</ul>
</div>

»Substitua # pelo endereço do link e onde está escrito Link 1, Link 2, Link3, Link5 e Link6 substitua pelo Título do link.
(Pulei o Link 4 né! Não tem problema não irá interferir em nada a configuração dos seus links.)

» Se quiser acrescentar mais links, copie uma linha como esta:
<li> <a href='#' title='Link 6'> <span>Link 6 </span> </a> </li>

E coloque abaixo da última linha de links e acima da linha </ul>

2º► COMO ACRESCENTAR AS WIDGETS NAS ABAS
Em Layout→Elementos da página→Clique nos números 1, 2, 3 e 4 para acrescentar as widgets ou editar as pré-existentes.

Atenção: Cada aba aceita apenas uma widget e o título da widget será o da aba.

»Se você quiser acrescentar mais abas ou mais menus em abas siga as instruções do post do Template Tabs.


APROVEITEM OS TEMPLATES!

O que fazer se o blogger não aceitar seu template novo!




Algumas pessoas já me escreveram perguntando se eu sabia o que fazer quando vamos trocar o template o blogger não aceita de jeito nenhum e dá uma mensagem de erro.

Isso também já aconteceu comigo várias vezes nos meus blogs de testes, para alguns consegui contornar este problema com o procedimento que estou explicando, mas outros não consegui, por isso que disse que pode não dar certo.

Vou contar aqui o que fiz para contornar este problema e deu certo com as pessoas que ensinei a fazer isso.

Aqui vai:
1º Escolha um template do próprio blog, ele aceita na maioria das vezes.

2º Se seu blog tem muitas widgets, você deve antes ir em elementos de página e apagar um por um clicando em editar→ remover elemento da página, sem esquecer de salvar os conteúdos das suas widgets antes. Veja Como salvar as widgets do seu template antigo para o novo.

3º Aí você tenta colocar o template novo. Se der certo ótimo, mas se não...
Sugiro que você crie outro blog, se não quiser perder o endereço do antigo, vá em configurações altere o endereço do atual e crie um novo com o endereço que você quer.

Espero que esta dica ajude.

Novos Templates




Hoje estive inspirada criei 2 templates que estão em fase final de produção que achei lindos.

Gostaria que vocês dêem uma olhada nestes templates e me digam o que acharam aqui nos comentários deste post.

Butterfly Pink

Butterfly Yellow

Amanhã após os ajustes finais disponibilizo-os para download.

Um abraço e boa semana a todos!

TEMPLATE CLIPS




SE VOCÊS GOSTARAM DO TEMPLATE TABS, VÃO GOSTAR MUITO DO TEMPLATE CLIPS TAMBÉM COM O RECURSO DE ABAS (Tabs em Inglês, daí seu nome)

ESTE TEMPLATE TEM:

►NA LATERAL DIREITA 2 MENUS COM ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA" OU PELO CÓDIGO HTML ACRESCENTANDO + ABAS OU NÃO;

►É UM TEMPLATE CLARO, COM UM DESIGN SIMPLES E BONITO;

►MENU DE NAVEGAÇÃO SUPERIOR QUE TAMBÉM PODE SER EDITADO ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";

►RECURSO PARA COLOCAR ANÚNCIOS ADSENSE ENTRE OS POSTS.

(VEJA AS EXPLICAÇÕES SOBRE OS DOIS MENUS EM CONTINUE LENDO)

ÚLTIMA ATUALIZAÇÃO EM 04/04/2008 ÀS 13:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE CLIPS AQUI .

Image and video hosting by TinyPic
»DOWNLOAD AQUI«

Para Configurar a Barra de Navegação Superior e as Abas Sobrepostas.
Clique em Layout
►Em Elementos de Página altere o que preferir;
►Em Editar HTML, na caixinha com o código do seu blog faça as alterações necessárias.
▼Clique em Continue Lendo▼


1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR e COMO ACRESCENTAR AS WIDGETS NAS ABAS
Image and video hosting by TinyPic
»Clique na imagem para ampliar

► Você pode inserir os links no menu superior usando uma Lista de Links. → ATENÇÃO: NÃO COLOQUE O TÍTULO NESTA LISTA DE LINKS, SENÃO FICA DESALINHADO!

►Os TITULOS das abas serão sempre o título da widget que você escolher para colocar.

ATENÇÃO
»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul: <script src='http://tpvoce.googlepages.com/tabber.js ' type='text/javascript'>;
»Hospede no local de sua preferência substituindo o LINK: http://tpvoce.googlepages.com/tabber.js no código do seu template pelo LINK fornecido por sua hospedagem;
O Link do código original é este: http://www.barelyfitz.com/projects/tabber/tabber-minimized.js caso o tpvocegooglepages não funcione
»Desta forma não haverá o risco de suas abas não funcionarem.(A não ser que você hospede muitos arquivos e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.)


2º►CONFIGURANDO AS WIDGETS DE POSTS E COMENTÁRIOS RECENTES


Em Layout→Elementos de página:
» A widget de Posts Recentes já estará aparecendo, ou não, por ser a tab ativa em "1", então clique em editar e acrescente o código como está explicado neste link: Widget de Posts Recentes .
»Se a widget de posts recentes não estiver aparecendo clique em Adicionar um elemento de página e coloque a widget que quiser.


» A widget de Comentários Recentes está na tab "2", então clique em 2 e em editar e acrescente o código como está explicado neste link: Widget de Comentários Recentes.


3º►COLOCANDO MAIS ABAS OU MAIS MENUS EM ABAS:
Em Editar HTML, na caixinha com o código do seu blog encontre:

<div id='tabsidebar-wrapper'>


<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
</div>


<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Comentários Recentes' type='HTML'/>
</b:section>
</div>


<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg3' maxwidgets='1' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>


<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg4' maxwidgets='1' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>
</div>


</div><!-- End tab1-->


<div class='tabber' id='tab2'>


<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg5' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='false' title='Sobre o Blogger' type='LinkList'/>
</b:section>
</div>


<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg6' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='Como Instalar o Template' type='HTML'/>
</b:section>
</div>


<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg7' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Política de Privacidade' type='HTML'/>
</b:section>
<</div>


</div><!-- End tab2-->


</div><!-- End Tabsidebar-->


Obs: tab1 e tab2 representam os menus com abas.

►PARA ACRESCENTAR ABAS:

É simples:
Veja que cada código class='tabbertab' representa uma aba.
☺→Então para acrescentar ABAS você deverá copiar este código base:

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg1' maxwidgets='1' showaddelement='yes'/>
</div>


e colocar no menu que desejar, lembrando sempre de alterar uma coisa:
Está vendo o código em vermelho:
tabberwidg1 ► SEMPRE QUE VOCÊ CRIAR UMA NOVA ABA DEVERÁ ALTERAR O NÚMERO 1 PARA OUTRO DESDE QUE NUNCA SE REPITAM.

→No código original eu uso de 1 a 7, então para você acrescentar outra aba deverá começar com o nº8.


Feito isso SALVE o seu código e vá em Elementos de página, lá estará o nº da aba que você criou, Adicione o elemento de página que preferir e pronto, sua aba nova já foi acrescentada.


►PARA ACRESCENTAR OUTRO MENU:
Você deve acrescentar entre os códigos:

<
/div><!-- End tab2-->
►ACRESCENTE AQUI O CÓDIGO BASE ABAIXO◄
</div><!-- End Tabsidebar-->

Este código base:



<div class='tabber' id='tab3'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg#' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab3-->

→O terceiro menu será representado por tab3.

→Irá funcionar da mesma forma para acrescentar mais abas tendo que alterar o nº(#) da tabberwidg# por um diferente. (O simbolo # representa o nº)

→ Você também terá que acrescentar um código CSS para o menu novo:


Abaixo deste código:
.tabberlive#tab2 { float:right;
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}


Acrescente este:
.tabberlive#tab3 { float:right;
}
.tabberlive#tab3 .tabbertab {
height:200px;
overflow:auto;
}


Pronto!
Se quiser, faça estas alterações e APROVEITEM O TEMPLATE!
Update em 28/07/2009

Problemas com o Internet Explorer 6




Se você usa o navegador Internet Explorer 6 deve estar tendo problemas para visualizar o Templates para Você corretamente. Ainda não sei o porque, mas estou trabalhando para resolver este problema.

Somente com Internet Explorer 6 tenho problemas até o IE7 tem colaborado.

Se alguém souber o que pode estar acontecendo e puder me falar agradeço desde já. No entanto peço desculpas aos a navegantes que usam o IE6.

Obrigada,

Áurea
************************************

Parece que depois que eu fiz este post o template regularizou com os menus em abas ao lado funcionando!

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger