Comentários Incorporados #2 super

Olá pessoal, num post, eu ensinei a como personalizar os comentários incorporados simples, agora, é os comentários incorporados super, o mais personalizado. Então, quer aprender a fazer um super personalizado? então, clique em leia mais, e vamos nessa!

 Bom vamos começar o tutorial!

1- primeiro você tem que marcar a opção comentários incorporados, se não, não vai funcionar, para isso vá em: Configurações // postagens e comentários // comentários // local do comentário // incorporado // Salve e pronto! agora vamos começar!

2- seguindo na mesma página que você parou no passo acima, clique em: Modelo // Editar html // prosseguir  e procure por: #comments {  Depois que você achar ele, apague apenas até o fechamento das chaves " }". e cole esse código no lugar:

#comments {
padding: 15px;
background: url("url-da-imagem-de-fundo-dos-comentarios"); /* BACKGROUND/FUNDO DOS COMENTARIOS */
}

3- depois disso procure por: /* Comments  Quando achar, seleciono tudo abaixo dele, e cole esse no lugar dele:

/* Comments
----------------------------------------------- */
.comments .comment-block {background: #E6E8FA; /* cor do background, entenda na legenda */
border-radius: 10px; /*tamanho da borda arredondada se não quiser, apague esse código*/
border: 2px solid #000; /* bordas, tamanho, formato e cor */
}
.comments .avatar-image-container {float: left;
max-height: 36px;
overflow: hidden;
width: 36px;
border-radius: 15px; /* tamanho do arredondamento da imagem do comentarista */
border: 4px solid #000; /* bordas tamanho, formato, e cor */
}
.comments .comments-content .comment-content {background: #ffffff; /* background- fundo do texto do comentarista */
}

Legenda:

a imagem abaixo representa, o mesmo código acima:

pronto, depois que estiver tudo ao seu gosto, salve!

beijos,

até o próximo post,

Comentem!!

Personalizando A Data do post

Oi pessoal, o post de hoje vai ser super fácil, bacana, divertido e rápido. Mais antes de começarmos, queria pedir desculpas a vocês, pois fiquei sem ver o blog por 4 dias... Mais agora estou de volta, e com um layout super novinho, gostaram? Então vamos ao tutorial!..

                  
Clique em leia mais, e confira o tutorial!!

Vamos lá!
vá em:  Blogger >> Modelos >> Editar Html - Prosseguir 

Depois, clique (CTRL+F -para procurar) e procure por:

.main-inner h2.date-header {

 depois de achar, selecione o trecho dele, todo até as chaves, e cole o seguinte código no lugar:

/* Data Do post
----------------------------------------------- */
.main-inner h2.date-header {
background: #000000; /*---Cor do back---*/
color: #ffffff; /*---Cor da letra---*/
width: 10%; /*---Tamanho do back, não altere nada aqui---*/
margin-bottom: -60px; /*---margin, a baixo---*/
font-family: verdana; /*---estilo da fonte---*/
}

Quando fizer isso, visualize, e depois salve. Espera, que ainda não acabou.. Tem mais,
Se ficar desalinhado, copie o código abaixo e cole acima de: ]]></b:skin>

/* data do post
----------------------------------------------- */
.main-inner h2.date-header {
margin-left:-60px; /*--- Pxs para a esquerda---*/
margin-rigth: -60px; /*---pxs para a direita---*/
border: 1px solid #ff50ff; /*---bordas em volta do back---*/
}

pronto, agora faça a personalização ao seu gosto. depois visualize e salve!
Agora vá em: Configurações >> idioma e formatação : Formatação- formato da data

deixe a data no 4° modelo, que é um assim: 28/08/12, para ficar legal...
salve, e pronto!

beijos,
e ai, gostaram do post?
o que acharam? 

Criando Elemento a mais no seu Html

Bom gente o nosso post de hoje também vai ser um tutorial que eu mesma descobri, com ajuda de css e minha experiencia, fiz um elemento a mais no meu html,igual a um menu cute, mais em vez de ser com links, é em texto. Pode ser usado nas páginas, como gadget, como postagem a lista é infinita Claro que você não pode é postar no Face, twitter, orkut, pois não faz parte, é só no blog mesmo. Bem eu lhe dei esse nome de titulo é pois ainda não sei o nome para dar a ele, (se vocês sabem o nome, por favor comente nesse post). bem gente é isso, para saber qual é o elemento e para saber como fazer ele, clique em leia mais, e viaje no Html...
                 
Antes de tudo, vocês tem que ver o que é, olhe esse texto abaixo e passe o mouse por cima dele para ver, é isso que nós vamos aprender a fazer..

Passe o mouse aqui por cima para ver o efeito do tutorial

já viu? então gostou? é isso que nós vamos aprender a fazer agora! é só seguir os passos abaixo, com atenção:

1- faça login no seu blog, e clique em: Modelos >> Editar Html >> Prosseguir
2- Depois clique F3 e procure por:

/* Variable Definitions

ou procure por:

]]></b:skin>

3- acima dele colo esse código:

/* Estilo deby sabe tudo ----------------------------------------------- */
#campoatençao {
display:block;
font-size: 12px; /* tamanho da fonte */
font-family: arial; /* nome da fonte */
letter-spacing: 0;
border: 1px solid #ff50ff; /*bordas no quadrado*/
text-indent: 5px;
vertical-align: middle;
line-height: 15px;
background: #ffbbff; /* cor do background*/
color: #000000; /*cor da fonte*/
padding-left: 10px;
}

#campoatençao:hover {
display:block;
vertical-align: middle;
line-height: 15px;
background: #ff50ff; /*background do fundo hover (quando passar o mouse por cima)*/ color: #000000; /*cor da fonte hover*/
padding-left: 10px;
}

 4- agora é só você personalizar esse código como quiser, apenas edite o que esta de vermelho! no código esta a descrição.
5- agora salve.
6- agora vá em postar postagem, ou o lugar onde você quer colocar o efeito, mais não se esquece, que o efeito só vai pegar se você editar o post, pagina, ou gadget em html. e cole isso sempre que você quiser usar o efeito:

<div id="campoatençao"> Escreva o que quer que fique com o efeito, escreva um texto</div>

bem gente é só isso, não se esqueça de editar a pagina em html, se não digitar em html o efeito não pega!

bem gente fiquem com deus.
comentem a vontade, diga o que achou do post!

                                                                                                                                 BEIJOS
                                                                                                                       ATÉ A PROXIMA 

Tutorial: Modificando a linha de separação dos Gadgets

Olá meninas e meninos, como vão? Hoje vou ensinar um tutorial que descobri, que é personalizar (Mudar) a aquela barrinha que separa os gadgets. Bem é simples e fácil também.Para vocês entenderem melhor o que é, tem uma imagem abaixo de como vai ficar:

                                 
 Então vamos, lá! clique em leia mais para saber como fazer!

Então gente vamos lá ao tutorial.
1- vá no seu html e  procure pelo seguinte código:

.sidebar .widget {

 2- Abaixo dele vai está mais ou menos assim:


  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}


3- então você vai apagar somente isso:


  border-bottom: 2px solid $(widget.border.bevel.color);


4- e cole isso no lugar:


border-bottom: 1px dashed #ffffff;


5- ai é só editar conforme a legenda abaixo:

Vermelho: a espessura da borda.
Verde: é a forma (jeito) da borda. Se quiser, veja nesse link AQUI!
Roxo: é a cor da borda. Se quiser, veja cores em html aqui!

Bem gente, é só isso!
beijos gente, comentem bastante!