Bastante atraente para quem quiser criar blogs demonstração e downloads de templates, filmes, software ou qualquer outra coisa que possa ser compartilhado.
Entre em seu blogger va em "Modelo" depois "Editar HTML" procure </head> e adicione antes:
CÓDIGO: SELECIONAR TODOS
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'Depois procure ]]></b:skin> e adicione a cima um dos dois códigos que você deseja usar:
rel='stylesheet'/>
Exemplo Botão 1:
/* CSS Button Style 1 by www.arlinadzgn.com */.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both} .button ul{margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none} .button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;
background:#f39c12;color:#fff;font-weight:700;font-size:14px;text-align:center;
text-transform:uppercase;letter-spacing:0.5px;border-radius:
3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s} .button li a.download{background:#3498db} .button li a.demo:hover,.button li a.download:hover{background:#666} .button li a.demo:active,.button li a.download:active{cursor:pointer} .button li a.demo:after,.button li a.download:after{content:'\f135';
background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;
display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome} .button li a.download:after{content:'\f019'}
Exemplo Botão 2:
/* CSS Button Style 2 by www.arlinadzgn.com */.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both} .button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none} .button2 li a.demo,.button2 li a.download{position:relative;
padding:14px 48px 14px 16px;background:#f39c12;display:block;
color:#fff;font-weight:700;font-size:14px;text-align:left;
text-transform:uppercase;letter-spacing:.2px;border-radius:3px;
box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;
max-width:170px;margin:auto;overflow:hidden} .button2 li a.download{background:#3498db} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 li a.download:after{content:'\F054';
background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;
display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;
font-family:fontawesome;transition:all .3s} .button2 li:hover a.demo:after,.button2 li:hover a.download:after
{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;
animation:bounceright .3s alternate ease infinite} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:
translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
Depois clique em "Salvar modelo"
Quando criar um post ou uma pagina adicione o código como "HTML":
Exemplo botão 1:
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="Link do site" target="_blank">Demonstração</a></li> <li><a class="download" href="Link do site" target="_blank">Download</a></li> </ul></div><div class="clear"></div>
Exemplo botão 2:
<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="Link do site" target="_blank">Demonstração Link</a></li> <li><a class="download" href="Link do site" target="_blank">Download Link</a></li> </ul></div><div class="clear"></div>
Marcadores: DICAS E TUTORIAL