Como criar um layout lindo + Como deixar seu blog famoso.

Primeiramente se você estiver atualmente em seu blog usando um layout free , vá em modelo e escolha o modelo travel .

Agora coloque o plano de fundo que deseja . No meu caso vou escolher um background cinza , mas é opcional .

Agora que já escolheu seu background vamos retirar essa bordinha de papel horrível .

Procure Por :

.content-outer.content-cap-top {

Quando aparecer , apague as seguintes partes :

(apague o que estiver grifado!)

Depois vai ficar assim :

Agora faça uma postagem-teste usando negrito itálico e sublinhado .

Assim :

Agora , vá em Modelos > Personalizar > plano de fundo da barra lateral > transparente . Depois salve . Agora vamos mecher na parte da ''postagem'' , no meu caso vou começar pela imagem , eu vou colocar um efeito an imagem . Coloque o efeito que quiser , eu se preferir , não coloque . Eu coloquei o efeito giratório . Vamos agora retirar o ''compartilhar essa postagem'' Eu acho horrível isso , por isso vamos tirar , não sou só eu que acho , todas as blogueiras acham que isso não ajuda e só deixa a aba de postagem mais feia . Para tirar vá em layout > postagem > depois discelecione o botãozinho de compartilhamento . Agora , vamos mudar os links do blog . Para isso você precisa ter uma paleta de cores para saber que cor você vai usar as cores do blog . Aqui neste blog está cheio de paletas lindas , confiram aqui . Eu vou usar esta paleta aqui . Agora você já sabe as cores que vai usar em seu blog . 

Agora , vamos tirar a navbar do blog . Para isso , vá em layout > navbar > desativado . Depois salve . 

Vai ficar mais ou menos assim : 

PS : EU JUNTEI AS DUAS POSTAGEM PARA VOCÊS VEREM QUE FOI RETIRADO!!

Bom , agora vamos mudar O título da postagem . Para centralizar o título do post clique aqui , paraadicionar uma fonte diferente no título do post clique aqui .

Seu layout deve estar mais ou menos assim :

Agora está quase melhorando . Vamos agora mudar o leia mais ?

aqui tem vários modelos de leia mais . Escolha um que tenha a ver com sua paleta de cores .

Esta ficando bem legal não está ? olhem :

Agora vamos colocar sidebars no gadgets , aqui tem 2 modelos cuties que achei no Kawaii World :

.sidebar .widget {
width:100% !important;
background:#fff;
border-bottom:5px #faafd0 solid;
margin:15px 0 !important;
border-radius:0 0 0 0;
padding:10px;
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
overflow:hidden
}
.sidebar h2 {
font-family: Verdana;
font-size: 18px;
color: #fff;
background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/84-1.png) no-repeat center;
height: 25px;
width: 300px;
text-align: center;
margin-top:-5px ;
margin-left:-9px ;
margin-bottom:10px;
padding:5px;
width:112%;
}

.sidebar .widget {
width:100% !important;
background:#fff;
border-bottom:10px #ffc0cb solid;
margin:15px 0 !important;
border-radius:0 0 0 0;
padding:10px;
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
overflow:hidden
}
.sidebar h2 {
font-family: Verdana;
font-size: 18px;
color: #fff;
background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/86.png) no-repeat center;
height: 35px;
width: 200px;
text-align: center;
text-shadow: 1px 2px 3px #dd8b99;
margin-top:-12px ;
margin-left:-25px ;
margin-bottom:12px;
padding:6px;
width:115%;
}

Vou usar a rosa pois combina com minha paleta de cores . 
Dá uma olhadinha de como está ficando : 

Está ficando Legal não está ? 

Agora , você pode colocar seleção colorida , barra de rolagem colorida entre outros..

Vamos agora mudar o itálico negrito e sublinhado . Use este tutorial . 

Agora , os últimos detalhes :

- Mudar o "Nenhum Comentário:"

- Remover Attribution
- Remover "Assinar: Postagens (Atom)"

Prontinho! Agora você Já Tem seu lindo Layout!! Olha só como ficou :

Depois costumise do seu jeito , faça o cabeçalho e etc...

Bom agora vamos as dicas ? 

1-Para não ser vitíma dos ''CopCatys'' Tire a seleção de seu blog . 

2-Para conseguir seguidores , sempre no post coloque imagem , e faça um post inteligente , se não for inteligente ninguém vai querer seguir um blog que a dona  escreve como uma criança de 5 anos . 

3- Se seu blog tiver menos de 4 seguidores e é antigo , é momento de você se preocupar , de começar a postar  muitos tutoriais , goodies e etc... Mude seu jeito de escrever ( por que também pode ser isso) pare de escrever como uma menina de 5 anos , faça um novo lay bem elaborado e lindo , e com essas dicas você vai conseguir! É isso gente , espero que tenham gostado e obrigada Kawaii World por ter disponibilizado algumas dicas .

