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

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
TEMPLATE CLIPS TEMPLATE CLIPS Reviewed by Áurea on 4/04/2008 Rating: 5

8 comentários:

  1. I'm not able to make new menu! When i do what u explain in the first one disappears the numbers, anyway i like clips very much. Thanks

    ResponderExcluir
  2. Oi, gostaria de poder criar um blog com este tipo de Templates, mas não consigo, então, o que fazer ? saberia me ajudar?
    Agradeceria,
    Mario Fernando

    ResponderExcluir
  3. I would like to use CLIPS but I can't understand the language. Could anyone please translate to English? :(

    ResponderExcluir
  4. Adorei o tema....sera que eu consigo mudar de tema e colocar todas as minha widgets no novo????
    A é...a imagem de sidebar vou mudar ja tenho logo propio eeee
    Mas curti mesmo o tema, é simples, em abas..por que não consegui meesmo colocar abas no meu e tem uns detalhes lindos...e tava querendo algo simples mais bonito e esse é assim, detalhes em vermhlo são otimos sempre...
    Agora, se o no tema da Nice as abas ficassem do aldo direito iria usar aquele,sera que tem como por as abas do aldo direito?
    Abraço e mais uma vez;
    Parabens pelo otimo blog

    ResponderExcluir
  5. Por favor me ajude. Eu ja baixei e coloquei em meu blog esse templaste mas ele nao esta ficando em abas! Porque?
    Dê uma olhada e verifique.
    Obrigado pela atenção

    ResponderExcluir
  6. Renan,
    Fiz uma atualização aqui no post para que suas abas funcionem, assim como de todos os que baixarem este template.
    Está no primeiro passo de como utilizar as abas.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.