Image Map

AULA - CODIFICAÇÃO DE BLOG PARTE 2 [BLOCKQUOTE]


Hey, pessoal, tudo bem? 

Hoje, vou prosseguir com a segunda aula de codificação de blog... Vamos lá?

Na primeira aula, disponibilizei um código base e dentro deste código base, disponibilizei  legendas ao lado de cada parte importante, facilitando muito para quem é iniciante, espero que tenham conseguido utilizar bem o código. <3

Para aqueles que tiverem dúvidas, podem vir perguntar a mim, tanto por e-mail, quanto na c-box, ou comentando aqui nas postagens - que eu acho bem melhor, assim quem tiver dúvidas semelhantes, terá suas perguntas respondidas no mesmo instante. - que irei responder da mesma maneira. 

Como o código que disponibilizei pra vocês está limpo, isso quer dizer que ele não tem quaisquer alterações. Eu tirei tudo dele, pois assim, vocês podem acrescentar tudo o que acharem melhor e assim, fica um código base, de vocês, feito/alterado por vocês. Isso é bacana, não é? <3

Hoje, vou ensinar coisas bem simples, mas muito significativas! <3

Bora começar? 

▪ ▪ ▪ ▪     ❇      ❇      ❇     ▪ ▪ ▪ ▪

1- Vá em postagem e siga os passos abaixo:

Faça uma nova postagem e nela coloque: Uma imagem, letras em itálico, Negrito, Sublinhada e Tachada. E claro, coloque alguns textos escrito ''TESTE'' algumas vezes sem quaisquer efeitos publique. 
Faça isso três vezes seguidas, para ter três (3) postagens no blog para assim, na hora da codificação, você tenha uma boa visualização do blog. 

Fez isso? Vamos pra a segunda parte! <3

2- Siga os próximos passos:

CONFIGURAÇÕES 
POSTAGENS, COMENTÁRIOS E COMPARTILHAMENTOS.

Achou? 

Na área de POSTAGENS, no 'Mostrar no máximo', coloque 2 e salve.
Vai ficar assim:

Clique na imagem para ter uma melhor visualização.


Parte 3? Alguma dúvida? <3

Bom, agora vamos codificar algumas partes do blog! :3

Vá em 'TEMA' .
Editar HTML
Procure por: ]]></b:skin>
 ACIMA DO B:SKIN>, COLE O CÓDIGO DO BLOCKQUOTE ESCOLHIDO.

▪ O ']]></b:skin>', é essencial para todos os efeitos que quiser colocar no blog.

Por exemplo, sem ele, por exemplo, você não consegue colocar efeito nas imagens, menu´s adicionais ou editar quaisquer parte ''Extra'' que queira colocar no blog... Ele é muito importante, então, nunca, jamais, apague esse código, ok? :3

❇      ❇      ❇

Vou ensinar a  diferentes formas de personalizar seu 'Blockquote', ou como é mais conhecido 'Citação', de suas postagens! <3
.

Para quem não sabe quem eu sou, olá, prazer, Blockquote! <3
.

 BLOCKQUOTE PARA LAYOUTS DARKS


CÓDIGO ( WWW)

▪ Ele vai ter esse efeito tanto na parte da sidebar, quanto na parte de postagem.
Também serve para fazer de Menu. Usar o Blockquote como menu, é muito melhor do que usar realmente um menu. Assim, o seu blog fica com um carregamento mais rápido e não tão pesado! :3


❇      ❇      ❇


BLOCKQUOTE PARA LAYOUTS CLEAN


Código (WWW)

 Em postagens, ele fica igual a opção de antes e centralizado. 
 Serve pra ser menu também, assim como o de cima. 
 Caso queira o efeito 'clean' igual ao da sidebar, siga os passos:

▪ ▪ ▪ 

1- Procure por: .post blockquote {

Quando o código fechas ' } ' logo abaixo do simbolo }, cole este código WWW

▪ Tem que ficar assim:



❇      ❇      ❇


▪ BLOCKQUOTE PARA LAYOUTS SIMPLES


CÓDIGO (WWW)

Ele segue o mesmo padrão, tanto na postagem, quanto na sidebar.
 Serve pra ser menu, assim como os outros

❇      ❇      ❇


▪ BLOCKQUOTE APENAS PARA POSTAGEM


CÓDIGOS  (WWW)

▪ Como são apenas efeitos de postagem, quem quiser colocar algum efeito desses na área da sidebar, é só copiar o código, colar logo abaixo do que copiado e substituir esses códigos:

▪     .post blockquote  e 

substituir por: 

