quarta-feira, setembro 10, 2008

Como aumentar a largura dos textos do blog



.

Oi! Tudo bem?

Anote aí:

Antes de qualquer modificação em seu blog, faça um backup do Html dele. Assim se alguma coisa der errada, você repõe esta cópia e o Blog volta com a configuração anterior.

Tanto para fazer o backup quanto modificar as configurações das linhas de programação do Blog o caminho é o mesmo: Painel/Layout/Editar html.

Backup: clique com o mouse em um ponto qualquer entre as linhas de de configuração, depois selecione com um ctrl+a, copie com ctrl+c. Em seguida abra o programa "bloco de Notas" em Iniciar/programas/acessórios/Bloco de Notas - cole ali com um ctrl+v e salve com o nome do seu blog. Backup pronto, agora vamos mexer linhas nas configurações do seu blog.


Esta postagem fala de dois tipos de Blogspot. 1) O mais recente (2010) quero orientar para usar o "modelo" Travel. Ele pode receber várias configurações. Os outros não. Também este é mais leve para uso do leitor. Para mexer nas configurações dele, vá em design e depois em layout. Se já é mais "expertinho" siga as informações da figura abaixo. Quando você reduz as medidas de 360px para menos, por exemplo para 240px, você vai alargando o "main" ou a caixa de textos.



Mas se seu blog ainda é dos modelos antigos, as medidas a serem mexidas aparecem aqui abaixo.

Mas tome nota: estas medidas são dos blogs de modelos antigos.


BLOG MODELO ROUNDERS 3

Recorte das linhas aonde acontece as modificações.


#outer-wrapper {
width:960px; .........................................A largura anterior era 740px. Aumentei em 220px
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:685px;...................................... Era 485px, aumentei em 200, foi para 685px
float:$startSide;
background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("http://www1.blogblog.com/rounders3/corners_main_top.gif") no-repeat $startSide top;
padding:10px 0 0;
}

#main {
background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y $startSide;
padding:0;
width:685px; EXCLUA TODAS ESTAS CINCO LINHAS EM VERDE
}


#sidebar-wrap {
width:250px; ................Muitos pensam que o box DIREITO vai sumir quando aumenta o corpo
float:$endSide;......................do texto. Engano. Eu ainda aumentei o box de 240 para 25opx.
margin:15px 0 0; ........................ O pulo do gato é que , quando aumento o corpo de textos ele
font-size:97%;............................... desloca para a esquerda. O box fica na direita.
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.main .widget {
margin-top: 4px;
width: 668px; .....................................aqui também aumentei em 200. Era 468px
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 684px; .................................E aqui o último lugar onde aumentei em 200. Era 484px.
}


#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top: px; ..............para ajustar a altura do banner eu zerei esta medida. Era de 8px.
width: 0px; ..........................e para ajustar a largura do banner eu criei esta linha.
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 px px; e para terminar o ajuste tambem zerei as posições desta linha.



Assim que fiz tudo isto, o resultado você pode ver aqui: T e s t e

Em teste, você vai ver um banner que eu criei usando dois programas: o Paint que todo Windows tem e um Programa de Desenho Gráfico bem leve chamado Paint Shop Pró Versão 9

Pode obervar ali, que o banner está superajustado, o corpo de texto uns 8cm mais largos e o Box quase um centímetro mais largo. Ainda não consegui tirar as pequenas marcas pretas dos antigos cantos. Espero que alguém descubra este detalhe e me ensine. He he he!

Espero que tenha gostado.


Anote aí o endereço do meu blog principal: www.olharcristão.blogspot.com.
Meu email é cruzue@gmail.com
E gosto de escrever mensagens cristãs em: www.olhar-cristao1.blogspot.com




.

10 comentários:

Márcia disse...

Paz do Senhor!!!!

João, Eu estou mudando a largura dos texto do blog, aproveitei pra mudar o layout, eu escolhi o modelo: Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com

Só que o meu banner ficou muito distante da margem, e nesse modelo no html eu não acho com as mesmas palavra a tag: "padding-top: px;" para que eu possa zerar e aproximar o banner. Fiz um curso de html a muitos anos atrás, nunca trabalhei com html, estou muito depraticada, os "padding" que achei cheguei a zerar alguns mais não consegui aproximar. Você pode me ajudar?

Desde já obrigada.

Profº. Eric Frantto disse...

Muito bom! Boa notícia:
VOCÊ ACABA DE GANHAR UM SELO! Passa no "( Óculos e All Star )"para pegá-lo! Grande abraço!

Taperopolis disse...

Fiz como vc orientou, só que não consegui eliminar a linha azul, que curiosamente meu blog tem o mesmo layout do seu modelo. Mas vejo que no seu blog não tem.

Me ajude a eliminar esta linha, por favor.

www.taperopolis.com

Joao Cruzue disse...

.

Caro Taperopolis,

Visitei seus dois Blogs e não vi nenhuma linha azul.

Mas, criei um página Índice em
http://arq-comoblogar.blogspot.com

Com dicas ordenadas e numeradas.
Quem sabe você vai achar o que procura na dica nº 18?

Abraço do João.


.

Eva disse...

Super obrigada!

Suas dicas foram preciosas. O único problema é que ainda fica um "resto" arredondado marcando a antiga largura do texto...

Mas já está ótimo!

Gisele Freire disse...

Olá João!
procurando quem poderia ajudar com medidas, encontrei na busca do google tua receita.
Ando tentando mudar o meu blog de textes, sou fotógrafa e queria ter o campo de postagem para eu poder postar minha fotos maiores. Tenho o modelo MINIMA do bloguer, consegui a muito custo botar um video no cabeçalho, muito bem, consegui, mas queria agora colocar no campo de post uma medida mais ou menos parecida com a do video que tá lá, já tentei mil alternativa s e não consigo..., Será que vc poderia me ajudar?
Aqui vai o link dos meus testes http://giploc.blogspot.com/
Obriga de qualquer maneira
Gisele

Pastora Fernanda disse...

João, mexi no tamanho do meu blog de acordo com as instruções,mais meus gadget leterais estreitaram-se e não consigo arruma-los pode me ajudar??

MARCIO VENERI TKD disse...

oi meu marcio e não consigo aumentar o tamanho dos numeros de paginas,fui até na opção q diz paginas e aumentei p/ 6 e nã omudou nada e qando cheguei na opção atribuição percebi q não conseguia rolar a pagina com o mouse 3 o q eu faço pois qero colocar arqivos para donwloads e mais fotos co meventos e comentarios se tiver alguem disposto me ajudar por favor eu agradeço.

Artefatos de Concreto disse...

Eu queria saber como aumentar as paginas do meu blog. elas estao na forma horizontal, e gostaria de aumentar os espaços de uma para outra para cobrir o blog todo !!

agradeço se puder me ajudar.

http://concrearte.blogspot.com/

Maria de Ferro disse...

Olá,
O meu template é "Simples" e foi criado em 2015, esses códigos também funcionam? Não encontro esses códigos no blogger... ;-(

Related Posts Plugin for WordPress, Blogger...