Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

4/01/2010

construção de menus de uma forma bem fácil, uma vez que podemos escolher os marcadores

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

O novo Gadget (ou Widget) de Marcadores do Blogger, além da tão divulgada nuvem de tags , permite a construção de menus de uma forma bem fácil, uma vez que podemos escolher os marcadores a serem exibidos e retirar o número de posts em cada marcador apenas com alguns cliques. Para os iniciantes, que tem mais dificuldade na construção de menus, esses recursos são uma excelente opção.
O único inconveniente que continua existindo é que o Blogger dá duas opções de classificação - por ordem alfabética e por frequencia - o que limita a apresentação do menu. Quem precisa de uma classificação diferente, deve usar o Gadget de Lista de Links, mais trabalhoso, porém dá mais liberdade ao usuário.

construir um menu simples

Vamos então construir um menu simples, com pouca estilização, mas bem fácil de fazer.

A) CSS - Coloque Estilos para o Menu
  1. Primeiro vamos construir o código de estilos para seu menu, assim, logo que você adicionar o Gadget, ele já vai aparecer bem formatado em seu blog.
  2. Em Layout => Editar HTML salve uma cópia de seu template, clicando em "Baixar Modelo Completo";
  3. Deixe a caixinha "Exibir Modelos de Widgets" desmarcada;
  4. Logo ACIMA da tag ]]></b:skin>, coloque o código conforme segue, alterando-o de acordo com seu template:

    01
    /* Menu */

    02

    03
    #menu ul { /* estilos para a lista */

    04
    float: left;

    05
    width: 660px/* altere a largura conforme seu template */

    06
    clear: both:

    07
    margin: 10px auto;

    08
    padding: 12px 0 12px 0;

    09
    background: #ddd;

    10
    }

    11

    12
    #menu li { /* estilos para os ítens de lista */

    13
    float: left/* faz com que a lista fique na horizontal - não altere */

    14
    margin: 0; /* reseta valores anteriores - não altere */

    15
    padding: 0; /* reseta valores anteriores - não altere */

    16
    list-style: none; /* reseta valores anteriores - não altere */

    17
    }

    18

    19
    #menu li a {  /* estilos para os links */

    20
    padding: 10px;

    21
    background: #f2f2f2;

    22
    border: 1px solid #fff;

    23
    color: #000;

    24
    text-decoration: none;

    25
    }

    26

    27
    #menu li span { /* estilos para o link ativo (página aberta) */

    28
    padding: 10px;

    29
    background: #ddd;

    30
    border: 1px solid #fff;

    31
    color: #000;

    32
    text-decoration: none;

    33
    }

    34

    35
    #menu li a:hover {  /* estilos para o link com mouse-over */

    36
    background: #666666;

    37
    border: 1px solid #fff;

    38
    color: #fff;

    39
    }

  5. Visualize o template e salve.
B) Criando um "container" para seu menu

Agora vamos incluir uma "section" no crosscol-wrapper (pode ser em outro local, se você preferir - header, main-wrapper, etc) onde você poderá adicionar o Widget de Marcadores.
  1. Mantendo a caixinha "Expandir Modelos de Widgets" desmarcada, localize o código de seu Crosscol-Wrapper:

    1
    <div id='crosscol-wrapper' style='text-align:center'>

    2
    <b:section class='crosscol' id='crosscol' showaddelement='yes'/>

    3
    </div>

  2. Inclua o código em destaque como segue:

    1
    <div id='crosscol-wrapper' style='text-align:center'>

    2
    <b:section class='menu' id='menu' showaddelement='yes'/>

    3
    <b:section class='crosscol' id='crosscol'showaddelement='yes'/>

    4
    </div>

  3. Visualize o template e se tudo estiver ok, salve.
C) Adicionando o Gadget de Marcadores

Gadget de Marcadores

  1. Vá para Layout => Elementos da Página;
  2. Logo abaixo do Cabeçalho você encontrará o novo "container" criado, na mesma largura do Cabeçalho para Adicionar um Gadget. Clique e adicione um Gadget de Marcadores.
  3. Coloque um título apenas como referência, para você localizar com facilidade na hora de editar seu layout - iremos tirar esse título depois no código do Widget;
  4. Em "Exibir", marque a opção "Marcadores Selecionados" e depois clique em "Edit";
  5. Escolha na lista, os marcadores que você deseja colocar em seu Menu, deixando desmarcados aqueles que você não quer apresentar e clique em "Concluído";
  6. Defina se quer a "Classificação" em ordem alfabética ou em por frequencia;
  7. No segundo campo "Exibir" escolha "Lista";
  8. Desmarque a opção "Mostra o número de postagens por marcador" e salve o Gadget.

postagens por marcador

Se você visualizar seu blog agora, verá que o Widget já se apresenta em forma de Menu, mas ainda faremos mais algumas customizações, para apresentar um link para a "Home" e para retirar o título.

D) Retirar o título do Gadget e incluir um link para a "Home"
  1. Volte à aba "Editar HTML" e desta vez, marque a opção "Expandir Modelos de Widgets";
  2. Localize o Gadget adicionado (procure pelo crosscol-wrapper ou pela section 'menu')

    1
    <div id='crosscol-wrapper' style='text-align:center'>

    2
    <b:section class='menu' id='menu' showaddelement='yes'>

    3
    <b:widget id='Label2' locked='false' title='Menu' type='Label'>

  3. Primeiro iremos retirar o título do Gadget. Ele ficará visível na aba Layout-Elementos de Página, mas não será mostrado no blog. Para isso, delete o trecho em destaque:

    1
    <b:widget id='Label2' locked='false' title='Memu' type='Label'>

    2
    <b:includable id='main'>

    3
    <b:if cond='data:title'>

    4
    <h2><data:title/></h2>

    5
    </b:if>

  4. Agora vamos colocar no menu, um link para a Home Page de seu blog. Procure o código (conforme abaixo) e acrescente a linha destacada:

    1
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

    2
    <b:if cond='data:display == &quot;list&quot;'>

    3
    <ul>

    4
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    5
    <b:loop values='data:labels' var='label'>

    6
    <li>

    7
    <b:if cond='data:blog.url == data:label.url'>

  5. Visualize seu template e se tudo estiver ok, salve.

Este é um exemplo para menus horizontais bem simples. ou veja este próximos posts onde ensino a fazer menus com mais estilização com imagens.

menus horizontais

 

Bookmark and Share

0 comentários:

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias