Yoo!!! Vamos ao tutorial do dia, hoje irei mostrar como separar a área das postagens em caixas, tipo, praticamente todos os modelos do blogger (Travel) que usamos para fazer nossos modelos, são juntos. Antes de começar o tutorial queria agradecer pelos 612 seguidores, agradeço a todos que ajudaram a conquistar essa meta, obrigada mesmo. Então vou mostrar agora como separar eles, de forma rápida e fácil, vamos lá?
Eu fiz um teste rápido é funcionou, ao concluir ficara assim. Detalhe, o modelo da postagem não vai ficar como ao que mostro ai em baixo, apenas com o espaço. Vocês tem que personalizar, só estou avisando para não acontecer reclamações como na postagem de personalizar a sidebar.
Códigos
.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }
Códigos
.post-outer {
margin: 4px 2px 10px;
background:#fff;
padding: 20px 10px;
}
margin: 4px 2px 10px;
background:#fff;
padding: 20px 10px;
}
A onde esta em vermelho é o espaço entre as postagens, então se quiser mais só aumentar o número. Também tem o espaço das postagens entre a sidebar, como também do título das postagens onde diminui aquele espacinho, e só ir futucando e arrumando como desejar.
Créditos: Capture Dream
Legal, gostei bastante sempre quis saber como separar
ResponderExcluir^^ Que bom
ExcluirPara onde você vai?
ResponderExcluirSupresa
Excluir*Surpresa
ExcluirObrigada pelo tutorial vai me ajudar bastante, para onde vc vai viajar?
ResponderExcluirDe nada, não quero comentar ainda falarei em uma post surpresa quando eu ja estiver la
ExcluirPoxa legal, boa viajem Wendy
ResponderExcluirObrigada gabriel
ExcluirObrigada voce é mulher O.o
Excluirrsrs Sou sim
ExcluirWendy poderia ensinar como fazer um fonte perfurando o fundo, assim como você fez no seu cabeçalho onde ta escrito Bunny Crazy?
ResponderExcluirSim farei em breve
ExcluirDrw você tem tutorial mostrando como colocar slide no cabeçalho?
ResponderExcluirSim eu tenho, pesquise por Big Tutorial aqui no blog e vai ver uma postagem escrito colocando Slide no cabeçalho
ExcluirMuito legal o tutorial..Eu já tinha visto, mas os que eu tinha visto, a caixa ficava redonda!! Vou usar no meu próximo layout :D
ResponderExcluirObrigada
Beijos
sweet-divertido.blogspot.com
Serio redonda? Deve ficar bem diferente *-*
ExcluirJá conhecia o tuto, mais nunca consigo colocar as bordinhas nela ç.ç...
ResponderExcluirNão entao farei uma post mostrando como colocar ^^
Excluiraaaaaaawn Brigada Wendy, sua lindah' uhaushu
Excluirhihih de nada
ExcluirO bom é que não vai ficar sem postar *0* seria uma pena não postar. Afinal todos os blogs estao parando D:
ResponderExcluirIsso e por causa das voltas aulas em breve todos estaram de volta
ExcluirOlá, estou querendo começar um blog mas antes queria aprender um pouco. Você tem alguma postagem que possa me ajudar? Como criar um template ou...dicas que possam me ajudar, desde ja agradeço.
ResponderExcluirOi fofa tenho sim, o dicas Split e o big tutorial ensinando como fazer um layout vou mandar os links pelo email pra vc
ExcluirOie lembra de mim? Caraca depois de bastante tempo volto aqui para fazer visita e o que vejo *o* o blog ta totalmente diferente, modelo ate o nome mudo fico chique agora rsrs parabens
ResponderExcluirrsrs Lembro sim, eu não esqueço de ninguem. Mas verdade o blog mudo bastante espero que para melhor rsrs
ExcluirMuito útil , só uso minhas postagens assim !
ResponderExcluirÉ o melhor geito.
Beijos.
http://meucupcakedemorango.blogspot.com.br/
Concordo
ExcluirEsse tutorial e muito legal e bem fácil de fazer né
ResponderExcluirBeijos
http://blog-html-for-you.blogspot.com/
E sim ^^
ExcluirTalvez eu coloque pois além de ser bem bonitinho, é organizado.
ResponderExcluirE o resultado é uma maravilha !
Beijinhos // Utilitários Diamond
Verdade, fica muito lindo
ExcluirAdorei o tutorial ♥
ResponderExcluirBeijinhos
conversando-com-a-lua.blogspot.com.br
Que bom ^^
ExcluirPor isso n entrou ontem rs ~
ResponderExcluirFiquei até 3:30 da manhã te esperando :P
Boa Viagem !
Desculpe Yu, mas ja estou arrumando aquela nossa coisinha
ExcluirAdorei a dica, fica muito mais bonito a visualização.
ResponderExcluirBeijinhos e ja estou seguindo.
Obrigada
ExcluirOi flor será que poderia ensinar como troca a área das postagens para 2 cores como o seu é que eu quero trocar o meu. Obrigada
ResponderExcluirThe Inevitable
Claro farei sim
ExcluirEu sempre usava esse tuto ! mas esqueci de por no meu lay atual ! na verdade nem sei se combinaria , mas é um tuto mt útil !
ResponderExcluirhttp://shinigamipower.blogspot.com.br/
Seu layout atual esta perfeito ^^
Excluirvaleu estava doida procurando isso ^^
ResponderExcluirAhh de nada, fico feliz que tenha lhe ajudado.
ExcluirOi, tem como você fazer um tutorial como fazer um efeito como o do seu gadget "Mais Vistas" amei demais por favor..
ResponderExcluirYo Thais sim já fizeram o pedido e postei, tá aqui: Sliding Tags
ExcluirNão conseguir fazer, depois que o HTML do blogger mudou de novo nunca acho as coisas :/
ResponderExcluirO safado do blog tiro o expandir, então para abrir os códigos é só procurar por ]] ai depois procure por qual você desejar esse ai acima fico um pouco diferente então procure só pela primeira parte:
Excluir.main-inner .column-center-outer
Legal, mas nunca acho os códigos que quase todos os blogs de tutoriais falam :(
ResponderExcluirMas pôô, legal mesmo, gostei e boa viagem!
Poxa que pena.... t.t
ExcluirMas obrigada, espero que seja boa sim ^^"
Gostei bastante, mas em vez disso o fundo do meu apagou :(
ResponderExcluirSerio? Que pena... Experimenta fazer mais uma vez, as vezes acontece de um codigo sair do lugar
ExcluirObrigada, funcionou direitinho aqui! Estou te seguindo :*
ResponderExcluirhttp://lovegacchin.blogspot.com.br/
Não foi nada. ^.-
ExcluirEu que agradeço.
Apliquei no meu blog e ficou ótimo. Obrigada!!
ResponderExcluirQue bom Ju *-*
ExcluirOiis .. amei o tutu, mais com esse novo modelo do Blogger não consigo achar o "Expandir modelo de widget", poderia me falar onde fica?! Bjuux =*
ResponderExcluirOlá fofa o blogger removeu a função "Expandir modelo de widget".
ExcluirEntão faça assim clique na caixa onde fica os códigos e HTML e acione o atalho Ctrl+f e procure pelo código direto.
.main-inner .column-center-outer { Se ainda assim não achar procure por: /* Posts abaixo vai estar mais ou menos assim:
h3.post-title {
(outros codigos...)
}
.main-inner .column-center-outer {
Ai é só mecher no main, se ainda assim não consegui me diga para poder lhe ajudar. ok? Beijokas.
Como que eu uso esse código depois de subir a área dos posts?
ResponderExcluirOi primeiramente remova o código de subir área, então coloque esse código e salve. Agora procure por:
Excluir.main-inner .column-center-inner {
e abaixo dele coloque o código de subir.
margin-top: 48px; (só arrumar o valor). Espero que isso ajude. Kiss ^^
Obrigada me ajudou bastante.
ResponderExcluirDe nada linda :3
ExcluirÉ tão fácil, e tão útil! Hahah, obrigada ♥
ResponderExcluirwww.amoraoprimeirorimel.com
Verdade :3 e muito obrigada por comentar, fico feliz que tenha sido útil a você.
ExcluirDeu certo \o/ obrigada!
ResponderExcluirQue bom :3 eu que agradeço.
ExcluirQuando eu pesquiso não aparece :(
ResponderExcluirPuxa Sáh tenta pesquisar só por uma parte do código tipo:
Excluir.main-inner .column-center-outer {
não encontrei
ResponderExcluir.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }
me ajuda!
Qual é o modelo do seu HTML?
ExcluirOBG!
ResponderExcluirPor nada ^^
ExcluirO que é isso. Se for aquelas coisas de "Vizualizações Dinâmicas" e esses modelos ede blog o meu modelo é o "Simple Black"
ResponderExcluirDesculpe não compreendi. Bom esse tutorial e para criar espaço entre as postagens, eu testei apenas no modelos travel.
ExcluirQue lindo e realmente,fica demais né,amei o tuto,poderia me ensinar em uma postagem sua como mudar a postagem,deixar ela em forma de caderno,ou igual a sua??
ResponderExcluirObrigada Ester, fico feliz que tenha gostado.^^ Estilo caderno? Como de meu lay atual?
ExcluirMais um tutorial furado!!!Não existe essa TAG não sei como esses caras dizem que adoraram,ótimo tutorial.... sem comentários.
ResponderExcluirNão é furado Henrique, tanto que estou usando no meu layout atual, assim como muitos usam e sempre uso esse mesmo tutorial. Todos os blogs tem essa tag, mas algumas com o nome diferente ou com espaços a mais, por isso verifique direitinho. Talvez o seu layout tenha o nome da tag diferente, ou não pesquisou direito. Aconselho fazer novamente ou procurar um tutorial mais adequado para seu layout. Se os outros leitores agradecem é porque conseguiram executar e deu certo, realmente é estranho que não tenha dado certo no seu =( Se desejar deixe o link do seu blog para que eu possa ver qual é o nome de sua tag. ^^
ExcluirTu poderia ensinar a dividir os posts em caixas, que nem no tumblr? (isso se der)
ResponderExcluirAdorei este tutorial! <3
Claro! Mas tem fotinho para me orientar melhor? Você diz estilo galeria?
Excluir