Personalizando a área dos comentários

A área dos comentários do modelo viagem é um cinza bem feinho. Separei 2 tutorial de personalização: um mais simples e outro nem tanto. Escolha somente um deles para colocar no seu blog.

Imagem e Borda no Fundo dos comentários!

 Vá em Design > Editar HTML > Ctrl + F > e procure por > #comments {

[Deve Aparecer Assim.]

#comments {
padding: 15px;

[Coloque Abaixo de padding: 15px;]

background-image: url(URLDAIMAGEM);
border:1px dashed #000000;

[Ficara Assim:]

#comments {
padding: 15px;
background-image: url(URLDAIMAGEM);
border:1px solid #000000;

[Para mudar a cor da borda use a >Tabela de Cor<]

hospede sua imagem e coloque onde esta escrito em cor de rosa,
background-image: url(URLDAIMAGEM)

Caso queira trocar o modelo das bordas, troque

border:1px solid #000000;

por alguma das bordar abaixo.
Veja como fica>click aqui<

border: 2px dotted #000000

border: 2px dashed #000000

border: 1px solid #0000FF

border: 4px double #FF0000

border: 3px groove #6666FF

border: 4px ridge #FFFFCC

border: 3px inset #FFFF99

border: 2px outset #6699FF

Fim!

 o tutorial de como personalizar a área de comentários, espero que gostem:

Desing > HTML > F3/Ctrl+F

Procure por:

#comments {

Caso não ache procure por:  #comments h4 {

Abaixo terá algo assim:

#comments {

  background: $(comments.background);

  padding: 15px;

}

#comments .comment-author {

  padding-top: 1.5em;

}

#comments h4,

#comments .comment-author a,

#comments .comment-timestamp a {

  color: $(post.title.text.color);

}

#comments .comment-author:first-child {

  padding-top: 0;

  border-top: none;

}

.avatar-image-container {

  margin: .2em 0 0;

}

Substitua pelo seguinte código (continue lendo)..

#comments h4 {

  margin: 1em 0;

  font-weight: bold; 

  font-size: 90%;

  line-height: 1.4em;

  letter-spacing:.1em; 

  color: #33CCCC; /*** cor do "Postar um comentário" e "x comentários:" ***/

  }

#comments-block {

  margin:1em 0 1.5em;

  line-height: 1.6em;

  }

#comments-block .comment-author {

  background: #DADADA; /*** fundo do autor ***/

  font-size: 15px; /*** tamanho da fonte do nome do autor ***/

  margin:.5em 0;

  }

#comments-block .comment-body {

  margin:.25em 0 0;

  line-height: 1.4em; /*** espaço entre as linhas ***/

  padding: 8px; /*** margem interno da área do comentário ***/

  background: #F9F9F9; /*** fundo da área do comentário ***/

-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/

-moz-border-radius: 10px;

border-radius: 10px;

  }

#comments-block .comment-footer {

  margin:7px 0 2em;

  line-height: 1.4em; 

  font-size: 90%; /*** tamanho da fonte da data do comentário ***/

  text-align: right; /*** alinhamento da data do comentário ***/

  letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/

  }

#comments-block .comment-body p {

  margin:0 0 .75em;

  }

.deleted-comment {

  margin: 10px 0 2em;

  font-style: italic;

  color: #ERTGKL; /*** cor do recado de 'comentário deletado' ***/

  }

  Entendendo:

Padding: o espaço interior, para dentro da caixa./ Margin: é a margem exterior, para fora.

.deleted-comment {: É o conjunto que customiza quando você deleta algum comentário. Por exemplo, você deletou algum comentário do seu blog aparece essa frase né: "Esta postagem foi removida pelo autor."  Então, a frase ficará em itálico e cinza, se você não mudar nada no código, mais você pode modificar, claro.

line-height: line-height é a distância entre as linhas do texto / letter-spacing:  o espaço entre as letras da palavra. 

Créditos do Artigo:

http://novidadesdatekinha.blogspot.com.br/2012/06/personalizando-seu-proprio-layout.html

http://adolescentario.blogspot.com.br/2012/05/tutorial-personalizando-area-dos.html

Como personalizar seu próprio layout

                                  1ª etapa: Design do Modelo

1. Faça login no blogger >> mais opções >> modelo; (se voce usa a nova interface)
    Painel >> design >> design do modelo; (se voce usa a antiga interface)
  

* Antes de qualquer alteração no design do seu blog, salve uma cópia dele. Caso dê algo errado, tenha como recuperar.

2. Na aba "Modelos" escolha o modelo Viagem azul e branco. Igual o da imagem abaixo:

3. Após ter feito isso, vamos seguir para aba "Plano de fundo" e vamos removê-lo. Você pode colocar um background no seu blog agora ou depois. Recomendo deixar pro final, assim você pode ver o que mais combina com seu blog =)

4. Vamos agora ajustar a largura do blog. Não deixe o blog muito grande, mas também não o deixe muito pequeno. Recomendo deixar 980px no blog todo e 335px a barra lateral.

5. Chegou a parte onde vamos personalizar as cores do blog. Podemos escolher a cor da barra de páginas, dos links, do texto da postagem, data, títulos, etc. Antes de começar a editar as cores é super importante seguir as imagens abaixo. Após isso é só escolher a cores.

Dicas de cores:
Kwaai = (www) (www)
Rock = (www)
Simples = (www)

6. Após todas as alterações clique em "Aplicar ao blog" para salvar.

2ª Etapa: HTML

Depois de ter escolhido as cores e salvado, vamos terminar de personalizar o layout pelo HTML. Antes de salvar qualquer alteração não esqueça de visualizar pra saber se ficou tudo ok. 

7.  No design do modelo clique em "voltar para o blogger" e em seguida editar html;


Vamos remover o babadinho do modelo viagem.

Para isso, tecle F3 e busque por : .content-outer .content-cap-top {

e apague os trechos sublinhados de roxo.

Visualize e veja: aquele babadinho sumiu! Então salve.

Vamos juntar a barra lateral com a área dos posts!

Tecle F3 e procure por : .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

abaixo disso vai ter margin-left: $(content.padding); que você deverá apagar.

Visualize. Juntou?? Então salve!

Juntando área dos posts com o cabeçalho

Tecle novamente F3 e busque por :  .tabs-inner {

abaixo dele tem o  margin: 1em 0 0; que devemos apagar.

Ainda não acabou!!

Agora procure por : padding: $(content.padding) 0;

e abaixo dele cole isso: margin-top: -20px;

Altere os números até juntar tudo, mas creio que -20px já é o suficiente.

Tirando a navbar do blog

Para quem não gosta dela, um tutorial para removê-la.

Tecle F3 e busque por  /* Variable definitions

acima do que você procurou cole:

#navbar-iframe {

display: none !important;

}

body .navbar {

height:0px;

}

.content-outer {

margin-top:0px;

}

Visualize. Se tiver tudo ok, salve!

Créditos do Artigo:

Imagens e informações:http://novidadesdatekinha.blogspot.com.br/2012/06/personalizando-seu-proprio-layout.html

Aprenda a personalizar seu blog

O serviço mais utilizado para propagar ideias na internet acaba de ganhar uma nova ferramenta. Como você já deve imaginar, o Blogspot, sistema de blogagem do Google, é um dos preferidos dos internautas quando se trata de fazer um espaço para expor ideias, textos e qualquer outro tipo de informação que você queira dividir com os outros.


Entretanto, um dos motivos pelos quais muita gente vinha ficando insatisfeita está prestes a ser eliminado. O fato é que o modelo de layout que o Blogspot disponibilizava estava limitando a criatividade do usuário que queria ter um blog personalizado, com aquilo que tem a ver com o seu tema de discussão

Com a novidade, o Blogspot está mais poderoso do que nunca com layouts completamente personalizáveis. Esse novo recurso se chama Draft e tem tudo para recuperar os usuários que podem ter se perdido pelo caminho.  Para começar a personalizar seus layouts, você só precisa acessar o seu blog e clicar na aba “Design”.

Seu blog, seu estilo
Nada pior do que depender de layouts sobre os quais você não tem o mínimo controle. Podem existir templates prontos que você só precise copiar os códigos e colar na área de design do Blogspot. Porém, o controle ainda está limitado, a não ser que você conheça bastante sobre programação e códigos estruturais como o HTML.
Do contrário, o Draft é uma opção muito válida para quem não sabe muita coisa sobre CSS e HTML  Para começar a editar seu layout, basta clicar em “Designer do Modelo” e aguardar a aba de opções carregar.

Logo que você estiver na janela de edição, vai reparar que o Draft possui etapas bem definidas. O primeiro passo consiste em escolher um modelo de base para iniciar as alterações. Nessa primeira etapa, basta determinar um exemplo simples para isso. Ao clicar em uma opção, outra lista de layouts vai aparecer. Depois disso, clique naquele que mais o agradar.

Esquemas de cores
O passo seguinte envolve escolher as cores e o plano de fundo do seu layout. Clique no menu da imagem e aguarde o carregamento das opções disponíveis. As categorias das fotos estão divididas de acordo com o tema de cada uma delas. Depois de escolher essa figura, passe para os menus ao lado direito. Ali você vê uma série de combinações de cores.

Selecione aquela que combinar melhor com a imagem escolhida ou então monte uma paleta de cores para usar nos links, textos e outros elementos da sua página. É importante que você tenha certeza de que as cores pertencem ao mesmo grupo. Assim, você corre menos riscos de ter algo colorido demais na sua tela.

Estrutura
Um layout só fica completo quando você determina qual é o tipo de estrutura que ele deve seguir. Para isso, clique em “Layout”, no menu lateral do Draft. Ali você vê uma série de modelos que podem ser usados no seu blog. A variedade é bastante grande e as opções de posicionamento e número de colunas é muito interessante.

Primeiro, é preciso escolher o modelo do “esqueleto”. Depois, escolha como o rodapé será dividido: uma, duas ou três partes. Por último, é hora de determinar a largura de todos esses elementos. Quando terminar essa etapa, é hora de seguir em frente!
Detalhes finais
É hora de definir detalhes importantíssimos, como a fonte a ser utilizada no seu blog, as cores e ,se você quiser, uma folha de estilos CSS. Entretanto, existe sempre a opção de personalizar essa parte manualmente, com o editor visual do Draft. É importante que você se lembre de alterar a área que deve ser personalizada. Use o menu lateral para isso.

Para adicionar uma folha de estilos CSS ao seu blog, desça o menu lateral até a opção “Adicionar CSS”. Ao clicar nesse link, você vê uma caixa de edição de texto. Cole o código do CSS nesse espaço para garantir que tudo será usado como está determinado nesse documento.

Mas, se você preferir guiar-se pelo próprio editor, não há o menor problema. Só é preciso que você se lembre de alterar as funções a serem personalizadas. Quando terminar, clique no botão “Aplicar ao Blog”, localizado no canto superior esquerdo da sua janela. Feito isso, seu blog está personalizadíssimo!
Agora, é só postar e se divertir com o blog que está a sua cara!

Por Luísa Barwinski em 14 de Junho de 2010



Créditos do Artigo:
Imagens e Informações:http://www.tecmundo.com.br/google/4412-aprenda-a-personalizar-seu-blog-ao-maximo-.htm
Texto de:Por Luísa Barwinski em 14 de Junho de 2010

Se Jogue!

Meninas, Vejam que lindo esse Maxicolar,que estas endo sorteado pelo blog Tricotando a vida.

Já estou participando e você o que estão esperando?

Vejam nesse link as informações:

http://www.drikabello.blogspot.com.br/2013/01/sorteio-do-2-maxi-colar-pinkbiju-na-cor.html

Sorteios

Gente,veja que legal ta rolando sorteios no blog da amiga Lilian Almeida, " Duas Moças Prendadas".
Muito prêmio bacana,olhe:

Ficaram,com Vontade de participar?

Então vejam aqui no link as informações:

http://casascoisaseoutros.blogspot.com.br/p/sorteios.html

Vamos,nessa também fiquei muito encantada com esses mimos!

Boas Vindas á 2013!

ERA DE AQUÁRIO

 

Quando a lua está na sétima casa

E Júpiter alinhado com Marte

A paz vai guiar os planetas

E o amor irá além das estrelas

Esse é o começo da era de aquários

Era de aquários

Aquários! Aquários!

Harmonia e compreensão

Simpatia e confiança em abundância

Nenhuma falsidade ou escárnio

Visões vivas de sonhos dourados

A revelação do Cristal místico

E a verdadeira liberação da mente

Aquários! Aquários!

Quando a lua está na sétima casa

E Júpiter alinhado com Marte

A paz vai guiar os planetas

E o amor irá além das estrelas

Esse é o começo da era de aquários

Era de aquários

Aquários! Aquários!

Harmonia e compreensão

Simpatia e confiança em abundância

Nenhuma falsidade ou escárnio

Visões vivas de sonhos dourados

A revelação do Cristal místico

E a verdadeira liberação da mente

Aquários! Aquários!

Eu,Luana Romariz Desejo aos leitores e seguidores dos meus blog:

Vive la Fête de Mariage

Seja Bem Vindo em Casa

Confraria do Blog

Nas Águas de uma RP

Degustar Salvador

Que este ano se inicia traga a você a permissão para ser uma METAMORFOSE AMBULANTE, em sua Vida!

PERMITA-SE AO 2013!

Tempos Modernos

Lulu Santos

Eu vejo a vida
Melhor no futuro
Eu vejo isso
Por cima de um muro
De hipocrisia
Que insiste
Em nos rodear...

Eu vejo a vida
Mais clara e farta
Repleta de toda
Satisfação
Que se tem direito
Do firmamento ao chão...

Eu quero crer
No amor numa boa
Que isso valha
Pra qualquer pessoa
Que realizar, a força
Que tem uma paixão...

Eu vejo um novo
Começo de era
De gente fina
Elegante e sincera
Com habilidade
Pra dizer mais sim
Do que não, não, não...

Hoje o tempo voa amor
Escorre pelas mãos
Mesmo sem se sentir
Não há tempo
Que volte amor
Vamos viver tudo
Que há pra viver
Vamos nos permitir...

Eu quero crer
No amor numa boa
Que isso valha
Pra qualquer pessoa
Que realizar, a força
Que tem uma paixão...

Eu vejo um novo
Começo de era
De gente fina
Elegante e sincera
Com habilidade
Pra dizer mais sim
Do que não...

Hoje o tempo voa amor
Escorre pelas mãos
Mesmo sem se sentir
E não há tempo
Que volte amor
Vamos viver tudo
Que há prá viver
Vamos nos permitir...

E não há tempo
Que volte amor
Vamos viver tudo
Que há pra viver
Vamos nos permitir...
ESSES SÃO OS OS MEUS VOTOS DE BOAS VINDAS AO ANO DE 2013!