Como colocar Leia Mais no blog + Modelos Exclusivos

|| ||

 Olá sweeties!!! Feliz Páscoa para todos!!! Como vocês viram temos uma nova postadora é a Beatriz ou Bea como ela prefere, então seja muito bem vinda Bea.
O novo layout que disse que ia trocar, não consegui, pois é, estou tendo muito trabalho com o cabeçalho, pois faço e apago, mas como segunda-feira é feriado, então vou tentar colocar segunda-feira o novo layout.
Recebi um pedido na ask, para ensinar colocar leia mais personalizado no blog. Então irei ensinar aqui nesse post.
Para colocar leia mais personalizado no blog, você vai em Modelo>> Editar HTML>> Clique dentro da caixa e aperte Ctrl+F e procure por:
]]></b:skin>
E acima cole o código do modelo que você escolheu.
Depois de colocar Salve!

Mas ainda não irá aparecer, para aparecer na postagem o leia mais, na sua postagem faça primeiro uma introdução normal e clique nesse botão  (Inserir expansão de postagem). Ficará assim:
Esse risco significa que sua postagem tem um leia mais.
Pronto, é só continuar com a sua postagem normalmente.

MODELO
Trouxe alguns modelos de Leia Mais que eu mesma fiz.

1º Modelo
.jump-link  {
text-align: right; /* posicionamento do leia mais */
margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */
margin-bottom: 15px;
}
.jump-link a {
padding:4px 2px 4px 2px;
display: inline-block;
margin-bottom:3px;
margin-left:1px;
margin-right:1px;
background-color: #f9cee1;
font-size: 8px;
font-family: wish;;
text-align: center;
color: #f49dc1;
line-height: 13px;
border: 1px solid #f49dc1;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
return: false;
}
.jump-link a:hover {
Color: #4ea764;
Background: #d2e8d7;
border: 1px solid #4ea764;
-webkit-transition-duration: .90s;
}

2º Modelo
.jump-link  {
text-align: right; /* posicionamento do leia mais */
margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */
margin-bottom: 15px;
}
.jump-link a {
padding:4px 2px 4px 2px;
display: inline-block;
margin-top: 8px;
color:#fff;
text-shadow: 1px 1px 1px #ff97c5;
background:#ffcbe1;
border: solid 1px #ff97c5;
box-shadow: inset 0 0 6px #f5f5f5, 0px 1px 1px#FCB3BC;
margin:+2px;
margin-left:0px;
display: inline-block;
text-align: center;
font-family: PF Arma Five;font-size: 8px;float: center;
padding:5px;
height: 8px;
width: 100px;
-webkit-transition-duration: .80s;
}
.jump-link a:hover {
cursor:hand;
background:#F9F9F9;
border: solid 1px #ffcbe1;
box-shadow: inset 0 0 6px #DCDCDC, 0px 1px 1px #DCDCDC;
text-align: center;
font-family: PF Arma Five; font-size: 8px;
color:#ff97c5;
text-shadow: 1px 1px 1px #f5f5f5;
-webkit-animation: jump 1.3s;-moz-animation: jump 1.3s;-ms-animation: shake 1.3s;
}
@-webkit-keyframes jump {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}
75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
}
.jump {-webkit-transition: .9s; border-radius: 5px;}
.jump:hover {-webkit-animation: useful .9s alternate ease;}
Nos dois modelos é só você mudar o que está em negrito.
Espero que tenham gostado!
Se usarem dê os créditos ao Sweet of Cherry