Faça Button's em CSS para suas postagens

Se você quer fazer botton's personalizados com o texto que quiser usando CSS veja os passos abaixo.

Estes botton's em CSS são construídos com uma imagem de ponta arredondada cortado em dois pedaços e, em seguida, colocado de volta no conjunto usando CSS. O texto do botton reage ao passar o mouse.

Escolha o modelo que quiser abaixo("salvar imagem como...") , salve no ImageShack por exemplo, e coloque a url dela onde está em azul ("background: transparent url('media/roundedge-gray-left.gif')". Só lembrando, lado esquerdo(left) e direito (right).

Cinza oval (2 images):

Azul oval (2 images):

Verde button (2 images):

Vermelho button (2 images):

Metalico (2 images):

EXEMPLO

DOWNLOAD EXEMPLO Download CSS buttons

Coloque aqui o que desejar

DOWNLOAD LINKSDUZÃO Tutoriais para Blogger

1º passo:Copie cole esse código logo após a tag <HEAD> do seu template e salve.

<style type="text/css">

a.boldbuttons{
background: transparent url('media/roundedge-gray-left.gif')
no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px;
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;
}

a:link.boldbuttons, a:visited.boldbuttons,
a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent
url('media/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px;
}

a:hover.boldbuttons{
text-decoration: underline;
}

.buttonwrapper{
overflow: hidden;
width: 100%;
}

</style>

2º passo:Copie esse código. Para que esse código apareça cada vez que for fazer uma postagem, siga os passos. No seu template vá até "Configurações" >>> "Formatação" >>> "Modelo de postagem" e cole esse código dentro da caixinha."Salvar configuções". Assim, toda vez que for postar, o código dos botões vai aparecer. Basta só mudar o nome do texto do button e o link dele, e publicar.

Bookmark este post: