Oi gostosos amados da dona Heloísa q Tudo ok? Eu estou derretendo, e vocês? Espero que não, é claro ç.ç A escola está sendo legal, mas assim, eu até falaria o motivo pra enrolar a introdução e etc. Mas, eu realmente não sei o porquê de estar sendo legal. Primeiro: Acordar cedo é chato. Segundo: Eu não conheço quase ninguém. Terceiro: Está tirando minha inspiração e a vontade para postar. O que tem de bom nisso Heloísa? Eu não sei gente UHEUHE. Mudando de assunto como sempre, eu tenho picolés aqui e vocês não ~chupasociedade q Não, não é esse o assunto HUEUHE o assunto é: Eu provavelmente irei começar a postar a cada 3 ou 2 dias, devido ao tempo e pela inspiração também. Mas eu continuarei respondendo e retribuindo os comentários normalmente, é claro. Estou muito feliz pois já tem bastante gente usando os layouts que eu postei, vocês lembram? Saber que gostam dos meus lays é tão perfeito, vocês são perfeitos, me beijem dlçs (∪3∪). Estou anormal hoje, então é melhor você pular para o próximo parágrafo.
Aleluia, aleluia ♫♪ ~Lembrei de Shrek~ Pois é, depois de um milênio, sete séculos, duas décadas e cinco anos o tutorial mais esperado do ano q. Eu aposto que muitos não irão entender, e talvez alguém daqui já viu um tutorial de codificação que não tenha nada a ver com o meu. Bom, eu nunca vi um tutorial então esse é apenas o meu jeito, e que funciona ( eu espero ). O mais importante de tudo: Nesse tutorial é uma simulação de codificação, eu estou codificando aquele meu layout que fiz em PSD pra vocês entenderem o que é codificar. Trouxe junto a isso, códigos para te ajudar na codificação. Finalmente vamos ver? (●ω●☆)
Bom gente, nesse tutorial irei ensinar como codificar tudo o que eu fiz no layout, qual é o segredo? Você apenas personaliza o seu layout com os "dados" do layout em PSD. Cara, isso é super simples, se pensar bem! Por exemplo, os códigos principais como a cor do fundo dos posts/sidebar, borda, cabeçalho, fontes, você irá passar para o Blogger, e como? Mágica/download? Nunca, jamais! Você só irá personalizar o seu layout com tudo igual ao lay em PSD, não tem nenhuma mágica gente, é simples! Veja como eu fiz tudinho:
Codificando o post e sidebar
Bom, vá em seu HTML e pesquisa por ]]></b:skin>. Acima dessa tag cole esse código abaixo:
.post-outer {
background: #ededed; /* cor do fundo, que você colou no bloco de notas */
border: 1px solid #ffc4c4 ;/* cor da borda */
box-shadow: inset 0px 5px 15px #c6c6c6; /* cor da sombra interna */
}
.sidebar .widget {
text-shadow: 0px 1px 0px #fff; /* cor da sombra do texto */
font-family: Tahoma; /* fonte da sidebar */
font-size: 11px; /* tamanho da fonte */
color: #a6a6a6; /* cor da fonte */
background: #ededed; /* cor do fundo */
border: 1px solid #ffc4c4 ;/* cor da borda */
box-shadow: inset 0px 5px 15px #c6c6c6; /* cor da sombra interna */
}
Agora, você apenas precisa substituir os códigos por os de seu lay. Por exemplo, a cor do fundo, cor da borda, com da sombra, tem que ser todas iguais a de seu layout para ficar tudo parecidinho. Como eu posso saber qual é o código de cor de tudo que fiz?
Com essa ferramenta (x) capite a cor de tudo: Background, da bordinha, e da sombra interna. Agora clique duas vezes aqui (x) e irá abrir essa janelinha (x), e então, você copiará o código que eu apontei com a setinha, esse é o código da cor. Agora, é só substituir as cores do código que passei, por todas as do seu layout. Não é um tutorial ao certo, você tem que passar tudo de seu layout para códigos, entendeu? É realmente difícil de explicar :s
EXPLICAÇÕES:
Todos os códigos a partir de .post-outer { até fechar a chave } é da personalização dos posts. Já os códigos dentro de .sidebar .widget { até fechar a chave } são da personalização dos gadgets.
Todos os códigos a partir de .post-outer { até fechar a chave } é da personalização dos posts. Já os códigos dentro de .sidebar .widget { até fechar a chave } são da personalização dos gadgets.
background: A cor do fundo, tem que ser igual a do seu layout.
border: 1px solid: Borda, 1px é a grossura dela, e solid é a linha reta. Caso a do seu layout for pontilhada é dotted, e tracejada é dashed.
box-shadow: É a sombra dos posts, esse "Inset" é porque ela é interna.
Agora, vamos personalizar o texto dos posts. Pesquise por /* Posts, e abaixo dele cole esse código:
.post {
text-shadow: 0px 1px 0px #fff; /* cor da sombra do texto */
font-family: Tahoma; /* fonte do post */
font-size: 11px; /* tamanho da fonte */
color: #a6a6a6; /* cor da fonte */
}
Text shadow é a sombra do texto. Caso não tiver, apague essa linha.
Font-family é o nome da fonte. Você irá substituir "Tahoma" pela fonte que escolheu para o texto dos posts
Font-size é o tamanho da fonte e color, a cor.
Esse foi apenas o comecinho. Meu resultado: (x)
Codificar o Background
Abra um arquivo em seu Photoshop em qualquer tamanho. Agora, pinte-o da cor de seu background e salve em png. Agora, hospede em algum lugar (x). Em seguida, vá em seu HTML e procure por: body {, você vai achar mais ou menos isso:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Substitua o trecho destacado por esse código:
background: url('COLE O LINK DO BACKGROUND') fixed repeat top left;
Você vai colar o link do background hospedado entre os dois parênteses ( ). Meu resultado: (x)
Codificar Ilustração
É bem simples: Você apenas precisa cortar sua ilustração (x) e depois transforma-la em PNG. Depois disso, é só hospeda-la em algum site (x) e usar como quiser. Caso ela ficar desalinhada use esse tutorial (x) :3
Fim da primeira parte + explicação das dúvidas
GEEEEENTE, quem tiver confuso, eu só passei cada dado do lay em PSD para o blogger, como cores/background/ilustração. Aí, quando for "passando", ele vai ficando igual ao layout em PSD. RESUMINDO: Tudo o que fiz agora, foi personalizar um layout normalmente, porém eu personalizei de um modo que fique igual o layout em PSD, ou melhor, passando tudo dele para os códigos. Mas é claro, o resto da codificação é apenas no outro tutorial.
Meu resultado: (x)
Adorei o tutorial, estou esperando pela próxima parte >33<
ResponderExcluirwww.b-urning.blogspot.com.br
Que booom *uuu*
ExcluirNossa , achei que era tão complicado , mais é muito fácil . Embora não tenha muita paciência de mexer nessa área do Photoshop , vou experimentar fazer um layout por lá. <3
ResponderExcluirUm beijo meu , Miih . <3
Visita ? | Colorful Rainbow
Sério? Ai que bom! Achei que iriam se complicar :3 Experimente sim, vale a pena *u*
ExcluirHelo, nunca pensei que fosse tão fácil! Ok, eu nem li ainda, só estou comentando porque certamente eu vou sair daqui sem comentar q Sério, todos deviam seguir seu blog de tão mara que ele é <33
ResponderExcluirBeijos
Garota Insana // Visite :3
*0* UHEHUEHUEUH Espero que você ache fácil -q
ExcluirAwwwn, não me deixe sem graça >3< ~abraçando~
Helo, eu entendi tudo e e está ficando perfeito! Queria avisar também, que mudei a url do blog. Agora é http://g-insana.blogspot.com.br/
ExcluirO nome é o mesmo, apenas encurtei ^^
Beijos
Isso também aconteceu comigo, a escola tira a vontade de postar :/ Adoro a escola :3 HAduahduahdauhduada, é sério. Enfim, aqui não está calor não. NORDESTE <3 Ok, adorei o tutorial. A cada 2 ou 3 dias? NÃOOOOOOOOOOOOOOOOOOOOOOOOO! É O FIM DO MUNDO. AHdaudhaudhuadhaudhad, tudo bem, eu entendo.
ResponderExcluirVisite o blog | Etc For Me ♥
Que raiva né :c Eu também estou adorando UHEUHEUH sortuda!
ExcluirFico muito feliz que gostou Karla <3 UHEUHE awwwwwn *u*
Cara, isto acontece contigo também? Meu Deus, não sou a única q. A escola anda tirando toda a minha vontade de postar e inspiração! E o pior é que está sendo legal, IAUHSAUIH' :3 Adorei o tutorial! É bem complicado, mas explicaste muito bem! ♥
ResponderExcluirUm grande beijo,
Juu-Chan || Nescau com Nutella
Estamos em uma situação totalmente igual UHEUHEUHEUH
ExcluirQue bom *3* Muito obrigaaada <3
Adorei, talvez eu faça um lay no ps. Outra, o GR voltou <3 Esperando sua visita, tá?
ResponderExcluirhttp://golden--resources.blogspot.com.br/
Que bom *u* Claro que irei visitar! Voltou humilhando :3
ExcluirEsse ano pra mim vai ser muito difícil postar, ninguém merece estudar o dia todo. Nunca pensei que fosse tão facinho codificar, pelo menos até aqui tá fácil haha, ansiosa para segunda parte <3
ResponderExcluirh-worlds.blogspot.com
Pois é, awn :c É a vida q
ExcluirAaaah que bom que achou fácil, me sinto bem melhor *3*
Estou derretendo aqui.É frente do ventilador 24 horas.
ResponderExcluirEu moro em cima de um sorveteria kkkkkk
O tutorial é muito bom!
Obrigada por postar ele.
Minhas aulas não voltaram ainda (graças) mas está chagando o dia.
Espero que tenha muitas inspirações!!!
Sarang Cute!
Somos duas UHEUHEUH'
ExcluirTROQUE DE LUGAR COMIGO AGORA, SEM TEIMOSIA qq
Que bom que acha, e imagina! <3
UHEUHEU que sorte, eu acho q
Obrigada :3 UHEUH
HAHA , ainda to de férias bleeeee ~~agoraeudeinacaradasocicedade~~
ResponderExcluirE eu tenho picolés aqui *uu* 0/
Onde voçe mora? pq aq em Salvador choveu , tava mto frio e.e
Cara como voçe explica bem *uu* ,meu proximo lay vai ser todo pelo ps . Serio mal coloquei o novo lay ja to pensando em outro? serio? uhuathuht , cuidado vio Helo acho que isso pega kkk.
● Geekegirlie.blogspot.com || G² Official ♥
Sambou apenas com duas frases ç.ç UHEUHEUH
ExcluirLimeira/SP, ai que inveja, sambou com três :c
Awn, sério? *0* Espero que dê tudo certo UHEUHEUH' Eu sempre faço isso :c Eu já tenho isso ~tuts tuts~ q
Aqui tá muito calor também, e não é só você que tem picolés, eu também tenho e sorvete também muahahaha #chupa Adorei o tutorial :33
ResponderExcluirUnskilled
UHEUHEUH ain ç.ç
ExcluirQue bom *3*
Aceito sim afiliação, já te coloquei na elite. Depois eu passo aqui pra conferir!
ExcluirQ bom q esta tudo certo na sua escola fico feliz por isto : p
ResponderExcluir.Não parece tão dificil assim,estou começando a entender >.< vc explica muito bem viu dona Helo sz
kissu || {Temos novidades}
Obrigada *uu*
ExcluirAwwn que bom <3 Muito obrigada linda <3
Eu também já estou começando a derreter! AHSAUSH'
ResponderExcluirMas é verdade, a escola tira a vontade de postar, não sei porque, masok.
O tutorial está sendo super fácil! Uhull! Não vejo a hora da próxima parte! :3
Beijos!
www.simplekawaii.tk
UHEUHEHUEUH'
ExcluirÉ bem estranho :c
Awwwn que bom que acha *00*
To aprendendo aos poucos, obrigado por estar ensinando *-*
ResponderExcluirhttp://www.heltonnunes.com/
Awwwn, que bom *u* Imagina <33
ExcluirEstá tudo muito kawaii,
ResponderExcluirparabéns *~*
Realmente é preciso saber mexer em PS
coisa que eu não me ajeito :P
Convido a a visitar o meu cantinho,
Words-by-Ricci.blogspot.pt
e a seguir se gostar (:
Obrigado! *o*
Awn, obrigada *3*
ExcluirVerdade :/ UHEUHE'
Claaaro <3
Eu também estou meio que assim, falta de inspiração pra postar.
ResponderExcluirGlória deus nas alturaaaas o tutorial mais esperaaaaaaaaado :3
Belo post ♥
www.k-awaiicherry.blogspot.com
Que pena :cc
ExcluirHUEUHEUHEUH *uuu*
Obrigada <3
Nossa todo mundo reclamando do calor e eu aqui tranquila, pois moro num lugar que faz calor todo santo dia e frio é de vez em quando.
ResponderExcluirMuito bom esse tutorial.
Sweet of Cherry
S/O/R/T/U/D/A demais UHEHEHU'
ExcluirQue bom que acha :33
Cara me apaixonei vou tentar fazer mais acho que eu não conseguiria :c , mais enfim ameii , vou acompanhar todos <3
ResponderExcluirBjs | http://h-piece.blogspot.com
Awn *u* Consegue sim, claro!
ExcluirQue bom *00*
Minhas aulas nem começou, mais minhas aulas de Judô me deixa inspirada! Porque só eu sou diferente? Affz :\
ResponderExcluirAqui está de boa, calor : Siim! --- Insuportável : Nãoo! Então não estou muito precisada de um ar-condicionado! Não acredito que vai ficar esse tempo todo longe :OOOOOOOOO, Vai não, fica aqui! :( Fazer oque, lamento! Vou sentir sua falta :3
Super legal o Tutorial! Adorei.
Obrigado e Desculpe.
Um beijo e Um cheiro.
Awn, que bom *u*
ExcluirUHEUHEU ser diferente sempre é bom o/
Aqui hoje, na minha cidade, fez 45ºC graus ç.ç que ódio :s
Awww, não vá, por favor UHEUHEUH' :/ Eu também, awn <33
Que bom amor :333
Awwwwn obrigada *u*
ResponderExcluirEstou acompanhando *-----*
ResponderExcluir-
snowing-wishes.blogspot.com
Que booom *----**
ExcluirVou acompanhar esse tutorial, quero aprender a fazer >3<
ResponderExcluirMas às vezes a escola é divertida sim q Minhas aulas voltam dia 17.
Beijos ~
garotas-cupcakes
Awn, que bom :3
ExcluirVerdade HEUHEUH' Ah sim ><
Heloísa help-me!! Não estou entendo o inicio é para pesquisar no hmtl por ]]> mas tipo em qual template? em um do próprio blogger? é que eu sempre pensei que nós iriamos ''criar'' tipo >html< , >head<, etc e irmos colocando e tal.. E sobre a escola eu só começo daqui um mês heuehuehue
ResponderExcluirEntão, na verdade você procura por " ]]> ", aí é só colar aquele código e modifica-lo de acordo com seu layout em PSD :3
ExcluirMas onde??? Isso que eu não entendi em um template do proprio blogger normal? ~~sou meio lerda :P ~~
ExcluirIsso é complicado demais pra minha cabeça, gente!
ResponderExcluir♥ Visite-nos! ♥
XOXO
UHEUHEUHEUH :/
ExcluirÉ um pouco difícil fazer layout pelo photoshop eu só faço o cabeçalho e as faixas u.u
ResponderExcluirNovo aqui, amei as faixas da side :3 ^^
h-holiday.blogspot.com.br
Verdade UHEUE'
ExcluirAwwwn *3* bem-vindo!
Estou acompanhando tá? *U*
ResponderExcluirVoltei *-* / querendo-voar.blogspot.com.br
Ok *u* UHEUHEUH'
ExcluirUhuuuuuuuuuu ~tuts tuts qro ver~
O tutorial é bem útil! Eu já vi vários tutoriais, mas nunca consegui fazer exatamente como eu quero T^T' na próxima vez, irei testar com o guia aqui, é um guia não é?! ç_ç' ~ afinal está bem explicado *o*
ResponderExcluirwrite down || write--down ♡
Que bom que acha :3 Ah, entendo :/
ExcluirAcho que sim UHEUHEUEUH' Awn, obrigada *0*
MINHAS AULAS COMEÇARAM FAZ TEMPO AUSHAUSH, Aqui está na época de chuvaa ~AEEE o/! Tutorial maravilhosoooo, e tu Helo, explicando então :333 Beijos sálinda >3<
ResponderExcluir~ http://7-roses.blogspot.com.br/
UHEUHEU' Afe, troca de lugar comigo D:
ExcluirAwwwn, que bom que gostou, sério <3 Beijos ságata q
Você é confusa, que nem eu, estou com 50% de vontade de voltar pra escola e 50% não [a única coisa que te a ver com o assunto foi a palavra ''escola, mas ok.] Eu alterno os dias das postagens também, me ajuda a respirar -q. O tutorial ficou ótimo, mesmo que eu não vá fazer por que eu morro de preguiça HUEHEUEHEU (qual a graça). Sumi, mas já voltei, estava me matando pra fazer um lay.
ResponderExcluirwww.wh-asia.net | [☆WHA☆]
Você disse exatamente o que eu sinto UHEHUEUH' Teve sim, ué u3u. UHEUHEUH, obrigada *u* Te entendo qq Bem-vindaaaa \o
ExcluirAdorei o tutorial, eu tava esperando muuuito por isso. Pois eu nunca entendi muito sobre esse negócio kk. Está bem explicado e eu vou esperar pela segunda parte.
ResponderExcluirBeijos, ~ Sun-Hi
~ inventyourhappiness.blogspot.com
SAUSAUH Obrigada linda ♥♥♥
ExcluirOi , adorei o tuto! Embora a preguiça tenha tentado me seduzir, vou tentar fazer um kk, e tbm amei o blog. .>< sz
ResponderExcluirBeijos :) ;*
Que bom amor! Sei como é uheuhauhe. Muito bom saber *u* E obrigada!
Excluir