Oi pessoas lindas, como vão? Então, estou numa fase "sem criatividade pra postar" e só pra não ficar muito tempo sem post afinal, já faz uma semana que não posto resolvi trazer dois tutoriais bem legais, um de como colocar gadgets acima do cabeçalho, um lugar muito bom pra menus e anúncios e outro de como colocar cada gadget em uma caixa separada, exemplo aqui. Então vamos aos tutoriais?
Elementos acima do cabeçalho
Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Onde está escrito 1 mude pelo numero de gadgets que você quer ver acima do cabeçalho e onde está escrito
'no' troque por yes.
Obs: Mesmo que você queira somente 1 gadget acima do cabeçalho, coloque 2, se quiser 2 coloque 3 e assim por diante, sempre 1 a mais do que o real.
Gadgets separados em caixas
Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:
/* Widgets
E antes de fechar } cole o seguinte código:
background: #fff; /*---- cor do fundo da caixa ----*/padding-left: 20px; /*---- espaço à esquerda ----*/padding-bottom: 20px; /*--- espaço de baixo ---*/padding-right: 20px; /*--- espaço à direita ---*/padding-top: 5px; /*---- espaço de cima ----*/border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/
Se você quiser da pra trocar a cor da caixa (trocando #fff pela cor que desejar), mudar os valores de padding, remover a sombra da caixa e as bordas arredondadas apagando a linha das mesmas como também da pra personalizar a borda e a sombra (veja como neste documento aqui).
Certamente quando você visualizar vai ficar com o fundo original da sua coluna por trás da caixinha, assim:
Para resolver isso é bem simples, vá em Design > Designer do modelo > Avançado > Plano de fundo da barra lateral e deixe transparente como mostra a imagem abaixo:
Feito isso você vai ver que o fundo de trás saiu, assim:
E tharãn, ta pronto!
Espero que tenham gostado, e não deixem de me dar ideias de posts o/ rsrs
Beijos, fiquem com Deus.
Hey flor, que tutoriais legais eu amei.
ResponderExcluirVim te perguntar duas coisinhas, a primeira é se vc ainda aceita afiliações e a segunda éq vim te convidar para participar do concurso de mil seguidores do blog, já que o seu me ajudou pra caramba com tutoriais e goodies.
Bom é isso (:
Bjocas
TDiaryofteens.blogspot.com
Ótimos tutoriais, são mesmo úteis!
ResponderExcluirO primeiro tutorial que você ensinou foi tipo que aquele tutorial... serio! Eu estava procurando ele igual doida e não achava!
ResponderExcluirO segundo eu aprendi fuçando no HTML outro dia... nunca usei ele mas é bem legal!
Beijinhos flor!
Vc explica e fica tão fácil :)
ResponderExcluirQuando eu faço tutoriais acabo que desaprendo tudo de tão complicado que fica kkk
(também queria perguntar sobre afiliação...hehehe)
bjuu
Ótimo tutorial,tava procurando esse do gadget faz tempo,muito bom! Não deixe de passar no Garota Differente,tá rolado um concurso lá. *-*
ResponderExcluirhttp://garotadifferente.blogspot.com/
Amei! Pena que no meu blog eu coloquei imagens senão eu faria.
ResponderExcluirhttp://puro-gliter.blogspot.com/
Adorei o tutorial, ótimas dica <3 provavelmente usarei no próximo lay do blog '0'
ResponderExcluirhttp://senhoritaliberdade.blogspot.com/
os dois tutoriais são ótimos, super úteis
ResponderExcluirwww.garotascomplicada.com
No meu blog não funcionou!Eu tentei colocar mas só ficou em alguns gadgets
ResponderExcluirAdorei o tutorial =)
ResponderExcluirdecember97.blogspot.com
Yeah, consegui! Estava procurando esse tutorial, mas não achava x.x Muuito obrigada! \õ
ResponderExcluirBjs,
http://sapatosdeveludo.blogspot.com
Ah, a proposito, o tutorial que eu falei é o 2º, rs.
ResponderExcluirHeey Anny , joinháá ?
ResponderExcluirEstava visitando um post no blog Débora morais que falava sonbre sonhos. Eu me interessei ao post e resolvi fazer um com o mesmo assunto. Mas nele pegarei sonhos de blogueiras e colocarei lá, pensei daí: “Será que ela não conta um sonho bisarro para meu post?”, então se quiser e puder me manda pelo e-mail (chicretiililas@yahoo.com.br) , mesmo se não puder pesso que me comunique pelo Blog.
http://atitude-zeroo.blogspot.com/
Ameii esse tutorial *-*
ResponderExcluirhttp://dreamsofagirl-blog.blogspot.com
nossa, muito bom , me ajudou muito com o tumblr
ResponderExcluirestou lhe seguindo, se puder fazer uma força segue meu blog? faz pouco tempo que criei e to divulgando agora -> http://girlsin-fashion.blogspot.com/
Obrigada desde já *--*
Muito boa as dicas *-*
ResponderExcluirblog-sundaedecereja.blogspot.com
Oi,amei o post, bom você fez meu design a algum tempo atraz e disse que quando eu quisesse trocar era só pedir, será que você pode fazer ele pra mim? Mas olha eu não tenho presa ok http://1mundoteen.blogspot.com
ResponderExcluir(Em resposta ao seu comentário no meu blog)
ResponderExcluirNão, o meu é o modelo Picture Window, e não deu certo de novo, eu tentei e não deu :(
ta bom pra mim ta ótimo linda, quando puder fazer, não tenho preça então é só avisar lá no blog quando ir fazer pra mim dizer direitinho o modelo e tal (:
ResponderExcluirhttp://1mundoteen.blogspot.com/
Adorei as dicas, são ótimas :)
ResponderExcluirJá estou seguindo aqui, amei seu cantinho!
Bjs
Dezessete em Diante / Facebook
oi adorei esse blog é o segundo blog que eu entro e me enquanto é lindo rsrs da uma passadinha no meu blog se gostar segue ta bom bjs
ResponderExcluirpapodeamigas-bff.blogspot.com
brigado
ExcluirOi Go Imagine!
ResponderExcluirEu adorei a postagem, ficou muito legal!!
Eu tenho um blog e gostaria de saber se você sabe mudar a barra de rolagem porque já faz tempo que estou tentando mudar e não consigo!
Você poderia fazer um tutorial(se souber fazer a barra)?
Beijos
Obs.: Da uma passadinha no meu blog e se gosta segue???
http://chatgirlsstar.blogspot.com/
Aqui é lindo demais parabéns,você é muito criativa com o blog Beijos Gaby e Bia (se puder segue agente,que seguimos de volta?)
ResponderExcluirQuando puder:blog--esmaltevermelho.blogspot.com
Oiiie amoree, amei o tuto e já fiz, rs. Mas eu queria saber se tem como arrumar o espaço que fica entre os gadjets e a barra das posts, me ajuda? Beijos.
ResponderExcluirEstou montando meu blog novamente (:
Ajudou muito esse tutorial. Parabéns pelo blog!!
ResponderExcluirBjooo
clove-cinnamon.blogspot.com
ameei o tutorial, deixar os gadgets separados fica super lindo. Seu blog esta cada dia melhor .
ResponderExcluiradoro muito aqui *-*
http://www.garotas-complicadas.blogspot.com/
Floor, tive problema com o domínio do meu blog e sou afiliada do seu blog, seu puder arrumar o link agradeço
Bjus e tudo de bom ;*
Me ajudou muito Anny, obrigada mesmo! *-*
ResponderExcluirMe ajudou muito também,eu estava procurando isso pra coloca no meu próximo lay *-*
ResponderExcluirGo Belezando
oi, eu coloco fundo transparente, mas aí fica um preto meio transparente.. me ajuda pfv
ResponderExcluircherry-miint.blogspot.com
Tutorial mais do que perfeitooooooooo! Adorei e fiz, as caixas separadas de gadgets são ótimas, porém não ficaram centralizadas no meu background =(
ResponderExcluirexiste uma maneira de centralizá-las dentro do fundo da barra lateral? Obrigada!
http://lemonnice.blogspot.com
Poxa, vou usar esse tutorial no meu novo layout, e até salvei o site no meus favoritos para não esquecer de creditar! Fofa, você sabe como colocar a área de postagens para cima? Eu vi aqui o tutorial de como por a barra lateral, mas estou procurando o da área de postagens e não acho :(
ResponderExcluirbeijos
blogloucamistura.blogspot.com
Oi amrr, queria muito saber se você pode me ajudar. Gostaria de saber se tem como ajustar a largura dos boxes dos gadjets. Para deixá-los maiores, espero que possa me ajudar (: Beijos e obrigada.
ResponderExcluirhttp://junsuinakanjo.blogspot.com.br/
Anny por favor me ajude!!!!!!!!!!
ResponderExcluirEu não consigo deixar a sidebar do meu blog transparente como está falando no tuto!!!!!!
Por favor me ajude!
Mimada-menina.blogspot.com
oiee, amei o segundo tuto, já fiz até no meu blog (: Mas queria saber se você pode fazer outro, ensinando a separar a área das posts em caixas, também. Espero que possa me ajudar! Obrigada, bjuu
ResponderExcluirAdorei, tudinho Pos tudo No meU BLOG
ResponderExcluirficou super legal,e esse tipo de gadgets separados estão sendo utilizados agora recentemente!
ResponderExcluirGata eu queria saber uma coisa.Tem como adicionar imagens nos topos e nos footers dos gadgets quando estão nesse formato?
ResponderExcluiramei suas postagens. Estao bem explicada.
ResponderExcluirEstou tentando aplicar no meu,não estou conseguido,vc acha que estou errando aonde?
ia adorar uma visitinha sua no meu blog.
http://saraydantas.blgspot.com
Ajudou e muito! Estava a procura desse tutu!
ResponderExcluirEu conseguia separar os gadgets mais não conseguia arrendondar as bordas!
Beijos
www.anabacanaacarolina.blogspot.com
yoo
ResponderExcluireu tentei colocar o cabeçalho acima do cabeçalho mas não estou conseguindo!
Você poderia me ajudar??
http://mandcupcakes.blogspot.com.br/
OMG
ResponderExcluirfico lindo d+ tchê :)
brigado :)
http://bagulhosdocoracao.blogspot.com.br/
Não consegui... Uso o modelo Simple. É o seguinte: no meu, não tem a opção "Plano de Fundo da Barra Lateral''. Só tem como modificar os títulos, mais nada... Alguém pode me ajudar? Beijinhos, amei o blog.
ResponderExcluirManda o link do blog pra eu dar uma olhada, se for possível...
ExcluirEu sobro desse mesmo problema, sem barra lateral :( esse tutorial nunca funciona modelo Marca d'água
Excluireii ! Anny, o meu não deu :( ' o plano de fundo da barra lateral, coloquei transparente ficou meio 'preto' , porque ? meu modelo é Travel 'Viagem' , Heelp-me!
ResponderExcluirNo seu html procure por:
Excluirbackground: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
você vai encontrar dois, apague ambos e visualize pra ver se o fundo sumiu!
o meu não deu certo!! :( :(
ResponderExcluirficou transparente!!!
bjs
csn-carolina.blogspot.com.br
Anny, adorei os tutoriais, você explica muito bem *-* Mas não consigo copiar os códigos, por causa do widget contra plágio... será que vc poderia tirar? Obrigada :)
ResponderExcluirjá liberei :)
ExcluirAnny, tenho o mesmo problema que uma menina ali em cima: não consigo deixar a navbar totalmente transparente! Ela fica mais ou menos, mas o fundo fica meio cinza, é um horrooooor, pode me explicar como que tira isso? =( uso o modelo Viagem.
ResponderExcluirEu já tentei essa de apagar o: background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;
ResponderExcluirapaguei os dois e ainda sim continuou preto !
qual o link do teu blog amor?
ExcluirFeliz
ResponderExcluirBoa Tarde quero dar aqui meus parabéns pelo seu blog, será que vc poderia me ajudar...não estou conseguindo mais mudar nenhum código no meu blog pq aparece esta mensagem...Mais de um item encontrado com o id: HTML7. Os IDs de itens devem ser únicos e exclusivos.
ResponderExcluirError 500
O QUE EU FAÇO AGORA UM GRANDE ABRAÇO.
Olá Anny achei o seu blog muito legal com bastante idéias legais, só que eu não estou conseguindo mudar mais nada no meu blog pq ele está dando está mensagem... Mais de um item encontrado com o id: HTML7. Os IDs de itens devem ser únicos e exclusivos.
ResponderExcluirError 500
Será que vc poderia me ajudar ficaria muito feliz, desde já agradeço, um grande abraço.
Oi o modelo do meu blog é viagem, fiz ate em um blog de teste mas naum ficou transparente ficou meio cinza!! me ajuda!!
ResponderExcluirÉ só você apertar Ctrl + F e procurar por
Excluir.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
se for a coluna direita, se for a esquerda procura por
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
daí vc vai ver embaixo disso
margin-right: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
daí você tira toda a parte da frente do background trocando por 'transparent', ficando assim:
margin-left: $(content.padding);
background: transparent;
}
Prontinho, espero que tenha dado certo, e isso só serve pro modelo viagem.
Burnny
Você pode procura também por "Sidebar Background", ir em "value" e colocar transparent
ExcluirAmor meu blog ficou bem legal com esse tutorial. aqui visita ele por favor vai ser uma honra se nao quiser meu comentario pode apagar mais leia primeiro por favor.
ResponderExcluirBLOG:http://backgroundmundinho.blogspot.com.br/
Eu fiz o tuto direitinho e até funcionou, só que não fica separado tipo, fica um pedacinho em cima do outro, pode me ajudar a separar, não estou conseguindo...
ResponderExcluirO layout ta aqui >> dazere.blogspot.com.br << Meu primeiro layout.
oiie amoree,no meu blog naun deu certo ele é do modelo marca d'água me ajuda por favor.
ResponderExcluirdeve ser por isso :/
Excluirnão entendo o por que o meu não entra !!!! já fiz mil vezes e fica como se eu não tivesse feito nada .... :(
ResponderExcluirNo modelo Marca d'água não da pra colocar?Por que não aparece a opção plano de fundo da barra lateral :(
ResponderExcluireu queria saber como tirar este plano de fundo aí de trás dos gadjets ...
ResponderExcluirObrigada flor por compartilhar.
ResponderExcluirDeus abençoe.
Tenha dias felizes...
Bjokas...da Bia!!!
Obrigada! eu tava procurando em vários lugares como fazer isso, já tava até sem esperança porque não conseguia, mas graças a você consegui! *-*
ResponderExcluirMuito obrigada, salvou meu cabeçalho!! Beijos e ótimo trabalho.
ResponderExcluirNo meu não deu certo. :/
ResponderExcluirÉ o simples.
Alguém pode me ajudar?
http://vivianpitanca.blogspot.com.br/
Não pegou! :(
ResponderExcluirFicou muito... Hum... Irado <3
ResponderExcluirAmei o tuto :)
ResponderExcluirVisita meu blog ?
Floor eu não acho /* Widgets e nem me ajuda!!!
ResponderExcluirEstava procurando esse tutorial faz tempo... Muito obrigada por disponibilizar! *-*
ResponderExcluirhttp://patricinhadechuteira.blogspot.com.br/
oie eu não estou conseguindo colocar o codigo html eu procuro e em vez de procurar aparece 0 de0 o que eu estou fazendo errado ...
ResponderExcluirpode me ajudar?
obg
Lucieny Luh, o meu também não está dando :/
ResponderExcluirVocê pode editar o meu? não dei conta,pois o meu é o novo modelo e é muito confuso ,não consegui mudar nada
ResponderExcluirMuito legal Adorei
ResponderExcluirhttp://gaiolasdeinverno.blogspot.com.br/
Olá gente. Esse negócio transparente que ficava depois de aplicar o html não estava desaparecendo no meu, e o que eu fiz foi somente zerar todos os valores, tirando a linha da sombra. Deu super certo =)
ResponderExcluirusando no Filha do Rei . esse blog como sempre me ajudando
ResponderExcluirComo faz para deixar os comentários assim?
ResponderExcluiradorei o tuto
ResponderExcluir