Este é provavelmente o último tutorial de hoje, e já postei uns quantos.
Usei recentemente um tuto que permitia dar às várias páginas do blog um layout diferenciado. Tive de procurar imenso para conseguir achá-lo, pois a maioria que encontrava explicava apenas o que eram as páginas e como funcionavam, e ainda tentei organizar e acrescentar as minhas próprias coisas - ou seja, permiti que essa diferença se desse ao nível do fundo, da área de postagem, e ainda ocultar a sidebar. Claro, isso significa ter trabalho duplo a editar o layout, mas pessoalmente eu até achei prático e simples. A segunda parte do post, mais explicativa, retirei de um site, então está creditada lá.
Prévia: www
» se repararem, ao clicar numa das páginas (como a 1ª), o layout muda em relação ao da home
Tutorial
Abra o html do seu blog. Use Ctrl + F e procure por
<b:if
Acima, cole (isto é para o layout das páginas, não se esqueça do resto do layout!):
<b:if cond='data:blog.pageType == "static_page"'><style>html { /*fundo do blog*/background: #cf8980;}#main { /*fundo da área de postagem*/width:1320px;margin: -60px 0px 20px -615px;background: #a8b9bd;border: 5px solid #a8b9bd;margin-bottom: -100px;}#sidebar { /*sidebar. Ela foi removida, mas pode optar apenas por personalizá-la*/display:none;}</style>
E se você quiser uma diferença mesmo entre as próprias páginas?
É muito simples, basta trocar a primeira linha do código acima pela linha correspondente [créditos por esta parte: www]:
- <b:if cond='data:blog.pageType == "static_page"'>
↑Foi o que usei. O que colocar aqui vai afectar somente, e todas, as páginas estáticas.
- <b:if cond='data:blog.pageType == "archive"'>
↑O que colocar aqui só afecta as páginas que mostram arquivos.
- <b:if cond='data:blog.pageType == "index"'>
↑O que colocar aqui afecta todos os demais tipos de páginas.
- <b:if cond='data:blog.pageType != "item"'>
↑O que colocar aqui afecta todos os tipos de página, menos as das postagens.
- <b:if cond='data:blog.url == data:blog.homepageUrl'>
↑O que se colocar aqui só vai afetar a página inicial.
- <b:if cond='data:blog.pageName == "Contacto"'>
↑O que colocar aqui vai afectar somente a página com o título exatamente como está escrito no código, ou seja ao decidir utilizar esta condicional deve escrever onde está a negrito como está no titulo da página.
- <b:if cond='data:blog.url == "http://revistinhadigital.blogspot.com.br/p/equipe.html"'>
↑Funciona como na condicional acima, mas utilizando o endereço da página em vez do título.
Pode parecer um tutorial extenso, mas na realidade é simplíssimo.
Nossa, eu acho esse tutorial TU-DO DE BOM! Dá trabalho? Sim, dá. Mas o resultado compensa e muito <3 Mas também se for pensar é só uma questão de prática e tals, sempre quis saber como se faz essa bagaça, agora eu sei <33
ResponderEliminarDiário de uma Otome
E na realidade, para quem está habituado a trabalhar com layouts, nem dá tanto trabalho assim - claro, depende da quantidade de coisas que se quiser mudar em relação ao layout da página inicial, mas nada que atrapalhe muito. Já tinha visto uma parte deste tutorial num blog que adoro, mas por algum motivo tinha tão poucas explicações e tão poucas ajudas, que fiquei sem perceber nada na mesma, então decidi pesquisar e compartilhar aqui o que achei. Jaa ^^
EliminarHoje mesmo vi um blog que no qual amei o estilo diferente deste modelo que apresenta. E estava rodando em minha cabeça como ela havia feito tal estilo. E tu apareceu como um passe de mágica *0* Espero muito usar-lo um dia, você realmente surpreende-me =D
ResponderEliminarEu própria demorei um quanto a descobrir o código base, e depois a perceber como funcionava :) Fico contente por ter sido útil.
EliminarEsse tutorial é tudo de B-O-M! Eu que me estresso fácil com HTML não seria a pessoa mais recomendada para tentar, mas é sempre bom saber como faz né? Dá trabalho mas o resultado compensa muito!
ResponderEliminarÉ possível mudar o layout de uma só postagem? Eu gostaria de fazer pequenas modificações apenas, como colocar um render no fundo, mudar a cor disso e daquilo..por favor <3
Não através deste tutorial, mas pode editar as postagens no momento em que as está a criar, pois dá para escrever os posts em "HTML" - uma aba que aparece no canto esquerdo do topo. Ora, dá para...
Eliminar- colocar um background na postagem toda, se criar uma espécie de "caixinha", personalizando-a à parte e depois aplicando -div class="nome da caixa" - SEU POST -/div- (troque aquele "-" pelos sinais maior e menor, o comentário não aceita esses sinais - e avise se quiser explicações mais detalhadas)
- mudar cores, fontes, sombras e tal o texto.
- criar um tipo de blockquote diferente
- colocar imagens ou aplicar efeitos às existentes, movê-las, deformá-las, e tudo o mais.
- entre outras coisas
Não dá, contudo, para modificar o aspeto externo da área de post. Por exemplo, se escolheu que as suas postagens teriam uma borda-bottom de certa cor, não pode modificar essa cor pelo html do post - pelo menos, eu não sei fazer isso.
Peça para eu esclarecer mais, se quiser :)
Eu não consegui fazer o tutorial ;-;
ResponderEliminarPorque há vários <b:if
Eu não sei em qual eu colo acima, também não entendi o que quis dizer com:"isto é para o layout das páginas, não se esqueça do resto do layout!"
Perdão pelo incômodo, se puder me ajudar, agradeceria.
Ok, é assim: antes de aplicar este tutorial, deve personalizar todo o layout. Porquê? Porque este tuto só irá personalizar um tipo ESPECÍFICO de página, conforme a frase que escolher, e portanto não poderá ser visualizado na home. O melhor é usar o código da blockquote, sem grandes mudanças a não ser nas personalizações de cores, etc... Está familiarizado com html? Se não, avise para eu dar uma explicação mais detalhada.
EliminarEstou louco para usar isso. Mas estou com uma duvida, suponho que eu deva fechar o <b:if em seguida após o /style. Pois dá um erro (fica em vermelho) no /head, certo? Certo. Mas, assim, como faço para ocultar um gadget nesta página que estou diferenciando (no meu caso, uma estatística)? Meu problema com html é que eu nunca presto atenção no que está abrindo ou fechando kkkkkk
ResponderEliminarDe qualquer forma, obrigada pelo tutorial! :)
Olá pessoal, alguem tem um exemplo de como ficou o blog de vocês apois realizar esta configuração no HTML do blog de vocês?
ResponderEliminar