Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

sábado, 26 de janeiro de 2013

Noções de HTML IV: Resumo da personalização

Tumblr_mgdnro47ce1rfsn7io3_500_large
O 'Noções de HTML' estava ajudando muitas pessoas, então decidi continuar :)
Depois de criar um layout básico vamos á personalização do modelo. 
Preparei um resumo para vocês se virarem na hora e criarem a sua própria div de html! 
Tag:
A maioria das vezes que você vai personalizar alguma coisa, procura pela tag ]]><b:skin>.
Dependendo de qual div você irá usar, irá procurar por outras tags especificamente, mas isso não importa agora. 
Códigos representativos: 
h1 - Título do blog ( <Group description="Blog Title" selector=".header h1">)
h2 - Data do post ( "Date Header" selector=".main-inner h2.date-header")
h3 - Título do post ( h3.post-title {)
h4 - Comentários (#comments h4)
Cores:
As cores são coisas que você vai usar muito. O nome do código delas é código 'hexadecimal'. É aquele simples que tem um # e mais seis letrinhas (hexa). 
Você pode encontrar tabela de cores...
(www) (www) (www)
Personalização da postagem:
A parte do post começa á partir da tag h3. A fonte do título é representada pelo  <Variable name="post.title.font" description="Font" type="font"
Mais em baixo, encontramos o background do post, que geralmente é um fundo branco. 
Tags dicas na hora de personalizar:
Tipos de linhas/bordas:
Solid - normal;
Dashed - tracejada;
Double - dupla;
Dotted - pontilhada;
------------------------------------------------------------
Texto:
uppercase - todas as letras em maiúscula;
lowercase - todas as letras em minúsculo;
none - letras com formatação padrão;
capitalize - primeira letra das palavras em maiúsculo e demais eu minúsculo. 

Por enquanto é só :)
xoxo

Noções de HTML IV: Resumo da personalização

Tumblr_mgdnro47ce1rfsn7io3_500_large
O 'Noções de HTML' estava ajudando muitas pessoas, então decidi continuar :)
Depois de criar um layout básico vamos á personalização do modelo. 
Preparei um resumo para vocês se virarem na hora e criarem a sua própria div de html! 
Tag:
A maioria das vezes que você vai personalizar alguma coisa, procura pela tag ]]><b:skin>.
Dependendo de qual div você irá usar, irá procurar por outras tags especificamente, mas isso não importa agora. 
Códigos representativos: 
h1 - Título do blog ( <Group description="Blog Title" selector=".header h1">)
h2 - Data do post ( "Date Header" selector=".main-inner h2.date-header")
h3 - Título do post ( h3.post-title {)
h4 - Comentários (#comments h4)
Cores:
As cores são coisas que você vai usar muito. O nome do código delas é código 'hexadecimal'. É aquele simples que tem um # e mais seis letrinhas (hexa). 
Você pode encontrar tabela de cores...
(www) (www) (www)
Personalização da postagem:
A parte do post começa á partir da tag h3. A fonte do título é representada pelo  <Variable name="post.title.font" description="Font" type="font"
Mais em baixo, encontramos o background do post, que geralmente é um fundo branco. 
Tags dicas na hora de personalizar:
Tipos de linhas/bordas:
Solid - normal;
Dashed - tracejada;
Double - dupla;
Dotted - pontilhada;
------------------------------------------------------------
Texto:
uppercase - todas as letras em maiúscula;
lowercase - todas as letras em minúsculo;
none - letras com formatação padrão;
capitalize - primeira letra das palavras em maiúsculo e demais eu minúsculo. 

Por enquanto é só :)
xoxo

sexta-feira, 14 de dezembro de 2012

Noções de HTML III: Comentários

Tumblr_mezejt5kec1rivii6o1_500_large
Oba! Faltam só 11 dias para o natal! Quem ai está animado?! 
Quantas vezes, você já viu algum blogueiro reclamando por falta de comentários? Em questão do blog, a aparência é muito importante, depois do conteúdo e erros ortográficos. Enfim, os comentários é onde o seu leitor pode expressar o que ele achou da postagem e do blog em geral, então se você quer comentários, tem que deixar essa área melhor! 
Vamos?! 
Identificações: 
No html: .post-outer .comments { ou #comments {
Cores:  .comments-content .loadmore a {
Comentários do autor: .comments .comments-content .icon.blog-author.
Tipos: 
Incorporado: Quando a área dos comentários fica junto com a postagem, exemplo aqui mesmo no FT. 
Página Inteira: Área dos comentários em uma outra janela inteira. Não recomendo muito :S
Janela pop-up: Se abre outra janelinha. Acho legal, tinha esse no blog, mas coloquei o incorporado para ter a opção de responder, embora não use muito. 
Ocultar: Não aparece a opção, e não dá para ninguém comentar. Não gosto '-'
Tutoriais: 
Comentários com borda arredonda
Personalizar comentários 
ATENÇÃO! 
Nem todos os html's são iguais! 

Hoje foi muito curto, amanhã, falaremos sobre o cabeçalho. 
xoxo, espero que tenha ajudado!

Noções de HTML III: Comentários

Tumblr_mezejt5kec1rivii6o1_500_large
Oba! Faltam só 11 dias para o natal! Quem ai está animado?! 
Quantas vezes, você já viu algum blogueiro reclamando por falta de comentários? Em questão do blog, a aparência é muito importante, depois do conteúdo e erros ortográficos. Enfim, os comentários é onde o seu leitor pode expressar o que ele achou da postagem e do blog em geral, então se você quer comentários, tem que deixar essa área melhor! 
Vamos?! 
Identificações: 
No html: .post-outer .comments { ou #comments {
Cores:  .comments-content .loadmore a {
Comentários do autor: .comments .comments-content .icon.blog-author.
Tipos: 
Incorporado: Quando a área dos comentários fica junto com a postagem, exemplo aqui mesmo no FT. 
Página Inteira: Área dos comentários em uma outra janela inteira. Não recomendo muito :S
Janela pop-up: Se abre outra janelinha. Acho legal, tinha esse no blog, mas coloquei o incorporado para ter a opção de responder, embora não use muito. 
Ocultar: Não aparece a opção, e não dá para ninguém comentar. Não gosto '-'
Tutoriais: 
Comentários com borda arredonda
Personalizar comentários 
ATENÇÃO! 
Nem todos os html's são iguais! 

Hoje foi muito curto, amanhã, falaremos sobre o cabeçalho. 
xoxo, espero que tenha ajudado!

quinta-feira, 13 de dezembro de 2012

Noções de HTML II: Gadgets

Chega de cupcakes haha'
 Na segunda parte do guia de html, iremos aos gadgets. Essa parte é um pouco complicada, pois existem muitos tipos de gadgets, então vamos ficar apenas da parte do html, ok? 
Identificações: 
Código representado: h2 
(Como o do título do post é h3, o do gadget é h2, então quando você for personalizar uma fonte por exemplo, e quiser colocar ela no título dos gadgets [usaremos muito essa palavra nesse post], terá de colocar o "h2" no identificador).
-----------------------------------------------------------------------------------------------------
Título: "Gadget Title" selector="h2"> 
(Talvez terá alguma coisa na frente, como '<Group description='
Texto: "Gadget Text" selector=".sidebar .widget">
('Sidebar' é a coluna lateral, onde ficam os gadgets)
Links: "Gadget Links" selector=".sidebar .widget">
(Também dá para personalizar a cor dos links pela personalização do modelo, mas se quiser colocar algum efeito só nos links da sidebar, provavelmente utiliza-rá essa tag). 
Background: "Gadget Background" selector=".sidebar .widget">
(A borda, por exemplo) 
Background da sidebar: <Group description="Sidebar Background" selector=
Criando o seu gadget
Várias blogueiras/os criam menus que eles disponibilizam para os leitores. Realmente, criar o seu próprio é complicado, mas o bom, é ter uma base. Pegar algum bem simples e personalizar. Claro, creditar do blog que você pegou a base, o gadget original. 
A tag que sempre finalizará alguma coisa, será </div>
Menus: 
Tutoriais de gadgets: 

Até a próxima! <3

Noções de HTML II: Gadgets

Chega de cupcakes haha'
 Na segunda parte do guia de html, iremos aos gadgets. Essa parte é um pouco complicada, pois existem muitos tipos de gadgets, então vamos ficar apenas da parte do html, ok? 
Identificações: 
Código representado: h2 
(Como o do título do post é h3, o do gadget é h2, então quando você for personalizar uma fonte por exemplo, e quiser colocar ela no título dos gadgets [usaremos muito essa palavra nesse post], terá de colocar o "h2" no identificador).
-----------------------------------------------------------------------------------------------------
Título: "Gadget Title" selector="h2"> 
(Talvez terá alguma coisa na frente, como '<Group description='
Texto: "Gadget Text" selector=".sidebar .widget">
('Sidebar' é a coluna lateral, onde ficam os gadgets)
Links: "Gadget Links" selector=".sidebar .widget">
(Também dá para personalizar a cor dos links pela personalização do modelo, mas se quiser colocar algum efeito só nos links da sidebar, provavelmente utiliza-rá essa tag). 
Background: "Gadget Background" selector=".sidebar .widget">
(A borda, por exemplo) 
Background da sidebar: <Group description="Sidebar Background" selector=
Criando o seu gadget
Várias blogueiras/os criam menus que eles disponibilizam para os leitores. Realmente, criar o seu próprio é complicado, mas o bom, é ter uma base. Pegar algum bem simples e personalizar. Claro, creditar do blog que você pegou a base, o gadget original. 
A tag que sempre finalizará alguma coisa, será </div>
Menus: 
Tutoriais de gadgets: 

Até a próxima! <3

quarta-feira, 12 de dezembro de 2012

Noções de HTML: Postagens

Tumblr_mewcc6fz0q1rmb4a0o1_500_large
Quero agradecer ao blog LDB por ter divulgado o FT pela primeira vez ao ter divulgado um blog em post e última, estou honrada e quero agradecer e elogiar, porque o blog é incrível. Visitem lá! Obrigada á minha bebê @JustinPrideFC. Beijinhos, @SmileTheAvril. :)
Vários blogs famosos tem vários tutoriais, e os leitores adoram algumas dicas que não acham em todo lugar. Códigos grandes, pequenos, tudo. Mas para você disponibilizar tags e tutoriais, terá de ser aberto a dúvidas e críticas. "Não achei o código no meu html!" "A tag não funcionou!" "Exclui mais do que deveria sem querer, me ajuda?!" Essas frases são as mais comuns. Você não pode dizer "Vai lá em tal blog perguntar que eu peguei de lá!", é a mesma coisa que dizer "Lá é mais legal!". Então vamos entender mais sobre html?!  
As tags mais comuns:
Existem algumas tags e existem em todos os layouts. Estas quais, são utilizadas em quase todos os tutoriais de personalização. Tais quais são: 
]]></b:skin>
</body>
etc. 
Efeitos: 
Efeito hover - é nada mais, nada menos, um efeito quando o mouse passa por cima de um link ou palavra. Um exemplo são os links aqui mesmo no FT. 
Tutoriais com efeitos hover: 
Efeito de opacidade - é o efeito de que a imagem fica "mais clara" com uma tonalidade menor. 
Localizações básicas: 
h3 é o título do post. Para personalizar essa parte do seu layout, deve procurar por /*Posts. Para personalizar o título, se procura por h3.post-title a {. Depois que você clica no título do post, o código se referindo á depois que você clica, é h3.post-title {.  Para colocar uma borda em baixo do título, como aqui no FT, adicione a tag abaixo em baixo de qualquer um dos códigos acima destacados de verde:
border-bottom: 1px dotted #XXX;
ATENÇÃO: O seu layout pode ser diferente. Se o seu título dos posts do seu blog já forem personalizados, talvez o código esteja diferente. 
Tutoriais: 
Créditos: Kawaii World

Noções de HTML: Postagens

Tumblr_mewcc6fz0q1rmb4a0o1_500_large
Quero agradecer ao blog LDB por ter divulgado o FT pela primeira vez ao ter divulgado um blog em post e última, estou honrada e quero agradecer e elogiar, porque o blog é incrível. Visitem lá! Obrigada á minha bebê @JustinPrideFC. Beijinhos, @SmileTheAvril. :)
Vários blogs famosos tem vários tutoriais, e os leitores adoram algumas dicas que não acham em todo lugar. Códigos grandes, pequenos, tudo. Mas para você disponibilizar tags e tutoriais, terá de ser aberto a dúvidas e críticas. "Não achei o código no meu html!" "A tag não funcionou!" "Exclui mais do que deveria sem querer, me ajuda?!" Essas frases são as mais comuns. Você não pode dizer "Vai lá em tal blog perguntar que eu peguei de lá!", é a mesma coisa que dizer "Lá é mais legal!". Então vamos entender mais sobre html?!  
As tags mais comuns:
Existem algumas tags e existem em todos os layouts. Estas quais, são utilizadas em quase todos os tutoriais de personalização. Tais quais são: 
]]></b:skin>
</body>
etc. 
Efeitos: 
Efeito hover - é nada mais, nada menos, um efeito quando o mouse passa por cima de um link ou palavra. Um exemplo são os links aqui mesmo no FT. 
Tutoriais com efeitos hover: 
Efeito de opacidade - é o efeito de que a imagem fica "mais clara" com uma tonalidade menor. 
Localizações básicas: 
h3 é o título do post. Para personalizar essa parte do seu layout, deve procurar por /*Posts. Para personalizar o título, se procura por h3.post-title a {. Depois que você clica no título do post, o código se referindo á depois que você clica, é h3.post-title {.  Para colocar uma borda em baixo do título, como aqui no FT, adicione a tag abaixo em baixo de qualquer um dos códigos acima destacados de verde:
border-bottom: 1px dotted #XXX;
ATENÇÃO: O seu layout pode ser diferente. Se o seu título dos posts do seu blog já forem personalizados, talvez o código esteja diferente. 
Tutoriais: 
Créditos: Kawaii World