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

PARABÉNS AO TEMPLATES PARA NOVO BLOGGER!





Hoje dia 29/03/2008 é aniversário do blog da minha amiga Ariane, o .
Um blog excelente que tem muitos tutoriais interessantes e úteis.
Graças ao Templates para Novo Blogger eu aprendi muita coisa sobre o blogger, facilitando o meu estudo sobre a edição de templates, o que me possibilitou criar o Templates para Você.

Obrigada Ariane,
Por tanta dedicação, bondade e desprendimento ao nos ensinar tanta coisa boa!

TEMPLATE TABS 01




PARA QUEM GOSTA DE ECONOMIZAR ESPAÇO E NÃO DEIXAR O BLOG POLUÍDO, FIZ O TEMPLATE TABS 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;

►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 22/08/2008 ÀS 23:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE TABS 01 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.
Mas não se esqueça:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o post até o fim e tenha certeza de ter entendido.
▼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;

»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 Nº → FAZENDO COM 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
</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!

TEMPLATE NICE-02




ESTA É UMA VERSÃO ESCURA DO 1º "TEMPLATE NICE!" COM AS MESMAS CARACTERÍSTICAS

ESTE TEMPLATE TEM:
►O MENU COM 4 ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►MENU DE NAVEGAÇÃO SUPERIOR QUE TAMBÉM PODE SER EDITADO ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►CAIXA DE BUSCA;
►E ESPAÇO PARA COLOCAR ANÚNCIOS ADSENSE LOGO ABAIXO DO MENU SUPERIOR (SUGESTÃO DE FORMATO: Cinco blocos de links- Linha horizontal 728x15).

(VEJA AS EXPLICAÇÕES SOBRE OS DOIS MENUS E A CAIXA DE BUSCA EM CONTINUE LENDO)

ÚLTIMA ATUALIZAÇÃO EM 18/03/2008 ÀS 21:00h

Clique na imagem para ampliar.

VISUALIZE O TEMPLATE NICE AQUI .

Image and video hosting by TinyPic
»DOWNLOAD AQUI«


Para Configurar a Barra de Navegação Superior, O Menu de Abas Sobrepostas e a Caixinha de Busca.
Clique em Layout►Editar HTML e na caixinha com o código do seu blog faça as alterações necessárias.
1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR

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!
2º►CONFIGURANDO A CAIXINHA BUSCA DO BLOG
UPDATE: A CAIXA DE BUSCA FOI SUBSTITUIDA PELA GADGET DE BUSCA DO GOOGLE - 27/07/2009
3º►CONFIGURANDO OS TÍTULOS DAS ABAS SOBREPOSTAS
→Encontre o código:
<!--Start of the Tabmenu -->
<div id='stylefourcontainer'>
<div id='stylefour'>
<ul>
<li><a class='tabactive' href='#' id='tablink1' onclick='return false;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("1");' title=''> CONFIGURAR ABAS </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("2");' title=''> DICAS </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); swichtabs("3");' title=''> ARTIGOS </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); swichtabs("4");' title=''> COMPATIBILIDADE </a></li>
</ul>
</div></div>
<!--End of the Tabmenu -->
»Altere as palavras CONFIGURAR ABAS, DICAS, ARTIGOS, COMPATIBILIDADE, pelos títulos das Abas de acordo com sua necessidade.

»Para utilizar o conteúdo do menu de abas sobrepostas siga esta imagem que está contida na primeira aba:


APROVEITEM O TEMPLATE!

COMO RETIRAR A FIGURA DO CABEÇALHO DO TEMPLATE NICE




Se você gostou do template Nice! e quer tirar a imagem de flores do seu cabeçalho à direita clique em Continue lendo...

Encontre o código HTML do seu template:
#header-wrapper {
background: url(http://img126.imageshack.us/img126/7379/h062ex9.jpg) top left;
width:950px;
height:180px;
margin:0 auto 0px;
}

