Mundo do Blog - O que você procura acha aqui

sábado, 31 de outubro de 2015

Blog do LeoCabral

Posted: 31 Oct 2015 04:32 AM PDT

The post teste appeared first on Léo Cabral.

quarta-feira, 28 de outubro de 2015

O que é um ataque DDoS? – Como se proteger?

Posted: 28 Oct 2015 03:57 AM PDT

Com certeza que o leitor já terá navegado por um site na Internet que, de repente, começa a ficar lento e/ou, inclusivamente, a falhar… enquanto outros sites funcionam normalmente. Entre os diversos motivos que podem ser apontados, destacamos a possibilidade do servidor responsável pelo website estar a ser alvo de um "DDoS attack" (Distributed Denial of Service attack),… Ler Mais » O post O...

Aceda ao nosso site para continuar a ler, clique no título.

terça-feira, 27 de outubro de 2015

Visual Dicas

Gerador de botões em CSS gratuito

Posted: 26 Oct 2015 11:28 AM PDT

Botões personalizados

Nos artigos Crie botões personalizados para o seu Blogger e Crie botões personalizados no Wordpress mostramos algumas formas para você criar botões personalizados e inserí-los em blogs desenvolvidos no Blogger ou no Wordpress.

Botões são elementos de layout que servem para indicar e incentivar os leitores de um blog ao clique, ou seja, levam os seus visitantes a executarem um evento de interação. Por isso, é muito importante que os botões sejam atrativos, fiquem bem localizados e que combinem com o layout do site onde serão incluídos.

Mas se você quer fazer algo mais rápido, bateu uma preguiça ou é iniciante no mundo CSS, vamos apresentar nesta postagem um aplicativo gratuito e bem bacana para você criar seus próprios botões em CSS com apenas alguns cliques. Veja a seguir:

Utilizando o Gerador de botões

Acesse o site: http://css3buttongenerator.com/

1) Defina a font-family (Arial, Georgia ou Couries New), font-color (cor da fonte), font-size (tamanho da fonte) e font-shadow (sombreamento da fonte).

Para definir a font-family mantenha a caixa de seleção acionada e escolha entre as fontes disponíveis (Arial, Georgia ou Couries New).

Para definir a font-color, digite o código da cor ou clique no botão ao lado para definir a cor da fonte do botão.

Para definir o tamanho da fonte, digite o valor em px ou deslize o cursor ao lado.

Para criar sombreamento da fonte, marque a caixa de seleção font-shadow. Defina a cor da fonte e os parâmetros x, y e blur deslizando os cursores. Você poderá testar vários tipos de sombreamento e caso não encontrar o que deseja poderá desativar a caixa de seleção voltando ao padrão sem sombreamento.

2) Defina dimensões da caixa do botão clicando na aba +Box.

Da mesma forma que os ajustes anteriores, defina o box-shadow (sombreamento da borda do botão), padding-top (espaçamento entre o texto e a borda superior do botão), padding-right (espaçamento entre a borda direita e o texto do botão), padding-bottom (entre a borda inferior e o texto do botão) e finalmente padding-left (entre a borda esquerda e o texto do botão).

Atenção: Se você selecionar a caixa padding você definirá o valor dos espaçamentos superior, direito, inferior e esquerdo todos iguais.

3) Na aba +border defina o border-radius (raios dos vértices da borda). Selecione a caixa border caso queira definir a cor, estilo e espessura da borda do botão. Com a caixa border desmarcada a borda do botão terá a mesma cor do fundo.

4) Na aba +Backgroud defina a cor de fundo do botão. Se você selecionar solid, a cor será uma única cor sem efeito gradiente (mistura de cores). Se você optar por gradiente, coloque de preferência a mesma cor com tons diferentes nos parâmetros em start color e end color.

5) Na aba +Hover você irá definir os parâmetros da pseudo classe Hover, ou seja, promoverá uma mudança cor quando passar com cursor do mouse sobre o botão. Para isso escolha cores diferentes da que você utilizou na aba +Background.

Dica: Para facilitar, apenas inverta os valores star-color e end-color dos parâmetros que você utilizou na aba +Background.

