7 de mar de 2013

Colocando um gadget ao lado do cabeçalho


 Então, depois de ter postado aquele tutorial de como adicionar gadgets no cabeçalho, pediram um tutorial de como colocar um gadget ao lado do cabeçalho.
 Este tutorial foi pego no Garotas Cupcake e deve ser lido com MUITA atenção para dar certinho.
 Lembrando que é sempre preferencial já ter uma noção básica de códigos de HTML e CSS.


1° Passo - Editar a largura e posição do cabeçalho
 Primeiramente, siga para “Design” => “Editar HTML” e baixe uma cópia de segurança. Sem marcar a caixinha “Expandir modelos de widgets”, encontre algo como: #header { . Logo depois dessa linha cole: width:58%;float:left;ficando assim:
#header {width: 58%;float:left; A parte em verde, representa o alinhamento do cabeçalho, caso queira na direita coloque “right” no lugar de “left”, caso contrário, deixe como está.

2° Passo - Adicionando a coluna 
Para adicionar a coluna, encontre a linha ]]</b:skin>, e logo ANTES dela, cole o seguinte código:
#column-header {width:38%;float:right;clear:both;}
ATENÇÃO: o texto marcado, em verde, representa o alinhamento da coluna, portanto, se você colocou “left” no cabeçalho, deixe como está, caso contrário, mude o “right” para “left”.

3° Passo - Adicionando a seção
Resta agora adicionar a seção para o funcionamento da coluna, para isso, encontre a linha
 <div id='header-wrapper'> 

Logo DEPOIS dessa linha, cole o seguinte código:
<b:section class='column-header' id='column-header' maxwidgets='2' showaddelement='yes'/>
O texto marcado em vermelho, representa o numero de gadgets que cabem na coluna, altere de acordo com a quantidade de widgets, que você quer colocar na coluna.
Salve o modelo.

4° Passo - Adicionando widgets
Para adicionar gadgets, siga para “Design” => “Elementos da página”. Lá você poderá ver a coluna para adicionar widgets. Veja a imagem abaixo: Como-colocar-uma-barra-de-widgets-ao-lado-do-cabeçalho-do-Blogger

4 comentários:

  1. Adorei o tutorial, eu não sabia como usava, mais o cabeçalho pode ficar da largura normal e o gadget ficar pro cima?
    beijos

    ResponderExcluir
    Respostas
    1. Lola, não sei, eu acho que não porque se você não colocar essa parte aqui que é editando a largura->

      width:58%;float:left; ficando assim:
      #header {width: 58%;float:left

      Não dá certo :/ Mas até agora o que vi foi que não mudou muito o cabeçalho não, é que como o gadget vai ficar ao lado dele, a única coisa que você tem que fazer é um cabeçalho menor ^.^

      Excluir
    2. Eu não consegui :( fiz tudo direitinho mais nao apareceu a opção de criar o gadget !

      Excluir
    3. Jully, esse tutorial foi antes de mudarem os códigos de HTML do bloggeer, então pode não sair perfeitamente e também alguns tutorias não funcionam em alguns modelos de blogger.
      Tem outro método de colocar também, irei posta o segundo método logo ^.^

      Excluir

Não saia sem comentar!
Comentando vocês nos incentiva a continuar postando e podemos saber de sua opinião quanto ao post e/ou o blog!

OBS: Por favor. Vamos manter a postura.
Sem xingamentos com palavras de baixo calão