Personalizar o botão Leia mais no Blogger

Para quem implementou o hack "Leia mais" com a dica de meu blog, vou ensinar a dar uma personalizada no botão apenas usando CSS, como fiz aqui em meu blog.



Vá até o Modelo de seu blog e procure por: ]]></b:skin>


 

 

Acima dele, cole o código abaixo.

Cole então o próximo código fazendo as modificações necessárias.

/*Showlink-----------------------------------------------------*/
#showlink {  margin: 0 34px 0 0; padding: 0;}
#showlink a{
  float: right;
  position: relative;
  background-color: $(link.color);/*cor do fundo*/
  /* la altura */
  height: 24px;
  line-height: 24px;
  padding:0 10px 0px 12px;
  margin-left:16px; bottom: 5px;
  color: #FFF;/*cor texto*/
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}
#showlink a:before {
  border-color: transparent transparent transparent $(link.color);/*cor ponta seta*/
  border-style: solid;
  border-width:12px 0px 12px 12px;
  content: "";
  float: right;
  right: -12px;
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
#showlink a:after {
  background-color: #FFF; /* cor bolinha */
  content: "";
  float: right;
  right: 0;
  position: absolute;
  top: 10px;
 height: 4px;
  width: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
#showlink a:hover{
  background-color:  $(link.hover.color); /*cor seta passar mouse*/
}
#showlink a:hover:before {
  border-color: transparent transparent transparent  $(link.hover.color); /*cor ponta seta*/
}

Se o código acima não deu certo, tente esse:

/*Showlink-----------------------------------------------------*/
#showlink {  margin: 0 34px 0 0; padding: 0;}
#showlink a{
  float: right;
  position: relative;
  background-color: #cc0000;/*cor do fundo*/
  /* la altura */
  height: 24px;
  line-height: 24px;
  padding:0 10px 0px 12px;
  margin-left:16px; bottom: 5px;
  color: #FFF;/*cor texto*/
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}
#showlink a:before {
  border-color: transparent transparent transparent #cc0000;/*cor ponta seta*/
  border-style: solid;
  border-width:12px 0px 12px 12px;
  content: "";
  float: right;
  right: -12px;
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
#showlink a:after {
  background-color: #FFF; /* cor bolinha */
  content: "";
  float: right;
  right: 0;
  position: absolute;
  top: 10px;
 height: 4px;
  width: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
#showlink a:hover{
  background-color: #555;/*cor seta passar mouse*/
}
#showlink a:hover:before {
  border-color: transparent transparent transparent #555 ;/*cor ponta seta*/
}

No código acima perceba que, os dois códigos na cor azul são da cor da seta e os códigos em rosa a cor da seta ao passar o mouse.