Updates +
Devido ao hiatus, não estamos moderando nem respondendo nenhum comentário, porém o blog continua aberto para visualização. Obrigada pela visita ♡

6 de dezembro de 2014

Free Layout: Monochrome B

[re-post] já que estou totalmente sem ideias pra posts, pensei em criar um selinho/challenge/perguntas,... O que vocês acham? c: 



    Oioioi! Adivinhem quem voltou com o presente de vocês? SIM, eU. Bem, como eu tinha dito no último post, eu havia preparado um presentinho para vocês, e o que é melhor do que um layout free? Nadinha, bem, nadinha além de comida.
    Enfim, eu demorei porque, nesse meio tempo, eu juro dedinho, fiz cinco layouts e nenhum deles me agradou, eu fui atrás de muitos blogs por inspiração, assisti milhares de vídeos, procurei imagens, olhei themes de tumblrs por uma ideiazinha e nada do que eu fazia me dava aquela sensação de trabalho feito.
    Eis que me surge a brilhante ideia de dar uma olhada no Die Jungs (um photobook do grupo que eu gosto), enquanto trocava meu theme no tumblr por um da pohroro e voi lá, ideias, milhares delas me socando a cara, e foi então que nasceu meu mais novo layout, que inicialmente se chamava Shades of Monochrome, mas que mudei para Monochrome B porque a minha musa inspiradora foi ninguém menos que, bem, que o Baekhyun, awn.
    O theme que também me inspirou foi um da pohroro sim, mas não foi plágio porque, vejam bem, eu em nenhum momento copiei algum código e, já tinha a ideia de um menu lateral passeando pela minha cabeça, só não sabia como inseri-lo de forma que deixasse tudo como eu queria (com um visual clean), então eu usei a ideia dela de por o menu dentro de uma imagem, espero que não tenha nenhum problema de eu ter usado isso, até porque ficou bem diferente da forma da qual ela usou essa ideia (seu menu tinha o icon do tumblr, uma descrição bem mais detalhada na parte de baixo, a paginação, os links eram mais elaborados e etc). Eu também disponibilizei dois tipos de menu, um dentro da imagem lateral e um abaixo do cabeçalho, e fica a seu critério qual deles usar, sabem?
    De qualquer forma caso vocês achem que eu estou errada em fazer isso, por favor (por favor), me digam que eu vou com certeza remover esse layout da internet (por mais que vá ser como um aborto pra mim). Bem, seja como for, vamos as explicações desse layout que são bem extensas, pois tentei fazê-lo o mais editável possível, já que tive em mente a ideia de um layout no estilo tumblr (infelizmente nos blogs não é possível criar um appearence :c)





  • Duas opções de menus disponíveis
  • Blockquote personalizado
  • Comentários personalizados
  • Layout estilo tumblr clean
  • Descrição dentro da imagem lateral (opcional ou editável)
  • Posição do menu lateral editável
  • Imagem da largura do post
  • Subir ao topo editável (jquery não opcional)

Largura das imagens:

    Vamos começar pelo básico: Como sempre deixar as imagens preenchendo a largura inteira das postagens. É muito simples mas você tem que sempre lembrar disso, certo?
    Todas vez que adicionar uma imagem ao post, deve clicar naquele botão no canto superior esquerdo da postagem "HTML" e adicionar, onde você quer que apareça a imagem, a linha abaixo (fazendo as devidas alterações):

<img alt="" class="largura" src="URL DA IMAGEM" /></div>


Menu Lateral:

    Agora vamos as partes que aparentam ser mais complicada  (mas só aparentam mesmo, juro). Para alterar os links do menu lateral, vá até Modelo > Editar HTML , utilizando o ctrl + f procure por


 <div id='menulateral'>

    Abaixo disso você encontrará o código que deve alterar, já com as devidas instruções c: Caso você não queira esse menu, apague esse código

<div id='menulateral'>
<a href='URL1' title='{nome do link 1}'>one</a>
<a href='URL2' title='{nome do link 2}'>two</a>
<a href='URL3' title='{nome do link 3}'>three</a>
<a href='URL4' title='{nome do link 4}'>four</a>
<a href='URL5' title='{nome do link 5}'>five</a>
</div>
  </div>


Descrição Lateral:

    O código da descrição que há dentro da imagem está logo acima do código do menu, altere aquele welcome to the layout preview lorem ipsum dolor sit amet,..., lembre-se, por favor, que para que a descrição permaneça dentro da imagem, você só pode escrever três palavras por linha, claro que se forem palavras pequenas, artigos e coisas do gênero, você pode escrever mais, aí depende  da sua noção de espaço.
    Caso você não queira essa descrição, basta apagar aquilo que deveria editar (a frase welcome to the layout preview bla bla bla...).


Menu Abaixo do Cabeçalho:

    Esse menu encontra-se na aba Layout, em um gadget de HTML/JavaScrip nomeado... OI (me desculpem eu...). É bem simples mas para conseguir edita-lo você deve arrasta-lo até a coluna de gadgets, em seguida edite-o normalmente e arraste-o de volta para seu lugar (abaixo do cabeçalho).
    Também é possível edita-lo diretamente do seu blog, clicando no símbolo de ferramentas que aparece ao lado do primeiro gadget (aquele no background, não o dentro do gadget).

Leia Mais:

    Se você quer alterar a imagem de continue lendo original do layout, pode fazê-lo procurando no HTML do layout por

 http://i58.tinypic.com/99pb3o.png

    Substitua esse trecho pela url da sua imagem.

Imagem Lateral:

    Para alterar a imagem lateral por outra, você deve procurar no HTML por 

#sidebar {

    O último item desse elemento será 

    background: url(http://i61.tinypic.com/ztg415.png);

    Substitua o trecho em negrito pela url da sua imagem, lembrando que ela deve ter no mínimo 400px de largura por 653px de altura.



    É isso, me digam o que acharam. Vocês podem editar da forma que quiserem, podem até usar como base se quiserem, mas lembrem-se de deixar os créditos lá (você pode mudar suas cores e aparência para combinar com as outras modificações).

Um comentário: