Personalizar "Leia Mais" com CSS

http://www.candylland.net/2013/04/personalizar-leia-mais-com-css.html

Olá ;3 Hoje lhes trouxe outro tutorial bem fácil, mas que ajuda bastante a manter o blog organizado. É sobre como deixar o 'Jump Break', 'Expansão de Postagem' ou 'Leia Mais'personalizado; há algum tempo, em meu blog, havia postado algumas formas de personalizá-lo, sendo que adorei a que usa apenas CSS por ser mais simples e não necessitar de grandes substituições no HTML (acrescenta-se um código).

Assim seu blog poderá carregar mais rápido, você poderá deixar o leitor super curioso para clicar no botãozinho bonitinho, que vai estar de acordo com seu gosto, e ler o restante de seu post.

A expansão de postagem pode ser adicionada da seguinte maneira na área de posts:

Ou então adicione <!--more--> direto no HTML do post, sendo que o conteúdo oculto deverá vir depois disso. O texto pode ser alterado em Layout - Gadget Postagens...

Aí você escolhe se quer que apareça Leia Mais, Read More, Continue... Sendo que poderá ficar do jeito que a gente quiser. Por exemplo, com o código que deixo aqui vocês irão obter um resultado mais ou menos assim:

Leia mais...

Para que essa opção apareça personalizada, cole o código a seguir ACIMA de ]]></b:skin>:

.jump-link { /* Area geral do leia mais */
float:right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79P7MkSXeLrdZYCWmgL1Y8UKHT_AK-R-0M1-pmG1AMlsfwAStV-m0fdC7ej8098-eQoVWNw67aP8WScc4rBI_5j0820iyPvE_U5KP8STX1FOImRM2L6FcdRM2ntnIU_RASZb7rKPvemqR/s1600/bg16.gif) repeat;
border-radius: 10px;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
border-left: 5px inset #D5BACB;
border-right: 5px inset #DEEEFE;
border-top: 5px inset #D1F5C7;
border-bottom: 5px inset #F2BFC8;
box-shadow: 2px 3px 4px #a1a1a1;
font-family: 'Leckerli One';
font-size: 22px;
}
.jump-link a {
color: #f0b9f0; /* Estilos para o texto */
text-decoration: none;
font-weight: bold;
text-shadow: 1px 2px 3px #fff;
}
.jump-link:hover { /* Estilos para quando se passa o mouse */
background: #ffc7ff;
border-radius: 5px;
text-decoration:none;
text-shadow: 1px 2px 3px #fff;
}
@font-face {font-family:'Leckerli One';src:local('LeckerliOne'),url('http://themes.googleusercontent.com/static/fonts/leckerlione/v3/S2Y_iLrItTu8kIJTkS7DrHhCUOGz7vYGh680lGh-uXM.woff') format('woff')}

Percebam que deixei a aparência super colorida, para que vocês possam editar o código e notar cada área que será modificada quando alterar. Se quiserem mais opções de fontes: Lindas Fontes para seu Blog.

Eu espero que gostem :3 Beijinhus, Roberta.

Proibido reblogar 
Se gostou desta postagem, não esqueça de subscrever o nosso rss feed.