.

quarta-feira

Textual description of firstImageUrl

Botão DEMO e DOWNLOAD Com CSS Para Blogger

ACESSOS:
Deixe seu comentário


Gosto de ensinar tutoriais da qual as pessoas realmente precisam em seu site mais não sabem como fazer, como por exemplo este tutorial que trago para vocês - Botão DEMO e DOWNLOAD Com CSS. Principalmente para aqueles blogs de template. 




Veja uma demonstração:




Para colocar no blogger...


Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:


Para colocar no Blogger

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:
<style>
.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #E55E48; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #2ecc71; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover { 
background: #454242;
text-decoration:none 
}

.download:hover { 
background: #454242;
text-decoration:none 
}

.download:before { 
content : "\f019"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #27ae60; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

.demo:before { 
content : "\f06e"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #c0392b; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
} 
</style>
<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="LINK DA DEMONSTRAÇÃO" target="_blank">Demo</a></li>
<li><a class="download" href="LINK DO DOWNLOAD" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Tendo colado o código, salve e pronto!!!


RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}


 
.