[TUTORIAL ATUALIZADO PARA A NOVA INTERFACE DO BLOG]
Bom, pra você utilizar esse botão é preciso que você esteja utilizando o recurso (Inserir expansão de postagem) que ele é um recurso disponibilizado pelo blog. Pra saber mais>> clique aqui e leia o Tutorial Anterior
Como colocar "Botão Leia mais Postagem..." no Blog
1º Passo: Acesse o HTML do seu blog, clique na opção MODELO>> depois em Editar HTML.
2º Passo: Agora, clique em qualquer parte do código e em seguida pressione as teclas de atalho (Ctrl+F) do teclado e encontre esta Tag:
]]></b:skin>
3º Passo: Quando encontrar a Tag, logo acima da mesma adicione este código CSS:
.button, .button:visited {
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}
.button:hover {
background-color: #111;
color: #FFFF00;
}
.button:active {
top: 1px;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.rosa.button, .magenta.button:visited {
background-color: #3C3737;
}
4º Passo: Utilize novamente as teclas de atalho (Ctrl+F) e procure por esta parte no código:
<data:post.jumpText/>
5º Passo: Quando encontrar o código, substitua-o por este código:
<span class='large button rosa'>Leia Mais Postagem...</span>
Pronto! Agora clique em Visualizar Modelo, veja se tudo ocorreu bem e depois Salve Modelo...
Alterar Cor do Botão
No Código CSS eu destaquei dois códigos o que está destacado em vermelho é a cor da fonte da letra
Em Azul é a cor do botão, então pra alterar as cores é só você substituir o código da cor por uma outra cor. Clique Aqui para escolher uma cor
Prontinho pessoal é só isso!!! espero terem gostado deste tutorial e boa sorte a todos.....
Maravilha. Consegui colocar. Teu blog é muito bom!
ResponderExcluirEu não entendo nada dessa linguagem e saiu direitinho.
Podes ensinar como se coloca uma imagem no cabeçalho? Lado direito?
Seria melhor sem os caracteres...
Estou com a mesma duvida, como colocá-lo do lado direito
ExcluirEste comentário foi removido pelo autor.
ExcluirAdicone < p align='right'> antes do < span class='large button rosa'>Leia Mais Postagem... feche com < / p>
ExcluirBlog: http://www.torvidesigner.blogspot.com
no meu html não tem o data post , mais deixa ...
ResponderExcluirFuncionou perfeitamente no meu blog.
ResponderExcluirMuito boas suas dicas, estou deixando o meu blog cada vez melhor. Valeu!!
ResponderExcluircara, muito obrigado pelas dicas que vc disponibiliza aqui no seu blog; São dicas preciosas para quem está começando na blogosfera e não tem nenhum conhecimento técnico, como é o meu caso.
ResponderExcluirEspero que vc continue sempre atualizando o blog para que pessoas leigas como eu possam blogar com mais facilidade e qualidade, valeu muito obrigado mesmo, que DEUS te abençoe...
Muito Obrigado também, valeu pelo comentário!
ExcluirPor favor, como faço para centralizar?
ResponderExcluirAdicone < p align='right'> antes do < span class='large button rosa'>Leia Mais Postagem... feche com < / p>
ExcluirBlog: http://www.torvidesigner.blogspot.com
Este comentário foi removido pelo autor.
ResponderExcluirno meu n da certo, n tem nenhum desses codigos, oque eu faço??
ResponderExcluirLembre-se de Inserir Expansao de postagem . clicando numa folha cortada ao meio . só assim ira aparecer !
ExcluirBlog: http://www.torvidesigner.blogspot.com
valeu brother , o teu blog tem sido um exemplo a seguir , tens clareado muitas das minhas duvidas , de uma olhada no meu blog com 6 dias de existencia www.macondownload.blogspot.com
ResponderExcluirNão deu certo, quando você diz cole logo acima tenho que dar algum espaço?
ResponderExcluirOi, desconsidere minha postagem anterior. Consegui! Obrigada pela ajuda.
ExcluirOlá Aparecida tudo bem!
Excluirde qualquer forma, obrigado por comentar
Olá Kelven, Estou tentando posicionar o código do linkwithin ao lado do código dos comentários facebook no meu blog. Verifiquei várias possibilidades como divisão por colunas, iframe, alinhamento e não consegui o resultado desejado. No rodapé do teu blog tem um posicionamento em 3 colunas que são: < Nossa página do Facebook - Seguidores - Top Parceiros > . Minha pergunta é se vc sabe como posso alinhar, de forma fácil, lado a lado estes 2 códigos < facebook - linkwithin > da mesma forma que o formato do seu rodapé? Veja o que quero alinhar lado a lado : http://s22.postimg.org/g01oq009t/lado_a_lado.jpg
ResponderExcluirSó acrescentando que a posição dos 2 códigos está no corpo do blog e não em rodapé, sideout ou footer-outer. E foram incluídos entre os códigos html do blog e não através de gadgets pela opção 'layout' do blog.
ResponderExcluirpode responder?
ResponderExcluirOlá! tudo bem?
ExcluirMe desculpa pela demora em responder sua pergunta, pois só a visualizei hoje, estava ausente. enfim...
A parte que você citou do meu blog, se trata do "footer-outer" onde fica os gadgets no rodapé do blog, que no caso são 3 gadgets. Este template é um modelo padrão "simples" do próprio blog, que personalizei sem "alterar o corpo do blog" ou mexe no alinhamento.
Agora, sobre o alinhamento dos dois códigos < facebook - linkwithin > por enquanto não tenho possibilidade para poder lhe passar no momento, no entanto, você pode utilizar o "footer-outer" da mesma forma que utilizo em meu blog.
qualquer outra posição estrei comentando novamente. Obrigado!!!!!