Estilos Fofos Prontos para seus Posts e Sidebars!


Olá!!! Eu iria postar hoje como fazer para separar os widgets da sidebar e os posts; mas aí, conforme fui editando aqui, foi ficando tão fofinho que pensei: melhor deixar tudo pronto para quem quiser usar não é :3
Então trouxe estilos (css) prontos para postagens e sidebar, basta editar ou acrescentar o que desejarem. Já está tudo separadinho, de um post a outro, de um widget a outro, com títulos, efeitos, alinhamento de textos e imagens, listas, seleção colorida, leia mais, formatações de textos e links...quase que eu uso aqui rsrsrs...Vocês irão obter estes resultados:
Nos posts:
Na sidebar:
E esse post torna-se um complemento para o tutorial de remover a borda serrilhada do modelo Travel; foi testado no modelo Simple também.
Vá em Modelo - Personalizar - Avançado - Deixe os planos de fundo transparentes (Plano de Fundo Principal, da Postagem e da Barra Lateral)...
1. Personalizando a área de Postagens
Ainda em Avançado, vá até Adicionar CSS e cole:
/* Kawaii Posts By Roberta-reinokawaii.blogspot.com
---------------------------------------------------- *//**titulos**/
.post h3 a, .post h3 a:visited, .post h3, .comments h4 {
background: #fff;
color:#fcc;
font-size:22px;
font-family: 'Milonga', cursive;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 2px dashed #eee;
text-align: right;
}
.post h3 a:hover {
color: #eee;
text-align: right;
 -webkit-transition-duration: .30s;
}
/**area da postagem**/
.post{
background: #ffffff;
width: 600px;
color: #a1a1a1;
font-family: 'Milonga' cursive;
font-size: 12px;
text-shadow: 1px 2px 3px #eee;
text-align: justify;
border: 6px dashed #fee;
padding-right:10px;
padding-left: 10px;
box-shadow: 3px 4px 5px #bbb;
margin:10px 0;
}
/**rodape do post**/
.post-footer {
  margin: .5em 0;
  line-height: 1.6;
background: none;
color: #fcc;
width: 500px;
font-family: 'Milonga', cursive;
font-size: 12px;
}
.post-footer a{
color:#fcc;
}
.post-footer a:hover{
color:#fcc;
}
/**estilos das listas**/
.post ul li {
 list-style: none;
 margin: 0;
 padding: 0;
    padding: 0 0 4px 12px;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFMu_06X2YRCDXy_-9gaCthdsgqFoI8qnkR8uJCxOYmBYX9yKFXHHndESZDaG5j1SA8fLTQEsXVX80zECjx3mGkJi2tvSB_lyCYYSY3bl7H0SmxdN5BsC7SlTCWJG9g4nWtCBw7xB/s1600/favlaco.gif") no-repeat 0 2px;
}
/**selecao colorida para o blog todo**/
*::-moz-selection {
background: #fff !important;
color: #fcc !important;
}
*::selection {
background: #fff !important;
color: #fcc !important;
}
/**estilo do leia mais**/
.jump-link {
float: center;
font-weight: bold;
font-size: 26px;
font-family: 'Milonga' cursive;
text-align:right;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #fcc; /* Cor do texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
color: #fee; /* Cor do texto */
text-decoration:none;
}
/**efeito nas imagens**/
.post-body img:hover {-moz-opacity:0.30; opacity:0.30;-khtml-opacity:0.50;-webkit-transition:  0.4s; -moz-transition: 0.4s;transition: 0.4s;}
/**tamanho padrão para imagem**/
.post a img, .post img {
  max-width: 530px;
  margin: 0 auto;
  padding: 5px;
}
/**formatacao de texto**/
u {/* Sublinhado */
text-decoration:none;
color:#61D2D6;
border-bottom: 1px solid #9BF0E9;
-webkit-transition: 0.4s;
}
u:hover {/* Sublinhado hover */
border-bottom: 1px solid #EDDE45;
-webkit-transition: 0.4s;
}
b, strong { /* Negrito */
color: #ED146F;
font-weight: bold; 
}
i,em { /* Italico */
color: #EA3556;
text-decoration: none;
}
strike { /* Riscado */
text-decoration: strike;
color:#EB9F9F;
}
strike:hover { /* Riscado hover */
text-decoration: none;
color:#EB9F9F;
}
/**background e borda dos comentarios**/
.comments {
background: #fff;
width: 100%;
padding: 5px;
border: 6px dashed #fee;
}

2. Personalizando a Sidebar
Em seguida, cole isso:
/* Kawaii Sidebar By Roberta-reinokawaii.blogspot.com
---------------------------------------------------- *//**area geral dos widgets**/
.sidebar .widget {
background: #fff;
margin: 10px 0;
width: 240px;
padding: 0 0 5px 0;
border-bottom: 5px solid #fcc; 
color: #a1a1a1;
border: 6px dashed #fee;
padding: 4px;
}
/**titulos dos widgets**/
.sidebar .widget h2 {
background: #fcc;
width: 240px;
font-family: 'Milonga', cursive;
font-size: 20px;
color: #fee;
text-shadow: 1px 2px 3px #fcc;
border-bottom: 10px solid #eeffff;
}
/**estilos das listas**/
#sidebar ul {
 list-style: none;
 margin:0 0 10px 0;
 padding:0;
}
.sidebar ul li {
 list-style: none;
 margin: 0;
 padding: 0;
 border-bottom:1px dotted #C1C1C1;
    padding: 0 0 4px 12px;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywj1xyC5zRdXOfpDVzN55doXMRyPVGar2cB15NKzzWa7iX6d72sFVEqaWJWkVv6Zbo0jbiyRsO0LeH_RTZdWWNTR0MorAJd5N3xYSAk9M6UEYZCj_pw2KBUBQIjsOYy0JFy1lk02f/s1600/mini-153.gif") no-repeat 0 2px;
}
/**links**/
.sidebar .widget a:link {
  color: #fcc;
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: #fcc;
}
.sidebar .widget a:hover {
  color: #fee;
  text-decoration: none;
border-bottom: 1px dotted #fcc;
}

