Translator
Google-Translate-ChineseGoogle-Translate-Portuguese to FrenchGoogle-Translate-Portuguese to GermanGoogle-Translate-Portuguese to ItalianGoogle-Translate-Portuguese to JapaneseGoogle-Translate-Portuguese to EnglishGoogle-Translate-Portuguese to RussianGoogle-Translate-Portuguese to Spanish

Pesquise no Google

segunda-feira, 23 de maio de 2011

Aumente A largura do Template do Seu Blog Sem Medo

Bom  melhor maneira de aprender é mexendo.
Então sem medo  de  errar,e de uma forma simples, vou ensinar aqui  a ajustar as medidas  do seu blog.

"Para quem esta começando agora sugiro que  comece a  se dedicar mais ao seu blog conhecendo tudo que  sua plataforma , seja O BLOGGER ou WORD PRESS possa lhe oferecer."
Como utilizo o Blogger essa dica vai direcionada para ele!


  Inicialmente Não tenha medo de mexer no HTML(código Fonte) do seu blog. Para assegurar que  você não  perderá   nada o blogger fornecer a opção de fazer backup do blog salvando o modelo completo no seu computador.

  _______________Backup________________

Backup ► Nesta mesma página la em cima  vá em DESIGN , em seguida em editar HTML. Você verá 

Fazer backup / Restaurar modelo 

Logo aqui em Baixo  Antes de editar o modelo, é recomendável salvar uma cópia do mesmo. Baixar modelo completo

Clique em Baixa Modelo Completo e ele será salvo no seu computador.Depois poderá restaura-lo se quiser.

___________________VISUALIZAR_____________________


Outra Forma de Evitar que Seja feita alguma Alteração indesejada no seu Blog, antes de salvar, utilize do botão VISUALIZAR , para verificar como ficará após salvo.

















Fazendo isso poderá mexer sem medo em todo seu HTML e deixa seu Blog cada vez mais  sua cara.


__________MODIFICANDO DIMENSÕES DO TEMPLATE__________

Ainda  em Editar HTML, selecione logo a baixo a  opção de Editar modelo de HTML selecione  a caixinha que diz Expandir Modelos de Widegets.

Editar modelo

Edite o conteúdo do seu modelo. Saiba mais                         


"Ao se disponibilizar  para a edição! Dê  um F3 
e aparecerá uma pequena  janelinha ' 

(Essa janelinha no explore aparecerá diferente.do lado esquerdo da tela.)








Digite ou copie e cole esse trechinho:

<b:template-skin>




E imediatamente aparecerá selecionado no seu modelo  a localização
 do trecho do código!






  










Justamente nesse trecho que devemos mexer 
para ajustar a largura do blog:


<b:template-skin>                              
     1 <b:variable default='930px' name='content.width' type='length' value='1000px'/>
     2<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
      3<b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

















Observe o Ajuste feito:
-------------------------------------------------------------------------------------------------------------
<b:template-skin>                              
     1 <b:variable default='1000px' name='content.width' type='length' value='1350px'/>
     2 <b:variable default='0' name='main.column.left.width' type='length' value='300px'/>
     3 <b:variable default='360px' name='main.column.right.width' type='length' value='300px'/>
----------------------------------------------------------------------------------------------------------------------


 Linha 1  AQUI REGULAMOS O TAMANHO GERAL DO LAYOUT DO BLOG,  Onde conseqüentemente
 aumentará o tamanho da postagem.
  AS linhas 2 e 3 AS COLUNAS LATERAIS DO BLOG.. Onde fará que  as laterais se aproximem mais  
da largura da exata da página

_______________________________________________________________________
veja COMO FICOU O MEU:





ANTES











DEPOIS





__________________________________________________________________________
Mexa sem medo vá ajustando ate obter o tamanho mais adequado ao seu gosto!
Lembre-se de testar os tamanhos em mais de um navegador, sugiro que teste 
no explore !
Percebi que diferencia a visualização do explore pro Chrome.













Salve o modelo e Curta o Novo DISIGN =P



Não se Assuste!  quando for na pagina Design! Ele ficará assim ,como na foto abaixo, mas é justamente
 porque foi alinhado.

Espero que tenha ajudado
Fiquem com Deus!
Não esqueça de deixar seu comentário!
Dúvidas ou sugestões na pagina de contato!


Mais Dicas Blog

4 comentários:

  1. Ajudou bastante, obrigado.

    ResponderExcluir
  2. Não consegui achar o codigo no html :/

    ResponderExcluir
  3. Foi muito útil esse tutorial, estou muito satisfeita e agradecida.
    https://beijouva.blogspot.com.br/

    ResponderExcluir

Poderá Gostar Também

2leep.com

Mercado Livre