26 de outubro de 2012

22

Botão Css3 "Leia Mais Postagens"



Aprenda a coloca "Botão Leia Mais Postagem..." no Blog. Esse botão é ideal, pois deixa um visual bem atraente no Blog, e além de utilizamos a linguagem Css, ele não necessita de utilizar imagens pesadas e fica fácil de carregar.




[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.....

22 comentários:

  1. Maravilha. Consegui colocar. Teu blog é muito bom!
    Eu 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...

    ResponderExcluir
    Respostas
    1. Estou com a mesma duvida, como colocá-lo do lado direito

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. Adicone < p align='right'> antes do < span class='large button rosa'>Leia Mais Postagem... feche com < / p>

      Blog: http://www.torvidesigner.blogspot.com

      Excluir
  2. no meu html não tem o data post , mais deixa ...

    ResponderExcluir
  3. Funcionou perfeitamente no meu blog.

    ResponderExcluir
  4. Muito boas suas dicas, estou deixando o meu blog cada vez melhor. Valeu!!

    ResponderExcluir
  5. cara, 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.

    Espero 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...

    ResponderExcluir
    Respostas
    1. Muito Obrigado também, valeu pelo comentário!

      Excluir
  6. Por favor, como faço para centralizar?

    ResponderExcluir
    Respostas
    1. Adicone < p align='right'> antes do < span class='large button rosa'>Leia Mais Postagem... feche com < / p>

      Blog: http://www.torvidesigner.blogspot.com

      Excluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. no meu n da certo, n tem nenhum desses codigos, oque eu faço??

    ResponderExcluir
    Respostas
    1. Lembre-se de Inserir Expansao de postagem . clicando numa folha cortada ao meio . só assim ira aparecer !

      Blog: http://www.torvidesigner.blogspot.com

      Excluir
  9. 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

    ResponderExcluir
  10. Não deu certo, quando você diz cole logo acima tenho que dar algum espaço?

    ResponderExcluir
    Respostas
    1. Oi, desconsidere minha postagem anterior. Consegui! Obrigada pela ajuda.

      Excluir
    2. Olá Aparecida tudo bem!
      de qualquer forma, obrigado por comentar

      Excluir
  11. 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

    ResponderExcluir
  12. Só 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.

    ResponderExcluir
  13. Respostas
    1. Olá! tudo bem?
      Me 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!!!!!

      Excluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook