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.
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.
Incrível!
ResponderExcluirUma combinação do bonito e do fofo!!!
http://sarang-cute.blogspot.com.br/
Obrigada :3
ExcluirBeijus...
Deve ter dado muito trabalho fazer essa postagem divina, hein? hehe >u<
ResponderExcluirEu 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
Nossa amei seu blog é muito fofo to vomitando arco-iris até agora!!
ResponderExcluirBem legal, principalmente os posts <3
ResponderExcluir-kissus-
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?
ResponderExcluirEstava 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
ExcluirBeijus ;3
Atá :3
ExcluirYooo 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 *-*'
ResponderExcluirBeijinhos~
mutant-paradise.blogspot.com
Fico feliz que tenha gostado e em vê-la aqui novamente ^^
ExcluirTambém senti saudades <3
Super beijus e obrigada!!
Adoreiiiiiiii *u*
ResponderExcluirObrigada <3
ExcluirLindo demais amei!
ResponderExcluirMas queria saber o codgo que vc usou nesse novo template para os slider e miniatura de poste!
Obrigada
http://emcontoscommorte.blogspot.com.br/
Que bom que gostou ^^
ExcluirOs 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
Não consegui D: minha sidebar ficou transparente :'(
ResponderExcluirTransparente? Qual modelo vc usa? Esse tuto foi feito no Travel e no Simple pelo Designer do Blogger...
ExcluirFiz tudo como falou , mais continua com o sidebar " vanilla " e os outros como se eu não tivesse aplicado , o modelo que uso é simples
ResponderExcluirOla :3 Bem, testei no simple e deu certinho...nao sei o que pode ter sido :(
ExcluirTentou pelo designer do blogger e pelo html?
Nossa adorei seu blog sempre tem as coisas que eu mais quero, ficou muito kawaii .. brigada
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirMuito obrigada!!! Eu adorei todos os seus comentarios e com toda certeza, assim que puder, irei visitar vc. Estou ansiosa para retornar.
ExcluirSuper bjus e obrigada :)
Te espero em .. ♥♥'
ExcluirAdorei 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
ResponderExcluirKawaii Desu... :3
ResponderExcluirseus codigos nao deram certo no meu blog =(
ResponderExcluirComo eu disse, foram testados no Travel e no Simple do blog e estão dando certo aqui...
ExcluirFicou super fofinho, obrigada :3. Estou fazendo um layout e seus tutoriais me ajudam muito *_*
ResponderExcluirAdorei! Me ajudou bastante!
ResponderExcluir