Pronto, agora é só copiar o código CSS e inserí-lo no blog.

Colocando o código CSS no blog

Se você estiver utilizando as plataformas CMS do Blogger ou Wordpress, siga os tutoriais abaixo:

Como inserir códigos CSS no Blogger

Como usar CSS no Wordpress

Utilizando o código CSS nas suas postagens

Para você definir um botão com o estilo criado no CSS Button Generator, basta colocar a classe btn em qualquer hyperlink HTML que você utilizar nas suas postagens, como mostramos no exemplo abaixo:

<a class="btn" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Se você tem dúvidas sobre como colocar códigos HTML nas postagens do blog, leia:

Como inserir códigos HTML nas postagens do Wordpress

Como inserir códigos HTML nas postagens do Blogger

Testando o botão

Para testar os botões antes de colocar no seu blog, acesse o Squids Editor no link: Tente você mesmo »

(Para visualizar os resultados clique no botão [Enviar código]).

Observe que em uma página HTML o código CSS deverá estar compreendido entre as tags <style> e </style>.

Criando botões 3D através de programação CSS

Para conhecer mais sobre como criar botões em CSS utilizando a programação, leia as postagens:

Crie botões personalizados para o seu Blogger

Crie botões personalizados no Wordpress

Criando botões personalizados

Outros serviços de criação de botões

Conheça os melhores serviços geradores de botões da Web no nosso Portal: www.visualdicas.com.br

byALF

sábado, 24 de outubro de 2015

Como bloquear um IP através do cPanel | Anti SPAM

Posted: 24 Oct 2015 01:15 PM PDT

Costuma receber SPAM, ou outro tipo de ataque de um determinado IP? Saiba como usar o “IP Address Deny Manager” do cPanel para bloquear os acessos mal intencionados ao seu Website. Por exemplo, no WordPress você poderia bloquear o IP dos comentários de SPAM, reduzindo significativamente o tempo perdido a eliminar os comentários inúteis. É importante salientar que… Ler Mais » O...

Aceda ao nosso site para continuar a ler, clique no título.

terça-feira, 20 de outubro de 2015

Visual Dicas

Crie botões personalizados no Wordpress

Posted: 19 Oct 2015 06:12 PM PDT

Crie botões personalizados no Wordpress - Visual DicasCrie botões personalizados para o seu Blogger - Visual Dicas

Botões personalizados

Botões são elementos de layout que servem para indicar e incentivar os leitores de um blog ao clique, ou seja, levam os seus visitantes a executarem um evento de interação. Por isso, é muito importante que os botões sejam atrativos, fiquem bem localizados e que combinem com o layout do site onde serão incluídos.

Neste tutorial vamos criar botões personalizados com efeito 3D utilizando HTML e CSS. Nosso objetivo é criar botões simples, porém visualmente atraentes para serem utilizados nos layouts de blogs desenvolvidos para o Wordpress.

Veja abaixo os botões que iremos criar neste tutorial:

Adicionando código CSS no Wordpress

Primeiro copie o código CSS abaixo e insira no Editor da folha de estilos CSS do painel do Wordpress.org seguindo o tutorial: Como usar CSS no Wordpress.

Atenção: Não apague os códigos já inseridos em [Editar CSS]. Insira o novo código copiado no final do painel do Editor da folha de estilos CSS, como mostra o exemplo abaixo.

Copiar o Código CSS abaixo:

        .bt {          
border:1px solid #25692A;           
border-radius:4px;           
display:inline-block;           
cursor:pointer;           
font-family:Verdana;           
font-weight:bold;           
font-size:14px;           
padding:7px 10px;           
text-decoration:none;           
}
             
.bt-vd {          
border-color:#68b465;           
background:linear-gradient(to bottom, #abd5aa 5%, #68b465 100%);           
box-shadow:inset 0px 1px 0px 0px #e3f1e3;           
color:#fff;           
text-shadow:0px 1px 0px #000;           
}           
  
.bt-lj {           
border-color:#eb9b48;           
background:linear-gradient(to bottom, #f7d6b3 5%, #eb9b48 100%);           
box-shadow:inset 0px 1px 0px 0px #fdf7f0;           
color:#333;           
text-shadow:0px 1px 0px #ffee66;           
}           
  
.bt-az {           
border-color:#46a7f5;           
background:linear-gradient(to bottom, #86c6f8 5%, #46a7f5 100%);           
box-shadow:inset 0px 1px 0px 0px #d7ecfd;           
color:#fff;           
text-shadow:0px 1px 0px #528009;           
}           
  
.bt-vm {           
border-color:#f61f0e;           
background:linear-gradient(to bottom, #fca8a1 5%, #f61f0e 100%);           
box-shadow:inset 0px 1px 0px 0px #fff4f3;           
color:#fff;           
text-shadow:0px 1px 0px #528009;           
}           
  
.bt-vd:hover {           
background:linear-gradient(to bottom, #68b465 5%, #abd5aa 100%);           
}           
  
.bt-lj:hover {           
background:linear-gradient(to bottom, #eb9b48 5%, #f7d6b3 100%);           
}           
  
.bt-az:hover {           
background:linear-gradient(to bottom, #46a7f5 5%, #86c6f8 100%);           
}           
  
.bt-vm:hover {           
background:linear-gradient(to bottom, #f61f0e 5%, #fca8a1 100%);           
}           
  
.bt:active {           
position:relative;           
top:2px;}

No código CSS acima criamos 4 botões 3D, sendo 1 verde, 1 laranja, 1 azul e 1 vermelho. Se desejar, você também poderá criar novas cores e formatos. Veja como no nosso tutorial Criando botões personalizados em CSS.

Depois que o código CSS foi copiado e colado no Editor da folha de estilos CSS no painel do Wordpress, clique no botão [Salvar folha de estilo].

Pronto, agora você já poderá inserir seus botões nas postagens. Veja como a seguir:

Criando botões nas postagens

Botões podem ser criados de várias formas escritas em HTML, como nos exemplos:

<button class="bt bt-vd" onclick="alert('Olá')">Abrir</button>      
<a class="bt bt-lj" href="#">Acessar</a>       
<input class="bt bt-az" type="submit">       
<a class="bt bt-vm" onclick="alert('Olá')">Clique aqui</a>

Neste tutorial vamos mostrar apenas a forma simples de hiperlink utilizando a tag <a>, onde você clicando no botão será redirecionado para uma nova página. Entretanto, você poderá utilizar qualquer dos formatos acima.

1) Vamos então criar o hiperlink através do código HTML abaixo:

<a href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados"  target="_blank">Como criar botões</a>

Depois vamos inserir o código HTML na nossa postagem.

ATENÇÃO: Se você não sabe como colocar códigos na postagem do Wordpress, leia o nosso tutorial: Como inserir códigos HTML nas postagens do Wordpress

Veja como abaixo o resultado do código HTML sem acrescentarmos os estilos do nosso botão:

Como criar botões

2) Agora vamos inserir a classe padrão do botão ".bt", conforme o código CSS que colocamos no modelo do nosso blog.

<a class="bt" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

3) Para colocar as cores, basta inserir as classes de cores definidas no código CSS ao lado da classe padrão, separados por um espaço, ficando:

Verde (bt-vd)

<a class="bt bt-vd" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Laranja (bt-lj)

<a class="bt bt-lj" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Azul (bt-az)

<a class="bt bt-az" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Vermelho (bt-vm)

<a class="bt bt-vm" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Visualizar exemplo no Wordpress

Pronto, agora que você já viu como criar os botões, veja nosso exemplo no link: http://visualdicas.com.br/byalf/?p=50.

Observação: No exemplo acima foi necessário a utilização de correção nas cores dos links conforme orientação abaixo:

Correção nas cores dos links

ATENÇÂO: Em função da pseudo classe "link" e do sistema de hierarquia CSS, poderá ocorrer uma divergência nas cores dos links, que devem ser: branco (botões verde, azul e vermelho) e preto (botão laranja). Para corrigir isto adicione o código CSS abaixo no final do editor da folha de estilos CSS no painel do Wordpress.

/* correção cores dos links */

a.bt-vd:link, a.bt-az:link, a.bt-vm:link {
color:#fff;
text-decoration:none;
}

a.bt-vd:visited, a.bt-az:visited, a.bt-vm:visited {
color:#fff;
text-decoration:none;
}

a.bt-lj:link, a.bt-lj:visited {
color:#000;
text-decoration:none;
}

Após copiar e colar o código CSS no painel do Wordpress, clique em [Salvar folha de estilo].

Obs.: Para testar os botões antes de colocar no seu blog, acesso o Squids Editor no link: Tente você mesmo » (Para visualizar os resultados clique no botão [Enviar código]).

byALF

domingo, 18 de outubro de 2015

DMCA: a lei que protege o Copyright

Posted: 18 Oct 2015 10:58 AM PDT

Em primeiro lugar, é essencial que o leitor compreenda o que significa o termo "Copyright", mais vulgarmente resumido ao símbolo ©. Copyright, ou direitos de autor, impede a cópia ou exploração de uma dada propriedade intelectual – por exemplo: música, imagens, livros, trabalhos gráficos… – sem permissão prévia do proprietário ou de um agente autorizado. Entenda-se por "agente… Ler Mais » O...

Aceda ao nosso site para continuar a ler, clique no título.

quinta-feira, 15 de outubro de 2015

Visual Dicas

Crie botões personalizados para o seu Blogger

Posted: 14 Oct 2015 01:49 PM PDT

Crie botões personalizados para o seu Blogger - Visual DicasCrie botões personalizados para o seu Blogger - Visual Dicas

Botões personalizados

Veja abaixo os botões que iremos criar neste tutorial:

Adicionando código CSS no Blogger

Primeiro copie o código CSS abaixo e insira no Editor do Designer do Painel do Blogger seguindo o tutorial: Como inserir códigos CSS no Blogger.

Atenção: Não apague os códigos já inseridos em [Adicionar CSS]. Insira o novo código copiado no final do painel do Designer de modelo do Blogger como mostra a figura abaixo.

Código CSS

        .bt {          
border:1px solid #25692A;           
border-radius:4px;           
display:inline-block;           
cursor:pointer;           
font-family:Verdana;           
font-weight:bold;           
font-size:14px;           
padding:7px 10px;           
text-decoration:none;           
}
             
.bt-vd {          
border-color:#68b465;           
background:linear-gradient(to bottom, #abd5aa 5%, #68b465 100%);           
box-shadow:inset 0px 1px 0px 0px #e3f1e3;           
color:#fff;           
text-shadow:0px 1px 0px #000;           
}           
  
.bt-lj {           
border-color:#eb9b48;           
background:linear-gradient(to bottom, #f7d6b3 5%, #eb9b48 100%);           
box-shadow:inset 0px 1px 0px 0px #fdf7f0;           
color:#333;           
text-shadow:0px 1px 0px #ffee66;           
}           
  
.bt-az {           
border-color:#46a7f5;           
background:linear-gradient(to bottom, #86c6f8 5%, #46a7f5 100%);           
box-shadow:inset 0px 1px 0px 0px #d7ecfd;           
color:#fff;           
text-shadow:0px 1px 0px #528009;           
}           
  
.bt-vm {           
border-color:#f61f0e;           
background:linear-gradient(to bottom, #fca8a1 5%, #f61f0e 100%);           
box-shadow:inset 0px 1px 0px 0px #fff4f3;           
color:#fff;           
text-shadow:0px 1px 0px #528009;           
}           
  
.bt-vd:hover {           
background:linear-gradient(to bottom, #68b465 5%, #abd5aa 100%);           
}           
  
.bt-lj:hover {           
background:linear-gradient(to bottom, #eb9b48 5%, #f7d6b3 100%);           
}           
  
.bt-az:hover {           
background:linear-gradient(to bottom, #46a7f5 5%, #86c6f8 100%);           
}           
  
.bt-vm:hover {           
background:linear-gradient(to bottom, #f61f0e 5%, #fca8a1 100%);           
}           
  
.bt:active {           
position:relative;           
top:2px;}

Depois que o código CSS foi copiado e colado no painel do modelo do Blogger, clique no botão [Aplicar no blog].

Pronto, agora você já poderá inserir seus botões nas postagens. Veja como a seguir:

Criando botões nas postagens

Botões podem ser criados de várias formas escritas em HTML, como nos exemplos:

<button class="bt bt-vd" onclick="alert('Olá')">Abrir</button>      
<a class="bt bt-lj" href="#">Acessar</a>       
<input class="bt bt-az" type="submit">       
<a class="bt bt-vm" onclick="alert('Olá')">Clique aqui</a>

1) Vamos então criar o hiperlink através do código HTML abaixo:

<a href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados"  target="_blank">Como criar botões</a>

Depois vamos inserir o código HTML na nossa postagem.

ATENÇÃO: Se você não sabe como colocar códigos na postagem do Blogger, leia o nosso tutorial: Como inserir códigos HTML nas postagens do Blogger

Veja como abaixo o resultado do código HTML sem acrescentarmos os estilos do nosso botão:

Como criar botões

2) Agora vamos inserir a classe padrão do botão ".bt", conforme o código CSS que colocamos no modelo do nosso Blogger.

<a class="bt" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

3) Para colocar as cores, basta inserir as classes de cores definidas no código CSS ao lado da classe padrão, separados por um espaço, ficando:

Verde (bt-vd)

<a class="bt bt-vd" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Laranja (bt-lj)

<a class="bt bt-lj" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Azul (bt-az)

<a class="bt bt-az" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Vermelho (bt-vm)

<a class="bt bt-vm" href="http://visualdicas.com.br/tutoriais/css/18-css-em-acao/9-criando-botoes-personalizados" target="_blank">Como criar botões</a>

Veja na postagem:

Como criar botões

Correção nas cores dos links

ATENÇÂO: Se você tiver problemas com as cores dos links dos botões, adicione o código CSS abaixo no final do painel do modelo do Blogger.

/* correção cores dos links */

a.bt-vd:link, a.bt-az:link, a.bt-vm:link {
color:#fff;
}

a.bt-vd:visited, a.bt-az:visited, a.bt-vm:visited {
color:#fff;
}

a.bt-lj:link, a.bt-lj:visited {
color:#000;
}

Após copiar e colar o código CSS no painel do modelo do Blogger, clique em [Aplicar no blog].

Obs.: Para testar os botões antes de colocar no seu blog, clique no link: Tente você mesmo » (No Squids Editor não esqueça de clicar o botão [Enviar código] para visualizar os resultados).

byALF

Páginas

sábado, 31 de outubro de 2015

Blog do LeoCabral

Blog do LeoCabral

quarta-feira, 28 de outubro de 2015

O que é um ataque DDoS? – Como se proteger?

O que é um ataque DDoS? – Como se proteger?

terça-feira, 27 de outubro de 2015

Visual Dicas

Visual Dicas

Botões personalizados

Utilizando o Gerador de botões

Colocando o código CSS no blog

Utilizando o código CSS nas suas postagens

Testando o botão

Criando botões 3D através de programação CSS

Outros serviços de criação de botões

sábado, 24 de outubro de 2015

Como bloquear um IP através do cPanel | Anti SPAM

Como bloquear um IP através do cPanel | Anti SPAM

terça-feira, 20 de outubro de 2015

Visual Dicas

Visual Dicas

Botões personalizados

Adicionando código CSS no Wordpress

Criando botões nas postagens

Visualizar exemplo no Wordpress

Correção nas cores dos links

domingo, 18 de outubro de 2015

DMCA: a lei que protege o Copyright

DMCA: a lei que protege o Copyright

quinta-feira, 15 de outubro de 2015

Visual Dicas

Visual Dicas

Botões personalizados

Adicionando código CSS no Blogger

Criando botões nas postagens

Correção nas cores dos links

Afilia-se na NetAffiliation

Ganhe dinheiro com os Programas de Afiliados