Exibir acessórios um do lado do outro no final das postagens ou em qualquer gadget pode ser muito útil, veja, por exemplo, no final de nossas postagens, mostrarmos o botão retweet, link da pagina e o link para enviar a postagem por email.Lembramos que esse código é para ser utilizado como um gadget de html (pagina layout > adicionar gadget > html/javascript) ou então para mostrar acessorios um ao lado do outro no final de cada postagem neste caso entre na pagina editar html, clique para expandir o modelo e coloque o código após post.body, como neste tutorial sobre mostrar o link da postagem.
Isso é feito com o seguinte código:
<div style="float:left;padding:2px;text-align:center">esquerda</div>
<div style="float:right;padding:2px;text-align:center">direita</div>
<div style="clear:both;padding:2px;text-align:center">embaixo</div>
Esse código faz como se fossem 3 caixas: uma a direita outra a esquerda e uma terceira embaixo, você pode colocar o que desejar dentro de cada uma delas. A parte padding:2px;text-align:center repete-se em todas para centralizar e dar uma pequena margem(2px) dentro das “caixas”. Se quiser pode retirar esse trecho e apenas perderá o alinhamento ao centro e a margem, o posicionamento continuará o mesmo.
Se achar que o conteúdo das duas colunas ficaram muito distantes uma da outra pode corrigir isso trocando o padding:2px por padding-left:5px, claro que usando o valor que achar melhor e fazendo a mesma coisa nas duas colunas, ou seja na coluna onde tem float:right use padding-right:5px.
É com um código parecido com esse que fazemos nossos contadores do Feed e Twitter um do lado do outro no inicio da pagina, claro que antes disso tivemos que dividir o cabeçalho do blog em duas partes.Esperamos que gostem de mais essa dica sobre layout do blog. Apenas tome cuidado para não colocar imagens ou objetos largos demais dentro deste código isso poderá gerar erros.
Fabiano, Muito obrigado por responder minha pergunta, so tenho um problema os gadjets da direita e esquerda ficam muito afastados do de baixo, e quando aumento o padding eles vão pro meio porém "empurram" o de que fica embaixo pra mais pra baixo, o que pode ser? Você já sabe qual e meu site né ? da uma olhada la...
ResponderExcluirUm Abç Fabiano
se quiser pode usar padding-left e padding-right, para acertar a posição deles.
ResponderExcluircolocando cada em uma das colunas
vou fazer uma alteração na postagem colocando isso, sobre os paddings left e right
ResponderExcluirConsegui Fabiano, muito obrigado...
ResponderExcluirUma ultima pergunta, Os 3 gadgets ficam muito "colados" na postagem, como descer eles um pouco?
Obg pela atenção =D
se for somente para dar um espaço acima pode colocar um <br/> antes do código que usará dentro da coluna
ResponderExcluiresse é o jeito mais simples de pular uma linha
Fabiano vc conhece um local que eu possa hospedar imagems fora o photbucket e o imageshack? Obrigado :)
ResponderExcluirFabiano eu consegui colocar os codigos depois de muito sacrificio só q agora o problema esta q eu consegui deixar um do lado direito e outro do lado esquerdo só q um fica em baixo e o outro fica em cima eles ñ ficam lado a lado como no seu
ResponderExcluirOLá !!!
ResponderExcluirGostei muuito da dica e utilizei no meu blog =D
Muito obrigada e continue com essas dicas excelentes e muito úteis =)
Anônimo
ResponderExcluirconheço outros sites de hospedagem mas não sei qual recomendar pois nunca usei outros, mas veja aqui: Sites úteis para Blogueiros
Gisa
o código funcionará desde que haja espaço suficiente no gadget, quero dizer por exemplo a coluna onde está o gadge tem 170 px de largura, de eu usar esse código para colocar os dois contadores lado a lado não vai funcionar porque os dois contadores juntos somam mais que 170, então não tem espaço e ficará um embaixo do outro.
Consegui, tuto perfeito =D.
ResponderExcluirFabiano, você conhece algum editor igual ao messenger writer, eu instalei mais sempre que executo ele da como não respondendo, algum parecido com ele ou talvez uma copia separada...
Não sei de onde vem esse erro
OBS: Já executei como administrador.
Como posso construir um Menu Horizontal e onde coloco os códigos do mesmo?
ResponderExcluirL. Tadeu
ResponderExcluirnão sei qual recomendar, nunca usei esses programas.
Anonimo
ResponderExcluirveja aqui os Links lado a lado (menu horizontal)
Fabiano, gostei bastante da dica e gostaria de usa-la. O problema é que não sei onde calr o código no HTML do blog. Pode explicar ou atualizar este post?
ResponderExcluirAbraço e Parabéns!!!
NetoO
ResponderExcluirvocê tem razão, não mencionamos isso, mas serve tanto para o gadget de html como para colocar algo no final da postagem.
Obrigado pela atenção Fabiano. Mais uma vez, ótima dica!
ResponderExcluirAbraço!
Fabiano eu apertei ctrl F para procurar post.body só que não acha eu não estou conseguindo colocar por causa disso me ajuda.
ResponderExcluirRaphaela
ResponderExcluirpara achar o post.body precisa clicar para expandir o modelo
Olá boa noite, eu gostaria de saber se existe um gatget para por no Blogger, do Tumblr? Eu já vi em vários blogs do blogspot mas nunca descobri o código. O serviço se chama Tumblr é uma espécia de blog também onde se posta fotos e eu gostaria de saber o código - gatget para aparecer a última foto postada no Tumblr. Ficarei acompanhando o Dicas Para Blogs, pois não encontrei em nenhum lugar. Se alguém souber, agradeço desde já. Obrigada!
ResponderExcluirNossa pra que tudo isso Oo, faz logo em tabela, fica muito mais fácil, e sem risco de nenhum navegador ler errado, já que não vai usar padding, margin e tudo mais.
ResponderExcluirCom certeza tabela e a melhor alternativa para isso.
♥ Vίνίαŋє ♥
ResponderExcluirnão conheço esse gadget que falou
Claudio Sanches
imagino que você tenha um programa para gerar o código da tabela, sei que funciona do mesmo jeito, mas para fazer o código manualmente acho que a tabela mais complicado, mas é uma questão de gosto, os dois jeitos funcionam
Muito Bom o post ,fazia tempo que esava procurando esse post !
ResponderExcluirGostaria de saber se é possível mudar a posição de um gadget, como deixar ele no topo do blog, para eu colocar uma rádio com gadget HTML/JAVASCRIPT
ResponderExcluir~Wild_Wolf
ResponderExcluirdepois que adicionar o gadget pode arrastar para qualquer lugar.
na pagina layout clique sobre o gadget segure o botão de mouse apertado e leve para o lugar que desejar.
Mais uma dica que utilizo com sucesso no meu blog, alias sempre que desejo algo para o blog venho aqui e encontro...muito bom este espaço, e o relógio esta lá funcionando lindissimo...valeu!!!
ResponderExcluirquero seu msn fabiano pode pra vc me da uma força....
ResponderExcluiramigo eu gostaria de saber se tem como você mim ajudar...
ResponderExcluirtipo meu blog ta funcionando legal
o unico problema é quando acesso ele com o Internet Explorer que se nota que o mesmo tem uma visualização desagradavel podemos dizer.
já com outros navegadores como por exemplo o Firefox Google Chromer...
a visualização é normal.
ao tentar visualizar ele com o Internet os icos do Twitt, Orkut e Feed vão pra baixo e o mesmo acontece com a caixinha de pesquisa.
ela sai do seu lugar sem poder fazer pesquisa na msm.
aqui ta meu blog: http://LeoTurboB13.blogspot.com
agradeço desde já por sua atenção!!!
LeoTurbo B13, alguns códigos funcionam diferente nos navegadores, mas acho que deveria adicionar aquelas imagens como um gadget de html/javascript usando códigos normais para imagens e não como fundo. quero dizer adicionar como se fossem banners, com esse código:
ResponderExcluir<a href="endereço do site" target="_blank"><img border="0" src="endereço da imagem"/></a>
Fabiano como essa postagem e como outras qndo coloquei no Gadget aparece só as falavras e não faz nada! poderia me ajudar?
ResponderExcluirno exemplo que citamos só aparece as palavras, você deve troca-las pelo conteúdo que desejar
ResponderExcluirisso dividirá somente o gadget onde colocou o código e não a coluna toda
Como faço para deixar a metade do gadget de paginas no menu horizontal abaixo do cabeçalho e outra na coluna vertical do lado esquerdo?
ResponderExcluirDiego Medeiros
ResponderExcluirpelo que falou está querendo fazer dois menus, os links um embaixo do outro pode ser feito pelo gadget lista de links ou blogs, e o Links lado a lado (menu horizontal) você pode ver aqui
ô Fabianoooooo, me salve por favor!!! poxaaaa ta dando q o modelo eh invariavel, inviável sei lah.... fiz td direitinho.....
ResponderExcluirBjk, Vanessa Ramos
esse código é para colocar como um gadget de html/javascript
ResponderExcluirtente colocar primeiro como está aqui sem alterar só pra testar, depois troque os textos
Vlw amigo era o que eu estava precisando.
ResponderExcluirOla fabiano gostaria de saber como só mostrar o conteudo depois quq clikar em Leia mais. tipo igual ao seu blogger. porque o meu leia mais ficou abaixo e queria ele acima, por favor me ajuda ai :)
ResponderExcluirtemos duas opções de resumo da postagem veja aqui:
ResponderExcluirPostagem expansível com miniatura da imagem
Mostrar resumo da postagem
Fabiano... Por favor, me diz como diminuir o espaço entre os gadget?
ResponderExcluirHá muito espaço entre um e outro.
Brigadim
nuss valeu ai!
ResponderExcluirFabiano estou usando o leia mais do blogger só que ele aparece do lado esquerdo vc sabe me dizer como faço para ele aparecer do lado direito?
ResponderExcluirveja aqui Mostrar resumo da postagem
ResponderExcluirlá mostra como esse código funciona então é só mudar o alinhamento de left para right
Olá, Fabiano por favor eu preciso de um pequeno código só para dar um espaço entre os menus que coloquei eu dividi o menu estava um em baixo do outro ai eu coloquei um do lado do outro no mesmo gadget ai ficou coladinho e preciso só dar uma afastada de uns três clicks obrigado pela atenção.
ResponderExcluirBilly.
se aumentar o valor do padding terá mais espaço vazio em todos os lados incluive para cima e para baixo
ResponderExcluirdesculpe mas o que eu quero saber esse blog não ajudou em nada o meu blog tem que ficar muito daora ele explicar sobre popularidade.
ResponderExcluirGarota Capricho
ResponderExcluirfazer um blog ficar popular envolve muitas coisas... veja no menu o item mais visitas
Ola, queria saber como eu coloco esse negocio ai em baixo... igual vc colocou "Outros tutoriais para ajudar Blogueiros" por favor me ajude ? Já tentei tudo !
ResponderExcluirveja nestes links como Mostrar assuntos relacionados no blog
ResponderExcluire depois como Mudar o texto You might also like
Oi queria saber como eu fasso no meu blog tipo assim! criar abinhas uma no lado da outra como vcs tem aki ex:
ResponderExcluir|Dicas no seu site| |Parcerias entre Blogs|
william gabriel willms
ResponderExcluiressas abas são na verdade um menu horizontal, neste link você pode ver como fazer um para o seu blog
Ola Fabiano,
ResponderExcluirA Natalia lá em cima, perguntou como diminuir o espaço entre as gadgets. Vc saberia nos informar como aumentar ou diminuir os espaços entre as gadgets? É possivel isso ou esses espaços sao inalteraveis? Obrigada. Sempre venho me socorrer no seu blog. Nota mil pra vc. Continue assim. Katia
veja aqui uma maneira de Personalizar gadgets do Blog
ResponderExcluirFabiano, boa tarde!!
ResponderExcluirTem como eu dividir a relação de POSTAGEM MAIS POPULAR em três colunas verticais? Isto é, uma dando continuidade a outra.
Desde já agradeço,
mauricio
ResponderExcluirnão tem como dividir pois é uma lista só
você pode criar colunas e mostrar as postagens populares numa coluna, banners na outra...
Adorei esse tutorial! Muito obrigada *-*
ResponderExcluirMenina de Deus
Olá. Deposi de muito procurar.. achei no seu blog oque eu procurava.. obrigada por me salvar... consegui fazer tudo certinho... meu blog muito melhor..!!! Valeu.. Bjs
ResponderExcluirhttp://daidesiderio.blogspot.com
Tem como colocar 4 colunas uma ao lado da outra?
ResponderExcluirvocê pode colocar mais colunas é só repetir a linha
ResponderExcluir< div style="float:right;padding:2px;text-align:center" >direita< / div >
O Fabiano eu não entendi, eu coloco o codigo como gadget mas nao acontece nada, so fica um retangulo dizendo esquerdo,direita e embaixo, no local onde eu coloquei o gadget. Poderia explicar melhor.
ResponderExcluirVLW gostei muito do seu blog, me ajudo bastante
esse tutorial é sobre dividir o gadget, você deve colocar outros códigos nele
ResponderExcluirO FABIANO valeu, eu entendi, achei que era só colocar os códigos e deu, OBRIGADO.
ResponderExcluirEu queria te pedir se tu pode fazer um tutorial de como criar uma nova coluna, pois criei no meu blog só que ela ficava muito pequena comparada com a outra coluna(direita), e ficava muito perto do post. Só que do lado onde eu coloquei a coluna (esquerdo) ficava um bom espaço. Dai pode me ajudar. Valeu denovo!!!
@WR ANDROID na pagina design do modelo é possivel alterar o template.
ResponderExcluirse o seu blog não tem essa pagina veja aqui:Colocar mais uma coluna no blog
Eu fiz mais não apareceu nada :(
ResponderExcluiresse código não tem conteudo, ele só cria as colunas
ResponderExcluirFabiano,estou levando esta dica,bjs
ResponderExcluirOla Fabiano
ResponderExcluirO que seria dos iniciantes se houvesse pessoas como você, para ensinar.
Valeu cara muito boa dica já tava até desistindo de mexer no gadget que eu uso como cabeçalho.
Abraços
OBRIGADA!!!!
ResponderExcluirOlá, equipe do DICAS PARA BLOGS! Tenho um blogue de Poesia, entitulado Poesia Em Prosa E Versos, cujo endereço é www.poesiaemprosaeversos.blogspot.com/
ResponderExcluire tenho tentado divulgá-lo de várias formas. Vários agregadores de conteúdo querem que coloquemos seus banners no blogue. Pensei se seria possível colocá-los, vários deles, um ao lado do outro, para usar melhor o espaço, abaixo de um título, como: SITES PARCEIROS DO "POESIA EM PROSA E VERSOS". Seria possível fazer isto? Se puderem responder-me, meu e-mail é claudioluizsbritomachado129@gmail.com. Depois de ler este post, como sei pouquíssimo de informática, não entendi como se inseririam os códigos dos banners dentro das colunas do código fornecido neste post. Não sei se os códigos dos banners podem ser inseridos depois do código fornecido, um após o outro, ou se devem ser inseridos dentro do código fornecido. Neste último caso, seria preciso saber depois de qual expressão eles teriam que ser colocados. Se puderem explicar-me isto, muito obrigado! E parabéns pela excelente qualidade do DICAS PARA BLOGS! Estou assinando seu feed. Até mais!
Claudio veja aqui um código para organizar seus banners de parceiros
ResponderExcluirOrganizar Banners ou Pagina de Parcerias entre Blogs
mas esse gadget pode ficar em qualquer parte da sua pagina. Não precisa ser perto do titulo
Fabiano, boa tarde!
ResponderExcluirEu uso um template com dois sidebar nas laterias e a área de postagem no meio. Como eu altero o espaço entre sidebar e a área de postagem?
Desde já agradeço.
Mauricio
www.calopsitar.com.br
procure no html do seu blog o código
ResponderExcluir#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 25px 25px;
}
altere os valores 25px, eles não margens, veja o exemplo abaixo para saber os lados de cada margem
padding: 0px 20px 25px 15px;
0 - acima
20 - direita
25 - embaixo
15 - esquerda
@Fabiano,
ResponderExcluirLancei um blog de tutoriais, mas estou com um problema. Não consigo colocar as postagens individualmente em caixas como o tema "Espetacular Ltda.", fica tudo junto e quase não tem jeito. Blog: https://goo.gl/hMS3us
Pelo que entendi você quer a caixa em volta de cada post e não uma caixa para toda a coluna das postagens.
ExcluirEntão coloque este código no html do seu blog
.post-outer {
border: #000 2px solid;
margin: 10px 0px;background-color: #ff0;}
a cor de fundo é amarela, sugiro que use assim até terminar de editar pra ser mais facil visualizar.
retire os trecho:
.main-posts {
background-color: #fff;
padding: 20px;
width: 620px;
}
depois retire a borda (border: 1px solid #dddddd;
) no código:
left-column {
float: left;
margin-right: 20px;
width: 660px;
margin-top: 30px;
border: 1px solid #dddddd;
acho que isso é o principal mas você pode usar o inspecionar elementos para achar os códigos e ajustar espaços vazios ao redor dos posts
@Fabiano,
ExcluirSua dica deu certinho! Te agradeço! Eu já tinha testado com o seletor .post-outer, mas de maneira incerta. O problema era o seletor .main-posts que atrapalhava tudo. Abraço!