A visualização é automática; edite como preferir, mas peço que mantenha os créditos ok? Clique no botão Aplicar ao Blog quando terminar de editar. Volte para Modelo, e em Editar HTML acrescente abaixo de <head> essa fonte fofinha:
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/>

Os títulos de contagem de comentários ficam personalizados iguais aos dos posts; verifique se você já usa algum dos estilos, por exemplo, se já estiver usando css para o leia mais, para não ficar repetido, excluindo um dos dois de seu template. Pronto; salve e essa parte em sua edição está prontinha ou quase pronta, caso adicione mais estilos. Espero que tenham gostado e super beijus.

OBS: Como bateu uma fominha, fui fazer um lanchinho e esqueci de colocar os agradecimentos aos sites que me possibilitaram entender alguns códigos que usei, que são: Camila's Design, Cherry Bomb, Candylland, Templates by Lecca, Ciudad Blogger e outros que cito aqui.






Postar um comentário

28 Comentários

  1. Incrível!
    Uma combinação do bonito e do fofo!!!

    http://sarang-cute.blogspot.com.br/

    ResponderExcluir
  2. Deve ter dado muito trabalho fazer essa postagem divina, hein? hehe >u<
    Eu só não uso porque estou querendo criar minhas próprias coisas ultimamente, mas é algo absolutamente lindo e útil! <3 Parabéns pelo talento inestimável, Rô! u_u

    ResponderExcluir
  3. Anônimo09 junho

    Nossa amei seu blog é muito fofo to vomitando arco-iris até agora!!

    ResponderExcluir
  4. Bem legal, principalmente os posts <3
    -kissus-

    ResponderExcluir
  5. Rooberta? o que houve com seu blog? foi atropelado ou algo assim? cade o seu template que estava ? Me desculpe pelas perguntas mas mudou seu template como aconteceu?

    ResponderExcluir
    Respostas
    1. Estava editando o layout; por isso que fechei por algum tempo para vocês não verem minha bagunça rsrsrs...mas você viu neh :D
      Beijus ;3

      Excluir
  6. Yooo Roberta-Chan, que saudades de vc <3 Faz um bom tempo que não venho visita-la, desculpe a péssima afiliada que sou ç.ç' Esses estilos são lindos, os dois me agradaram mas, o da sidebar, eu achei mais fofo.. hehe *-*'
    Beijinhos~
    mutant-paradise.blogspot.com

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado e em vê-la aqui novamente ^^
      Também senti saudades <3
      Super beijus e obrigada!!

      Excluir
  7. Lindo demais amei!
    Mas queria saber o codgo que vc usou nesse novo template para os slider e miniatura de poste!
    Obrigada

    http://emcontoscommorte.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^^
      Os códigos já vieram nesse template (créditos do autor -Main Blogger- no final do blog); ainda não sei como foi feito, mas tô dando uma olhada rsrsrs...achei interessante também ^^
      Beijus ;3

      Excluir
  8. Não consegui D: minha sidebar ficou transparente :'(

    ResponderExcluir
    Respostas
    1. Transparente? Qual modelo vc usa? Esse tuto foi feito no Travel e no Simple pelo Designer do Blogger...

      Excluir
  9. Fiz tudo como falou , mais continua com o sidebar " vanilla " e os outros como se eu não tivesse aplicado , o modelo que uso é simples

    ResponderExcluir
    Respostas
    1. Ola :3 Bem, testei no simple e deu certinho...nao sei o que pode ter sido :(
      Tentou pelo designer do blogger e pelo html?

      Excluir
  10. Nossa adorei seu blog sempre tem as coisas que eu mais quero, ficou muito kawaii .. brigada

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Muito obrigada!!! Eu adorei todos os seus comentarios e com toda certeza, assim que puder, irei visitar vc. Estou ansiosa para retornar.
      Super bjus e obrigada :)

      Excluir
    2. Te espero em .. ♥♥'

      Excluir
  12. Adorei seu Blog Roberta :))) eu acheii muito cute esse tutu que você fez e kawaii amo kawaii também rs fazia goodies também dei uma parada mas tem uns que são muitos interessantes,primeira vez que visito e já estou amando,vou esperar o proximo post já :3 isgitech.blogspot.com

    ResponderExcluir
  13. Anônimo25 dezembro

    Kawaii Desu... :3

    ResponderExcluir
  14. seus codigos nao deram certo no meu blog =(

    ResponderExcluir
    Respostas
    1. Como eu disse, foram testados no Travel e no Simple do blog e estão dando certo aqui...

      Excluir
  15. Ficou super fofinho, obrigada :3. Estou fazendo um layout e seus tutoriais me ajudam muito *_*

    ResponderExcluir
  16. Anônimo16 fevereiro

    Adorei! Me ajudou bastante!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up