Aplicar estilos as páginas estáticas no Blogger - Mundo Blogger
Você está em: Início 1 Postagens 2 Tutoriais Blogger 3 Aplicar estilos as páginas estáticas no Blogger 4
Postagens Tutoriais Blogger 06/03/2010 Vanessa S.
Aplicar estilos as páginas estáticas no Blogger
Desde que o Blogger implementou este recurso, muitos usuários passaram a utilizá-lo, porém, a grande maioria se depara com a dificuldade de fazer com que suas páginas estáticas se apresentem de forma diferente das demais páginas, já que, por padrão, as páginas estáticas se apresentam de forma semelhante às páginas de postagens.
A única diferença é que as páginas estáticas não aparecem a data, o que facilita ao usuários, já que a maioria, antes da ativação deste recurso, tinha que criar um post e fazer um macete colocando uma data bem antiga.
Infelizmente, ainda não há uma maneira "oficial" de aplicarmos estilos a elas, entretanto, podemos aplicar estilos CSS para que as páginas apresentem maior largura, sem sidebar, sem footer, ou o que você achar que não deva aparecer em suas páginas estáticas.
Neste tutorial você verá como proceder para deixar as suas páginas estáticas estilizadas de acordo com sua preferência.
Vale lembrar que, antes de mais nada, você deverá saber Como criar Páginas Estáticas no Blogger, para somente depois, aplicar os estilos.
É necessário também que você esteja familiarizado(a)e saiba como identificar os trechos correspondentes à Área total de Postagem com saiba a medida exata da largura que você quer que sua página estática tenha, caso queira que ela se apresente de forma mais larga, ocupando toda a área da coluna total da postagem, por exemplo.
No painel do Blogger, acesse o menu "modelo >> Editar HTML >> Expandir modelos de widgets".
<!-- Estilos das páginas estáticas Inicio -->
.blog-pager, #blog-pager, .post-footer, .post-header, .feed-links, .sidebar, #sidebar-wrapper,#comments,.footer-outer, #footer-wrapper { display:none;}
#main-wrapper{width: 950px; float:none; margin: 0 auto;}
.main-outer{width: 950px; float:none; margin: 0 auto;} /* designer de modelo*/
.post{width: 900px;margin: 0 auto;}
.post-outer{width: 900px;margin: 0 auto;padding:20px;} /* designer de modelo*/
<!-- Estilos das páginas estáticas Fim -->
No código acima, todos os elementos que se encontram na 1ª linha não aparecerão nas páginas estáticas. Tudo o que você quiser OCULTAR em suas páginas estáticas, deverá estar contido no código, as classes(.) ou id(#) e sempre separando os elementos por vírgulas. O comando "display:none" serve para ocultarmos elementos.
Note que no código, as páginas estáticas se apresentarão da seguinte forma:
sem coluna lateral – #sidebar-wrapper (=templates mínima), ou .sidebar(=designer de modelo).
sem links de navegação postagens antigas e recentes – .blog-pager (=designer de modelo), ou #blog-pager(=templates mínima).
sem links de feed ou postagens ATOM(.feed-links),
sem coluna footer – #footer-wrapper(=templates mínima) ou .footer-outer(=designer de modelo).
sem rodapé na postagem(.post-footer).
A coluna de postagem – .post(=templates mínima) ou .post-outer (=designer de modelo) – ocupará uma largura total de width:900px.
A coluna total da área de postagens(#main-wrapper e .main-outer ) ocupará uma largura de width: 950px.
Não esqueça que você deve editar a largura de acordo com a largura do seu template.
Nos templates Designer de Modelo,a coluna total da área de postagens está representado por: .main-outer, e a área de postagem está representado por .post-outer, no código acima, eu inclui os 2.
Caso queira, acrescente mais elementos para ficarem ocultos em suas páginas estáticas, de acordo com os elementos contidos em seu template, mas sempre incluindo-os na 1ª linha, separando cada elemento por vírgula.
E não se esqueça de editar os valores de width que estão no código, pois os valores que acrescentei servem apenas como exemplo.
Recomendo que você leia o artigo: Elementos Básicos do Blogger e suas variáveis para conhecer mais sobre algumas variáveis, as principais e as mais usadas no Blogger.
Artigo atualizado em jun/2012.
Efeito Sombra nos Textos (Text-shadow)
A propriedade CSS Text
Sou nova no "mundo"blogger,criei um blog mas está
mal…uma das coisa mais importantes que quero saber é como faço o resumo do meu blog(links) para aparecer abaixo do nome e descrição do blog quando pesquisar na internet.Como você fez no seu blog,ver abaixo.
https://www.mundoblogger.com.br/Partilhar
de Vanessa S. – em 575 círculos do Google+ – Mais de Vanessa S.
16 nov. 2012 – Templates,Tutoriais e dicas sobre como criar e personalizar seu blog no Blogger.
PopUp para curtir página do … PopUp para curtir página do facebook com timer … como …
Gadget Like box e twitter … Sabemos a importância da utilização das redes sociais na …
Aqui você encontra a lista de todos os tutoriais publicados no …
Os templates disponíveis nesta galeria são gratuitos e foram …
Como saber tudo sobre Feeds e
Esse artigo é um guest post escrito por Gustavo Freitas. Ele é …
Um blog necessita possuir qualidade no conteúdo, e …
Mais resultados de mundoblogger.com.br »
30/11/2012 às 23:30
O Kevin publicou um tutorial ensinando a configurar o Google autoria. Dá uma lida aqui:
06/10/2012 às 23:46
Parabéns por todas as suas matérias publicadas aqui no Mundo Blogger.
Tem me ajudado muito. Muito Obrigado!
Simplesmente parabéns, não apenas por esta, mas por todas as suas matérias publicadas. Tem me ajudado muito. Obrigado!
Eu tentei tirar a sidebar do blog e tive exatamente o mesmo problema da Vládia, também usando o Awesome Inc.
A sidebar sumiu mas o espaço ficou vazio, a coluna de posts com a mesma largura e o texto indo para fora dela.
Daí eu comecei a testar uns macetes e o que deu certo foi o seguinte código entre as tags STYLE dentro da condicional:
.column-center-inner {width: 1000px; float:none; margin-left: -300px;}
.sidebar {width: 0px; visibility: hidden; display: none;}
#Blog1 {width: 970px;}
Defini a largura da coluna de postagens para a largura total do blog, e como minha sidebar ficava à esquerda, usei a boa e velha margin-left negativa para empurrá-la para cima, enquanto escondia a sidebar propriamente dita com display:none, visibility:hdden e width:0px (coloco tudo de uma vez que é a garantia de que esconde MESMO haha), e pra arrumar o probema do texto saindo para fora de onde devia, defni a largura direto onde interessa, a área total das postagens (isso redefiniu inclusive a largura do pager, aquela área que tem os links de posts mais antigos e recentes, para a mesma da coluna de postagens).
Problema super resolvido!
Escrevi um monte de coisa errada no comment anterior.
Correções: usei margin-left negativa para empurrar a coluna de posts PARA A ESQUERDA, não para cima x-x
Erros de digitação: visibility:HIDDEN – DEFINI e PROBLEMA /x-x
Teclado me traindo D:
Héric Moura disse:
21/07/2012 às 17:14
Eu gostaria de tirar também os gadgets das paginas estáticas, mas n sei como
Mude disse:
10/06/2012 às 17:18
Eu acabei fazendo uma tela de abertura em meu blog e a página principal acabou que virando a imagem de entrada dele. Estou usando uma página estática modificada para postar, mas a página não mostra os botões "recente" e "antigo" e só mostra o botão "início". Tem como fazer essa página mostrar esses comandos?
09/06/2012 às 2:24
Curti muito seu blog, estou usando muitas de suas dicas/turorias para fazer meu blog! Parabéns e sucesso sempre!
desculpa estar te enchendo de perguntas, mas poucos metablogs tem explicações tão bem feitas. é possível retirar só a sidebar da direita ou só a da esquerda?
07/06/2012 às 22:54
É possível ocultar qualquer coluna sidebar, desde que vc identifique no seu template qual é o trecho referente a cada coluna para incluir no código que eu publiquei neste tutorial.
08/06/2012 às 0:02
oi Vanessa. Eu optei por retirar o elemento, em vez da coluna sidebar toda. então segui teu tutorial para retirar elementos da página, mas estava dando erro (dizia que o código estava fora da sessão), então mudei e coloquei a condicional depois de "includable" e fechei antes de "/includable". deu certo em partes. o elemento (que são os Marcadores), estão aparecendo só na página inicial como eu queria, mas nas estáticas aparece o background dele, uma faixa branca. Já mexi e remexi e não sei como retirar o background do gadget dos marcadores das páginas estáticas. Tem alguma ideia?
08/06/2012 às 0:41
Vládia, eu torno a repetir: Não há como eu te ajudar, pois não tenho como saber o que ocorre no seu template.
Não sei o que houve. coloquei tudo, mudei as larguras, mas o texto fica alinhado à margem esquerda da zona de postagem e a mesma não muda de tamanho. só os itens que desaparecem. então o texto fica da área de postagem para a direita do blog. Uso o modelo Modelo Awesome Inc. Percebi também que não tem respostas suas nos comentários, ainda irá responder o blog? Também queria saber como retirar os títulos das página estáticas. aguardo.
05/06/2012 às 4:31
Vládia, este tutorial foi criado em 2010 e foi baseado nos modelos de templates mínima, pois não existia designer de modelo. Entretanto, hje eu inclui alguns trechos de códigos do designer de modelo. Ocorre que alguns trechos podem variar dependendo do modelo de template. Não há como eu informar precisamente o código correspondente a cada trecho existentes nos templates designer de modelo. Os trechos que eu inclui retirei do modelo "Simple".
07/06/2012 às 18:20
Vanessa, tira uma dúvida: qual a diferença entre área total de postagem e coluna total da área de postagem? No caso, se o meu cabeçalho possui 898px e quero que fique tudo alinhado a ele devo colocar a coluna total da área de postagem com 898 ou a área total de postagem???
07/06/2012 às 23:00
Leia este artigo para entender melhor a diferença entre as colunas:
Personalizar Área total de Postagem
14/03/2012 às 10:58
Muito bom, estava procurando por essa solução há tempos!
clebersonweb disse:
29/01/2012 às 3:18
Era isso que esta procurando, mas tem um porem:
Tipo eu coloquei o código, ajustei as larguras, mas o conteúdo do post fica fora da pagina, teria como me alerta o que eu to fazendo de errado?
Não entendi muito beem ! Como se tira a barra lateral das páginas do Blogger, é só isso que eu quero saber !
13/01/2012 às 18:11
Ola amiga, consegui modificar as páginas estáticas do meu blog, obrigado, continue o bom trabalho pois está ajudando muito parabéns pelo seu lindo blog, um grande abraço até mais.
10/07/2011 às 10:26
Deve ter havido mudanças internas no blogger porque tem 1 semana,que,estou tentando mudar as paginas estaticas do meu blog,e nada ! Simplesmente a sidebar some com os widgets mas o espaço continua,e a area do .post e .main permanecem com a mesma largura.
Ja mudei o nome das classes,troqui . Por # e nada!
Ai viciooo!
Continuo tentando nenhum dos blogs que ajudam blogar tem conseguido arrumar ou solucionar o prolema.
Meu domingoooo…
Clau, tenho uma duvida não se é possivel fazer, queria trocar o titulo da pagina estática por uma Imagem. é possivel?
02/04/2011 às 0:36
Estou como um pequeno probleminha, quando ponho esse código ele funciona normal, mas ele tras minha coluna dos post para o canto esquerdo.
Como faço pra ela se manter centralizada?
esse blog ta me ajudando muito ^^ vlw.
Muito boa a dica Clau, obrigada!
Luccas G. disse:
07/03/2011 às 23:23
Usei isso no meu bloh, mais a area do #main-wrapper{width: 50px; float:none; margin: 0 auto;}
não está se estendendo ao todo do blog como no seu .. tipo aonde fica as widgets fica normal mais sem nada e a parte colorida do mundo não se move, ja coloquei todos os valores e não muda, o .post mudou certinho
28/02/2011 às 1:25
Batalha Vips
Fico feliz que tenha gostado. Obrigada pelo comentário !
Batalha Vips disse:
27/02/2011 às 21:37
Otima dica, obrigado Clau estava quero fazer isso no meu Blog.
20/02/2011 às 19:15
20/02/2011 às 1:43
Valew! Muito bom tutorial, Gostei mesmo!
20/01/2011 às 2:05
jornalismoinfocus
valeu pelo aviso. O blog já foi denunciado 😉
05/01/2011 às 10:52
Gosto muito do site, por isso queria avisar de um blog que acho que está plagiando seus posts.
http://turmadobug.blogspot.com
jornalismoinfocus disse:
Olá, primeiramente gostaria de dizer que amo seu blog, sempre passo aqui para ver as atualizações e incrementar novidades em meu blog.
Bom, mas agora gostaria de tirar um dúvida, posso ter sido desatento ao ler todos os comentários, mas não encontrei nada que pudesse me ajudar. Eu acrescentei uma pagina estática onde coloco links de parceria, e gostaria que aparecesse nesta página apenas o Widget de "lista de blogs que eu sigo", o código que você forneceu oculta todos. É possível escolher qual Widget aparecer ou não com este código? Abraços, espero ansioso pela resposta.
joaogoliveira099@hotmail.com
16/12/2010 às 21:43
Não deu certo !! 🙁
11/12/2010 às 23:08
vlw muito simples e praticooooooooooooooooooooooooooooo
da um UPPPPPPPPPPPPPPPPPPP
10/12/2010 às 1:19
10/12/2010 às 1:02
Vc vai ter q descobrir qual é o código deste elemento que vc quer ocultar no seu template e incluir o comando "display:none;" nele.
09/12/2010 às 12:36
Tenho uma dúvida: como faço pra tirar nome e link (ex. About) de dentro da página estática? Pra deixar somente no menu de páginas?
Já rodei pelo Mundo Blogger, mas não encontrei nada referente a isso.
garotosintelectuais disse:
Faz algum tempo que não visitava o blog, confesso que não estava conseguindo acha-lo, eu lembro que era "Mundo Darkness" dai demorei um pouquinho, mas achei.
Ótimo artigo, ótimo Blog, muito parabéns.
Espero que o Blog seja muito prospero ($$$) 😉
21/11/2010 às 17:54
Lamento,mas não há como eu te ajudar. Não sei o q acontece no seu template.
Milho Wonka disse:
21/11/2010 às 8:23
o codigo funcionou perfeitamente quando abro o blog no firefox, mas no chrome, os widgets nao aparecerm, mas o espaco da barra aparece, da um dica
o blog é esse http://www.milhowonka.com.br
Talvez sim..dá uma lida no artigo:
"Ocultar elementos em página específica". talvez te ajude pra o q vc tá precisando 😉
18/11/2010 às 15:38
EU TE AMO CLAU! haha Estava procurando isto mesmo, mas, tem mais uma coisa… Eu gostaria de fazer isto só que nas postagens. Tem como ?
Beijose PARABÉNS pelo MB! 🙂
Obrigada pelo aviso, já corrigi..rs
Volte sempre viu? 😉
A caixa de busca do google anda dando erro, em alguns blogs ela não funciona mesmo, deve ser bug.
Sugiro que vc reporte o problema no Fórum oficial do Blogger.
Aproveitando, vc citou que estava usando o template Death Rose, eu fui visitar seu blog e notei que vc retirou os créditos de autoria do template do rodapé do blog. Peço que vc, por favor, recoloque os créditos de autoria, tendo em vista o template ser criação minha e possui direitos autorais. No próprio post onde disponibilizei ele para download há informações a respeito, inclusive sobre modificações. Se quiser maiores esclarecimentos, leia a nossa Licença
17/11/2010 às 19:53
Desculpa mais o código não pode ser postado rs..
mais é só copiar a ultima linha substituindo #main-wrapper por ".post" e reduzir o tamanho, exemplo:
#main-wrapper {width: 975px; float:none; margin: 0 auto;}
.post {width: 960px; float:none; margin: 0 auto;}
17/11/2010 às 19:32
ÊêÊêÊê…
Cauzinha!
Desculpas pelo spam amiguinha mais é que estava Louco e sai atirando para tudo que foi lado rs… Meu blog estava muito encomodo, com os erros, tive que analizar código por código, começando pelos scripts e até chegar no CSS 🙁
Uffa!! Consegui, como observei que outros usuários tiveram o mesmo problema irei colocar como resolvi o problema da pagina não esta reconhecendo o código:
Obs. caso tenha imagens no topo das postagens, ela irá fica desproporcional.
Agora só estou tentando resolver o próblema do sistema de busca, ele não faz a busca interna. da como "nenhum resultado".
Apliquei tamplete e pronto ele não funcionou mais, pq no antigo ele funcionava.
Eu estou usando o "Template Death Rose" modificado mais, fiz teste nele sem edita-lo e acontece o mesmo.
16/11/2010 às 1:23
Desisto, não tenho mais paciência 🙁
Primeiramente montei esse template em outro blog, salvei o XML vim ao blog atual coloquei o novo template, agora esta aparecendo coisas do nada, como o texto antes do comentário e não existe código para isso… As paginas Státicas estão se duplicando… e o post não fica com o tamanho da pagina :(… Poxa gostei tanto deste Template, deu mó trabalho para deixa-lo do meu jeito!
Abraços e desculpa o desabafo! pesmania.net
No meu caso são 02 problemas um que os post estão duplicando na paginas estaticas, e a largura tambem não esta ficando do tamnho real, será que poderia ajudar?
o meu existe o #main-wrapper
Show de bola Clau!
Funcionou perfeitamente, só tive que mudar o nome de algumas classes para adaptar aos novos modelos de templates do Designer do modelo.
Ah, e ali no artigo está escrito: "classes(#) ou id(.)", está invertido. ;]
Este artigo me ajudou muito, nem sabia que era possível colocar condicionais dentro do "head".
22/10/2010 às 17:13
Tem algum modo de usar uma página estática como página de abertura do blog?
Eu gostaria de colocar uma apresentação em flash e tal.
Eu pensei que talvez houvesse algum meio através de condicionais já que não dá para programá-las D:'
Alexandre Capellie disse:
Oi, muito bom seu jeito de explicar para iniciantes como eu…Obrigado!
Tenho uma dúvida com relação à esse tutorial, pois a largura da página ficou como a da postagem, mesmo configurando 950 px. O que faço?
28/07/2010 às 23:29
@th3m@d0xt3r:
Então vc terá q procurar qual é o elemento q se refere á coluna total de postagens (que no caso comum é o #main-wrapper) e aplicar os estilos de largura a ele.
Se quiser,pode tentar aplicar estilos em .post{
faz um teste pra ver se dá certo.
28/07/2010 às 14:44
Olá, quase todos os hacks que fiz utilizando os métodos do seu site deram certo no meu, mas esse não está funcionando. Veja bem, é para a página estática ficar da largura que for definido no código correto? Não importa o valor que eu puser, a largura não aumenta, os elementos que quis ocultar realmente ficaram ocultos, mas a largura não aumenta no meu template (que é baseado num dos novos modelos do blogger)o elemento #main-wrapper não existe no meu modelo, gostaria de ajuda para solucionar esse problema, abraços e grande blog!
12/07/2010 às 4:20
Nossa, Clau!
O fato do Blogger 'copiar' o estilo dos posts nas página estáticas era um tormento pra mim. hauhauha Agora ficou tudo certinho. Obrigada, mais uma vez. ?
10/06/2010 às 1:55
@TecnoNerd:
O comando "display:none" serve para ocultarmos elementos.
Vc terá q incluir o código referente a sua data em forma de calendário.
#codigo dela aqui {display:none;}
Se vc estiver usando a data de acordo com este tutorial aqui, o código pra ocultar seria o #fecha
Como vai, antes de tudo parabéns pelo blog, encontro muitas coisas aqui para os blogs de minha outra conta, ligados à goticismo e wicca. Bom, gostaria de pedir uma ajuda enorme: O blogger finalmente liberou as páginas estáticas (finalmente), mas como não poderia deixar de ser vieram os problemas: uso a data em formato de calendário, no topo do post, porém como nas páginas estáticas a data não é apresentada, acaba ficando a imagem do calendário vazia, no topo da postagem. Já revirei o código do meu blog e percebi que não aparece nada relacionado às páginas estáticas.
Poderia me ajudar com isso? Desde já grato.
Monica Barcelos disse:
22/04/2010 às 21:39
Muitoo obrigado pela atenção ^-^/
Mas, é ai que tá o problema, eu ja tentei ocultar tanto os marcadores e o estilo da lista, mas não deu certo :/
21/04/2010 às 21:58
Tudo o que vc quiser ocultar vc deverá acrescentar na linha onde tem o "display:none", dessa forma:
#nome-do-elemento{display:none;}
.nome-do-elemento{display:none;}
Ocultar os marcadores que aparecem nas postagens:
Oiee o/ Poxa eu tava personalizando as páginas estaticas, mas aconteceu o seguinte:
Não tem aquela lista de marcadores (que nem ta aqui no blog) Ela fica aparecendo nas páginas estaticas, cobrindo o texto delas O.O
O que da pra fazer, para esta lista nao aparecer nas paginas estaticas? >.<
04/04/2010 às 1:38
@Dany Teixeira:
Primeiramente, obrigada pela visita e pelo comentário. Quanto a suas perguntas:
1ª – infelizmente eu não sei como alterar isso.
2ª – Este widget q vc usa é em inglês, teria q entrar em contato com o desenvolvedor, mas existe um widget em português, dá uma conferida:
Widget de últimos comentários
Dany Calypseira disse:
03/04/2010 às 22:36
Oi, adoro seus tutorias, são bem explicativos, e fica de um forma fácil para nós entendermos.
Eu quero fazer duas perguntas:
1ª. Como faço para modificar o texto "Todas os comentários" no widget Increva-se?
2ª. Tem um widget, de comentários recentes, que fica mais ou menos assim: Dany wrote… ; Tem como eu modificar esse "Wrote" por outro texto?
08/03/2010 às 23:51
queria saber como fazer para postar um codigo e ele não atualizar no blog
08/03/2010 às 23:42
@francinelson:
Desculpe, mas eu não entendi sua pergunta. Oo
08/03/2010 às 12:53
oi Clau,gostei do seu blog você esta de parabéns mas só tenho uma duvida e queria que você me ajudasse por que quando eu coloco o código javascript dentro das postagens do meu blog ela se atualiza mas eu queria que não se atualizasse como eu faço para não atualizar o código ?
07/03/2010 às 15:24
07/03/2010 às 4:02
Só passando pra dar os parabéns pelo blog(de novo)=p
…..o visu novo esta ótimo…=)
06/03/2010 às 21:17
Ops…desculpe, foi falha minha na hora de digitar o código…=)
Já atualizei…
Obrigada por me alertar…
06/03/2010 às 18:34
Clau, no trecho "Copie o código abaixo e coloque-o antes de" você não disse o lugar exato onde eu devo por o código.