▪    .sidebar blockquote { 

Agora, caso queira trocar algum efeito da área da postagem, é só apagar os códigos de POST e substituir por esses que disponibilizei, Ok? <3


Bem, por hoje é só. 

Dou meus créditos ao blog do Adolescente Nerd e ao blog Sekai Bakawaii.


Obrigada a quem leu até aqui. 
Sei que é um tutorial pequeno, mas garanto, fazê-lo, demorou bem mais.

Espero que gostem e até a próxima aula.

Se tiver links quebrados, é só me avisarem! <3


Leia Mais ►

Aulas de HTML 5, CSS , Java, para iniciantes e +


 Heeey!! Seus lindos e lindas, estão bem? Eu espero que sim.

 Eu sou a Skinny e vim aqui hoje para ajudar vocês que querem muito aprender a montar seu próprio blog, site, theme para o Tumblr etc.  Sim vou ajudar aqueles que querem muito aprender a mexer com HTML, só que não tem como pagar um curso desses bons por ai. Eu como vocês não tenho condições de pagar uns Senac da vida e queria muito aprender a editar HTML e fazer meus próprios themes para o meu o tumblr ou até mesmo uma página no Blogger. Só que tudo o que eu encontrei de "graça" nesta minha peregrinação eram conteúdos muito fraco por assim dizer... Sempre ficava com um "Ã?" enorme na cabeça. Eu estava praticamente desistindo e aceitando que para aprender eu teria que fazer um curso caro do qual ia levar uma eternidade para pagar... Foi quando finalmente  encontrei algo bom e que realmente ensinava no mesmo nível desses cursos de 350R$. 
Então como sou uma pessoa bacana e quero ajudar o pessoal que sonha em fazer Design está ai as dicas do qual vou passar... E sim, você leu direito eu falei dicas!



Vamos lá.



Esses são os links das Aulas que vão te ensinar a realmente mexer com HTML, quem dá as aulas é o professor Gustavo Guanabara, além de ser muito simpático ele sabe explicar muito bem as coisas fazendo qualquer iniciante que caiu de paraquedas nesse mundo entender.
Primeiro de tudo assistam as aulas de HTML e CSS do primeiro ao último capítulo, mesmo se você achar chato os três primeiros videos, pois você realmente precisa entender a historia desses códigos maravilhosos que fazem toda a mágica acontecer.






Aqui tem o programa totalmente free do qual ele utiliza, já com vídeo ensinando a instalar e tudo mais (Obrigada tia Queen B por isso sz). 






 Logo depois que você ficar foda no HTML você vai precisar aprender a parte mais chatinha só que extremamente importante! O famoso Java.





Recomendo que assistam do começo ao fim também.




 E por favor pessoal... Não se esqueçam de dar like nos videos do professor Gustavo Guanabara, já que ele teve todo trabalho de fazer esses videos ensinando a galera. No canal dele também tem cursos de Photoshop e programação em geral vale muito apena dar uma conferida.



                                                                 *


 Ok, já mudando de assunto, agora vamos dizer que depois das aulas e tudo mais você já está pró nos códigos, então agora eu vou passar alguns sites quebra galhos dos quais nos ajudam nessa jornada da edição.
Esse site maravilhoso me ajuda nas horas de preguiça, com códigos para Box ou text Shadow, largura da borda, button , gradients etc.








 Sabe quando você está navegando pela blogosfera e acaba vendo fontes lindas nas páginas das blogueirinhas e não faz ideia nenhuma qual fonte ela usou? Pois bem existe uma extensão para o Google Chrome que lhe diz qual é a fonte, o tamanho e as configurações dela, ele se chama FontFaceNinja.



FontFaceNinja





 E por fim , aqui temos um site ótimo para códigos e fins, nesse link tem os efeitos para Hover.







                                                             *



E pra quem não está nem um pouco afim de baixar programas no computador, existe uma maneira legal e online para editar HTMl. Esse site aqui proporciona uma ferramenta ótima para edição de HTML e alguns usuários também divulgam seus trabalhos e códigos free para todos. 









Espero que tudo isso os ajude nessa jornada no mundo dos códigos, de coração sz. 
Se gostaram deixa um comentário ai em baixo e me contem o que acharam de tudo isso e como está indo a jornada de vocês nesse maravilhoso mundo da HTML. Por favor não se esqueçam de seguir o blog também sz. 


Beijos e até o próximo post.








Leia Mais ►

AULA - CODIFICAÇÃO DE BLOG PARTE 1 [HEADER, FOOTER...]


Hey, amores, tudo bem? 
Então, percebi que muitas conhecidas minhas não sabem codificar um blog. 
Sim, entendo, codificar é realmente chatinho e ás vezes difícil, pois quando fazemos algo errado, todo o HTML é perdido se você não souber como correr atrás do prejuízo; e bem, é por isso que estou aqui. 

Vou tentar ensinar o máximo que eu puder e no final, darei algumas dicas de blogs, efeitos e tudo mais do que eu puder ensinar. 

Vamos começar? <3

Caso você não tenha um código base, baixe o código que eu uso AQUI

Esse código que eu estou disponibilizando, está todo limpinho, isto quer dizer, sem efeitos. 

Então, nas próximas aulas, estarei ensinando como personalizar o blog colocando tudo o que tem direto! Okay? <3

HEADER
Bem, primeiro, você tem que ter a HEADER, ela NÃO PODE ultrapassar de 1357 de largura!
Agora de tamanho, você pode fazer do qual quiser, eu prefiro tela cheia, então, recomendo 650 de tamanho. Mas isso vai de cada um. 

SIDEBAR - BARRA LATERAL - ÁREA DAS POSTAGENS
A sidebar e a área das postagens, não é algo da qual eu possa dizer um tamanho exato, pois depende do tamanho QUE VOCÊ EDITOU e tals... Assim, nesse código base, você pode tirar uma base olhando as imagens. Mas recomendo que de Largura, não passe dos 610 para as postagens e 350 para as sidebars.


Bem, de Footer, não tenho recomendações. 


PARTE 1 - INSTALANDO CÓDIGO BASE

BLOGGER.COM > SELECIONE SEU BLOG> TEMA > EDITAR HTML


- Vai aparecer isso. 
Clique dentro da caixa de código e aperte CTRL + A  para selecionar o código atual, e cole o NOVO.

Para procurar qualquer tipo de código ou palavra importantes, clique na caixa de código e aperte CTRL + F e faça suas buscas! :3

Dai, é só salvar. 

PARTE 2 - EDITANDO CÓDIGOS
Para facilitar vocês, coloquei legendas ao lado de cada código importante, então, é SÓ LER e editar o que se pede, nada mais que isso. 


Para substituir a HEADER, primeiro, vá em http://www.image-maps.com

Faça seu código, se quiser coloque links das páginas.
Pega o código e procure por MAPS e você vai achar isso aqui:


O código que está abaixo de ]]></b:skin> apague e substitua pelo código novo.

