Bem-Vindo ao Biti's Place! Aqui você encontra curiosidades, fotografia, notícias, goodies, e tudo o que há de bom! Sente-se, coma um cookie, e divirta-se! Biti's Place, agora com um ano de vida, na versão Freedom! Para nos seguir, clique o no passarinho em cima das postagens ;3

Sou a Biti, mais conhecida como Bianca, e sou blogueira há pouco mais de um ano. Criei este mundinho colorido com a intenção de entreter vocês e mostrar um pouquinho da minha pessoa. Espero que gostem do blog!



Skin feita com base no Modelo Minima, personalizada pela Cronya e idealizada pela Biti. Não aceitamos nenhum tipo de plágio ou inspirações, por favor respeitem isso. Claro, que tivemos que contar com ajuda de alguns blogs, agradecemos a eles por disponibilizarem códigos e nos ensinar tanto, Kawaii World, Camila's Desing e Cherry Bomb. A skin foi feita inspirada no passárinho da Biti, podem encontrar ele em alguns lugares no blog, fofo não?

Biti's Place

Como colocar "Leia mais" com efeito e com imagem


Oi, minhas lindas!
Tudo bom?
Hoje eu trouxe um tutorial bem legal que vai dar um charme a mais no seu blog, bom vocês sabem aquele "Leia mais" ou o que tiver escrito no seu blog ?
Ele se não for personalizado fica bem feinho, né? Para personalizar você pode mudar apenas a cor que já fica muito lindo mais... que tal colocar uma imagem?


  1. Vá em Modelo na barra lateral da esquerda
  2. Vá em Editar HTML do seu blog
  3. Procure por  ]]></b:skin>  mas para facilitar sua busca aperte CTRL+F
  4. Logo acima desse código cole esse outro código:

.jump-link {float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/line-height: 18px; /*Altura da linha, mude de acordo com o tamanho da fonte*/background: url(‘link-da-imagem-de-fundo’) no-repeat;width: 200px; /*Largura da imagem*/height: 32px;/*Altura da imagem*/margin-right: -20px; /*Margem direita*/margin-bottom: 30px; /*Margem inferior*/padding-left: 0px; /*Ajuste para posicionar o texto*/padding-right: 0px; /*Ajuste para posicionar o texto*/}.jump-link a {font-family: Arial;font-size: 14px;font-weight: normal;}.jump-link a:hover {color: #000;text-decoration: none;}


Entendendo :
                                                                                   
As partes do código que estão em negrito são importantes para alinhar a imagem que você usar no fundo. As margin right e bottom vão determinar a posição do link como um todo, puxando mais para a direita e colocando um espaço abaixo dele. Já os padding right e left vão ajudar a alinhar o texto dentro da imagem. Basta modificar os valores para ver a diferença que eles fazem, e logo você entenderá :)

E agora um EXTRA:
Imagens que vocês podem usar, é só escrever na imagem o que quiser, como "Leia Mais" e "Continue Lendo":

jump-link-cb-1      jump-link-cb-2

jump-link-cb-3       jump-link-cb-4

jump-link-cb-6           jump-link-cb-7


Créditos ao blog Cherry Bomb

Bom, não se esqueçam de dar idéias para posts de tutoriais e utilitários
e...
UM BEIJÃO DA CELLY

0 Cupcakes comentaram:

Postar um comentário

Deixe seu comentário, opinião e sugestões aqui.
No final do comentário, por favor, deixe o url do seu blog/site, para poder te responder melhor e retribuir sua visita!
Obrigada!