Tutorial: Personalizar a sidebar

1º vá em Design, depois em Modelo e depois em Editar HTML e aperte em Prosseguir.Depois disso , aperte Ctrl F e procure por ]]></b:skin> assim q aparecer, a cima dessa tag,vc cole esse código abaixo:

                                            /* Sidebar personalizada - blogthistime.blogspot.com */
.sidebar .widget {
background: #ffffff; /* Cor do fundo */
border-radius: 10px; /* Bordas arredondadas */
padding: 10px;
-webkit-box-shadow: 4px 3px 5px rgba(50, 50, 50, 0.42);
-moz-box-shadow:    4px 3px 5px rgba(50, 50, 50, 0.42);
box-shadow:         4px 3px 5px rgba(50, 50, 50, 0.42);
}
/* Título dos gadgets*/
.sidebar h2 {
font-family: Terminal Dosis; /*Tipo de fonte*/
text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.52);
font-size: 25px; /*Tamanho da fonte*/
color: #ffffff; /*Cor da fonte*/
background: url("URL-DA-IMAGEM") no-repeat center; /* Fundo */
height: 30px;/*Altura da imagem*/
width: 270px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
float: right; /* Se não ficar bom, mude para left */
} /* Fim da sidebar personalizada */

Onde está em Negrito altere com a sua decisão , e eu trouce tbm alguns ribbons para vcs usarem na faixa do gadget:

 
 
 
 

 

Coisas fofas do Monokuro Boo para colocar em um blog.

Trabalho diário:

  

Código:

<embed src="http://blog.roodo.com/prb999/cb89462f.swf" width="160" height="180"  wmode="transparent"  flashvars="v_wd=Escreva aqui!&v_t=2007/4/10">

Marque:

Código:

<embed src="http://blog.roodo.com/prb999/9f4c599d.swf" width="350" height="25" FlashVars="txt=Escreva aqui">

Calendário:

Código:

<embed src="http://blog.roodo.com/prb999/8bf17c76.swf" width="160" height="250" wmode="transparent">

Big tutorial II - Criando Um template -Parte 1

Eu sei que eu já tinha postado sobre isso , mas hoje , eu vou postar um layout completo , e ainda , vou trazer alguns códigos para ficar mais completo .
Primeiro , você irá escolher o modelo travel :

(modelo em vermelho)

Repare que este modelo , há uma bordinha de papel , vamos retira-lá :

Vá em seu HTML e procure por :

    apague aonde está em vermelho .

Visualize , se estiver tudo certo , salve.

Muita gente me pergunta , por que usar o modelo travel . Acontece que todos os códigos pegam neste modelo e ele é muito bom!

Agora , vamos colocar um background ?

Modelos :

Vamos ver como ficou?

Agora , faça uma postagem teste com negrito , itálico , sublinhado , tachado , bloquote e leia mais.

repare que o fundo ficou transparente . Agora eu vou ensinar como fazer o fundo ficar branco e colocar bordas nas postagens e ao mesmo tempo separa-las .

 Vá em seu HTML e procure por :

.main-inner .column-center-outer {

  background: $(post.background.color) $(post.background.url) repeat scroll top left;

  _background-image: none;

}

Apague todo esse código e no lugar cole :

.post-outer {

margin: 4px 2px 30px;

padding: 10px 10px;

background:#Cor;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

er-top: 5px solid #Cor; /*------------Cor da barra de baixo------*/

border-radius:2px; /*-------------Arredondamento da área--------*/

border-bottom: 5px solid #Cor da Borda de Cima;

border-top: 5px solid #Cor da Borda de Baixo;

box-shadow: inset 0 0 6px #Cor, 0 0 1px #Cor;

}

Para colocar esse efeito na sidebar , procure por :

]]></b:skin>

  e em cima da tag , cole :

.sidebar .widget {

background:#Cor; /*--------Cor do fundo------*/

border-top: 5px solid #Cor da Borda de cima; /*------------Cor da barra de baixo------*/

padding: 5px; /*------------Espaço interno------*/

margin-left: -13px; /*------------Espaço externo da esquerda------*/

margin-top: 0px; /*------------Espaço externo de cima------*/

margin-bottom:25px; /*------------Espaço externo de baixo------*/

border-radius:2px; /*-------------Arredondamento do gadget--------*/

border-bottom: 5px solid #Cor da Borda De Baixo;

box-shadow: inset 0 0 6px #Cor, 0 0 1px #Cor;

}

Repare que , quando você coloca o efeito na sidebar , fica atráz um fundo branco que atrapalha , para tira-lo , é só ir em personalizar > avançado > plano de fundo da barra lateral . Coloque em transparente .

Vamos personalizar a sidebar ? Primeiro , eu achei alguns modelos no Kawaii World :

.sidebar h2 {
font-family: Tahoma;
text-transform: uppercase;
letter-spacing: 3px;
color: #ccac90;
border-bottom: 1px dotted #c8bcb2;
font-size: 11px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 6px;
color: #b39478;
   -webkit-transition-duration: .50s;
}

@font-face {font-family: "beat"; src: url('http://static.tumblr.com/0xqvkot/qoCmj9gu6/altehaasgroteskregular.ttf');}
.sidebar h2 {
font-family: beat;
text-transform: uppercase;
letter-spacing: 3px;
color: #f38a97;
text-shadow:0 1px #cccccc;
border-bottom: 1px solid #e5e5e5;
font-size: 13px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 1px;
color: #d0d0d0;
   -webkit-transition-duration: .50s;
}

.sidebar h2 {
font-family: Tahoma;
font-size: 14px;
color: #aeaeae;
text-transform: uppercase;
text-shadow:0 1px #dbdbdb;
background-color: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 5px;
margin: 2px;
border-bottom: solid 1px #e3e1e2;
text-align: center;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
color: #d9d8d9;
   -webkit-transition-duration: .50s;
}

Agora , vamos personalizar a área da postagem .

Primeiro , vamos retirar o ''compartilhar postagem''

Agora , vamos personalizar o negrito , itálico , sublinhado e tachado ?

Bom , eu achei o tuto no Designer Lovers  , e ele fica com uma sombra *-*

/* Personalização por Designer Lovers */

b { /*Estilo do negrito */

color:#Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .60s;

}

b:hover { /*Estilo do negrito quando passa o mouse */

color:#Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;

}

i { /*Estilo do itálico */

color: #Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;

}

i:hover { /*Estilo do itálico quando passa o mouse */

color: #Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;

}

u { /*Estilo do sublinhado */

color:#cor;

cursor: help;

text-decoration: none;

border-bottom: 1px dotted #Cor do sublinhado;

text-shadow: 0px 0px 1px #cor da sombra;

-webkit-transition-duration: .50s;

}

u:hover { /*Estilo do sublinhado quando passa o mouse */

color:#Cor;

cursor: help;

text-decoration: none;

border-bottom: 1px dashed #Cor do sublinhado;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;}

s, strike { /* Estilo do riscado */

color: #Cor; 

cursor: help; 

text-shadow: 0px 0px 1px #Cor da Sombra;}

/* Fim do código, se usar credite! */

Agora , vamos personalizar o bloquote .

Esse tutorial , achei no Sweet Girl :

.post blockquote {

background: #Cor; /* fundo */

padding: 3px; /* acolchoamento */

border-left: 13px solid #Cor; /* espessura, tipo e cor da borda esquerda */

border-right: 13px solid #Cor; /* espessura, tipo e cor da borda direita */

transition-duration: 1s; /* transição */

-moz-transition-duration: 1s; /* transição */

-webkit-transition-duration: 1s; /* transição */

}

.post blockquote:hover { /* quando o mouse passa por cima */

border-left: 13px solid #Cor; /* espessura, tipo e cor da borda esquerda */

border-right: 13px solid #Cor; /* espessura, tipo e cor da borda direita */

}

Vamos agora , personalizar o leia mais .

Aprendi no Sixteen Springs 

Procure por ]]></b:skin>

.jump-link  {
text-align: left; /* posicionamento do leia mais */
margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */
margin-bottom: 15px;
}
.jump-link a {
padding: 4px; /*acolchoamento entre o fundo e o texto */
color: #ff7db7 ; /* cor do texto */
background: #fff; /* cor do fundo */
font-family: arial; /* tipo de letra */
box-shadow: inset 0 0 2px #eee, 0 0 2px #ccc;  /*cor da borda*/
-moz-border-radius:  3px; /* bordas arredondas */
-webkit-border-radius:  3px;  /* bordas arredondas */
border-radius: 3px;  /* bordas arredondas */
}

Bom , agora , vamos tirar o sublinhado dos links e personaliza-los .

Primeiro , vá em seu HTML e procure por : 

Underline .

Todos que estiverem com Underline , troque por None .

Vamos personalizar os links ?

Procure por 

a:link {

Agora , apague todo esse código :

 a:link {text-decoration:none;color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Cole no lugar :

a:link {color: #E9A1C0; /* Cor do link*/text-decoration: none;-webkit-transition: color 0.7s ease-out;-moz-transition:color 0.7s ease-out;transition: color 0.7s ease-out;}a:visited {color: #33CCCC; /*Cor dos links visitados*/text-decoration:none;filter:alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}a:hover {color: #707070; /*Cor do link quando passa o mouse*/text-decoration:none;filter:alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}

Para mudar os links da sidebar , procure por :

.sidebar .widget a:link {  color: $(widget.link.color);
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}
.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
}