Não é pra apagar o ]]></b:skin>.

***

Para achar a parte da postagem e sidebar, procure por /* Headings

Não vou fazer tutorial de como colocar as imagens, pois já tem legendas explicando para o que serve cada uma. 


Viu? É só seguir o que eu ditei ao lado e vai dar tudo certo! 

A parte da postagem, está logo abaixo do código da Sidebar, mas se quiser achar de um jeito bem mais rápido, procure por: /* Posts

Para mudar o footer, a imagem no final do blog, procure por: </body>  e você vai achar esse código.
<center><div id='footer-wrapper'><img height='auto' src='https://i.imgur.com/Nfwqt8x.png' width='300'/><br/></div></center>


Bem, editando essas coisas, não tem muito o que fazer. 
Agora é só procurar o que quer colocar no blog, como marcadores e afins... 

Boa sorte, amores! <3

Qualquer dúvida, pergunte em nossa c-box, ou comente aqui em baixo! <3

Caso gostem, pra me motivar, comentem ai em baixo! <3

Leia Mais ►

CAPAS EM PSD



OIIIIIIIII
Resolvi começar com minhas publicações aqui nesse blog maravilhoso com o clássico pack de capas em PSD!
Eu faço muitas, adoooro hfbhfgf espero que gostem delas também <3










Please comente se baixar, aproveite os recursos <3
Beijossss :*


Leia Mais ►

Pack Icons


AEEEEEYOOOOOO,

Hey manas. Trouxe um pack de icons FEITOS POR MIM com 56 icons maravilhosoooooossssss. Estou tão in love com eles, que eu quase não postei porque estava com ciúmes, me julguem. Estão muito lindos, aaahhhh AHSUHEUHE. 

Enfim, regrinhas do amor: 

— NÃO proclame como seu, é sério. Se eu ver,  não irei ficar quieta e no amor. Não é legal roubar as coisas dos outros, assim como me ver com ódio também não é legal. 

— NÃO REPASSE. 

— Não precisa de créditos, porque eu sei que é chato, mas se quiser, manda link de volta para nós. 

É isso amores. Link para download aqui.

Beijos momos, bom dia/tarde/noite. 


Leia Mais ►

Mini tutorial + Base para icon + PSD'S


Ayo, Painlerss (Eu amo esse nome pro "fandom", me julgue) hoje vim com algo diferente. 

Se você é uma pessoa que gosta de coisas práticas e sem sofrimento, esse post é pra você. 

Então, acredito que todos sabem como produzir os famosos icons, certo? Caso você não saiba, existem diversos tutoriais nas internets (E quem sabe não saia um aqui na Painless Resources no futuro?). 

Instruções e explicações:

Você irá baixar o PSD, do qual estará disponível para download mais abaixo dessa postagem. Logo que abrir, verá que estará assim: 

 Clique na foto para ver em tamanho real.

O PSD já contém a base com as medidas. Então, você salva as fotos que quer fazer o icon, e ajusta na base. 

Uma dica muito, muito grande: 

Quando for ajustar o icon, em vez de clicar diretamente nisso: 


Você vai na imagem que vai fazer o icon , e clica com o botão direito sobre ela. Você verá que irá abrir os comandos: 

Clique para ver em tamanho real.

Você vai clicar em "Converter em objeto inteligente"

Clique para ver em tamanho real.

E agora, você verá que poderá ajustar a imagem com muito mais facilidade, "elasticidade"(?) e melhora. Quando você estiver com os comandos do objeto inteligente sobre a imagem, aí sim, clique naquele ícone que ajusta a imagem: 


E vai ficar assim: 


Ajuste do jeito que você achar melhor, e agora com segurança. Você deve estar se perguntando:  Ué, mas por quê? 

Porque quando você clica diretamente apenas naquele ícone, ele vai tirar completamente a qualidade da sua imagem se você ajustar ele de forma que dê muita elasticidade a imagem. Ou seja, ele não é apropriado para transformações muito grandes como a do icon. Quando você converte em objeto inteligente, o photoshop vai preservar todos os mínimos detalhes e pixels da imagem, fazendo com que ela não fique com qualidade ruim, e você possa transformar ela com tranquilidade, sem medo de perder seu trabalho. Mas lembre-se: depende do tamanho da imagem e qualidade da mesma. Como diz meu pai: "Não vá querer colocar São Paulo dentro de Cerqueira" (Cerqueira é uma cidadezinha ultra pequena que ninguém conhece. Por isso que eu falo que a gente é made in roça. Imagine um troço tão grande quanto São Paulo dentro de Cerqueira? É isso que a metáfora (E ditado do meu pai que é um filósofo conceitual) quer dizer. A conversação em objeto inteligente ajuda pra caramba, mas não vai conseguir deixar a qualidade quando você passa medidas absurdas. 

Mas enfim, voltando à postagem: 

Você percebeu que, ali na área de edição, há cinco PSD'S? Eu escolhi eles, porque pra mim, são ótimos para editar icons. 

Clique na imagem pra ver em tamanho real.

Pois então, você coloca o icon abaixo dos PSD's, ajusta ele como quiser certinho; Após isso, como você pode observar, a visualização dos PSD'S está desativada. Você vai, clica sobre os quadradinhos e vê qual deles é melhor pro seu icon. 


Lembre-se que se você ativar a visibilidade de mais de um ao mesmo tempo, ele sobrepõe um ao outro, e pode fazer com que a qualidade fique ruim ou ultrapasse da vontade do que você quer. 

Enfim. É só ir fazendo tudo o que eu expliquei. E sabe o que é mais legal? Com a base, você não precisa ficar fechando e abrindo nada. É só arrastar a imagem, ajustar e colocar os PSD'S que são bem legais pra usar nessas coisas. Você pode até mesmo puxar mais de uma imagem ao mesmo tempo, e ir sobrepondo uma em cima da outra (tampando-as, claro) e ir salvando, que não dá nada. 

"Tá, mas tia, por que você fez um tutorial e base pra algo tão simples?"

Cacei na internet toda tutoriais de como fazer icons, e não achei nada que explicasse exatamente isso. Davam detalhes mínimos, mas nenhum descomplicava a vida de quem é extremamente iniciante nessa coisa. Principalmente pra pessoa lerdinhas (igual eu), que provavelmente estariam torrando os neurônios até agora com isso.  

Caso tu já tinha a própria base ou já fazia isso antes, baixa que tem PSD legal <3 E pra quem não tinha nada disso antes, já descomplica sua vida. É só abrir o PSD e vráu, mãos na massa. 


(Print de comemoração)



Mas enfim, depois de tanta enrolação, link para download: aqui.

Até meus amores, tenham um dia/tarde/noite maravilhoso <3 

Não se esqueçam de visitar nosso blog oficial <3 
https://painlessdesign.blogspot.com.br/

É NÓIS MANAS 

Inté o/




Leia Mais ►