Para retirar a imagem apague o endereço em vermelho.
Pronto, você pode retirá-la ou trocá-la por outra da sua escolha. Mas, preste atenção à altura da imagem que é de 180px se a sua imagem for maior não se esqueça de mudar a altura do seu cabeçalho que é a linha que está em azul acima.


Hack Leia Mais com Posts Expansíveis




Há algum tempo indiquei aqui o link para o tutorial da minha amiga Cláudia sobre Posts Expandíveis.
Neste post a Cláudia disponibiliza um arquivo do word com as instruções para que os posts expandíveis funcionem.
Vou transcrevê-lo aqui a pedidos com algumas adaptações na tentativa que fique mais fácil para as pessoas poderem fazê-lo em seus blogs.

A PRINCIPAL DIFERENÇA DESTE HACK DE ALGUNS "CONTINUE LENDO" É QUE VOCÊ PODE CLICAR EM "CONTINUE LENDO" OU "LEIA MAIS" E NÃO TER QUE ABRIR O POST PARA LER O RESTO, ELE SE EXPANDE, FICANDO OS OUTROS POSTS VISÍVEIS PARA VOCÊ.

Falando nisso clique em Continue Lendo para aprender como fazer!
Não deixe de ler o tutorial até o fim e ter certeza de ter entendido, copiar e colar sem pensar não dá certo!

HACK PARA POSTS EXPANSÍVEIS
(Tradução Claudya R. – Fonte:http://beaultifulbeta.blogspot.com - Adaptação Áurea Ribeiro)

1º Baixe e salve seu tema, assim você pode voltar atrás se algo der errado.

2º Ache as tags
]]></b:skin> e </head>

Adicione o código javascript:
<script type='text/javascript' src='URL do Arquivo Java' />
entre estas tags.

OU

» Baixe O ARQUIVO JAVA, hospede no local de sua preferência- Sugestão DROPBOX -, anote a URL e substitua a URL do Arquivo Java pela sua. Em seguida cole o código abaixo antes da tag </head> do seu template, alterando a localização do arquivo hospedado anteriormente:

Desde que fique sempre abaixo de ]]></b:skin> e acima de </head>

Salve seu template clicando em SALVAR MODELO
Marque a caixinha ►

3º Encontre a includable de nome "post" procurando pela linha:

<b:includable id='post' var='post'>→Selecione desde esta linha acima até a linha:

<div style='clear: both;'/> <!-- clear for photos floats -->


→Substitua pelo código em vermelho abaixo:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>Leia Mais...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>Resumo...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Salve seu template clicando em SALVAR MODELO

Obs: Você pode substituir os dizeres Leia mais... e Resumo... (destacados em verde), da forma que quiser. Por exemplo como fiz aqui, Continue lendo... e Voltar.

4º Vá em Configurações ► Formatação ► desça a tela e no fundo, você encontra o Modelo de Postagem (text box/caixa de texto) para especificar o "Post template". Copie/cole o código abaixo, nessa caixa de texto, e clique em Salvar configurações.

Digite seu resumo aqui
<span id="fullpost">
Digite o resto do post aqui
</span>


De forma que fique como esta imagem:
Image and video hosting by TinyPic

Agora, se você criar um novo post, ele mostrará exatamente onde digitar o resumo e onde ler o resto do post. Esse hack só funciona nos posts após o código ter sido instalado, se quiser nos antigos, terá que editar os posts.

Post Atualizado em 16/06/09 - 23:00h

Se o arquivo Javascript hospedado em um site externo não funcionar você pode incorporar o código java no HTML do seu blog desta forma:

Copie este código abaixo e cole entre as tags ]]></b:skin> e </head> da mesma forma que a explicação acima:
<script type='text/javascript'>
//<![CDATA[
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");

if (entry.content) {
comment = entry.content.$t;
} else if (entry.summary) {
comment = entry.summary.$t;
}

var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}
document.write('Widget sponsored by:<br/><a href="http://bvibes.com"><img src="http://fbvibes.com/templates/yget/images/vibes_logo.png"/></a><br/>');
} //]]></script>


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