Olá a todos novamente! Antes de mais queria pedir desculpa pela minha ausencia no blog, estive um pouco inativo estes últimos dias devido ao regresso as aulas, mas agora já esta tudo organizado e já posso continuar a postar no blog mais frequentemente que nestes últimos dias.Todos nós já devemos ter reparado na importância do nosso número de subscritores do feed, ja devem ter reparado que quanto maior for o número de assinantes mais visitas vais obter e vais fazer com que os leitores não esqueçam o teu blog e que voltem devido as postagens automaticas enviadas para o seu e-mail.Aqui no Lucrar Com Blog já verificamos várias maneiras de aumentar o nosso número de subscritores, mas nada mais simples para aumentar os subscritores do que uma elegante caixa feita com CSS3 para dar a oportunidade aos leitores de assinar.Podes verificar aqui algumas maneiras de aumentar os teus subscritores:

  • Poup-Up Para Aumentar Número de Subscritores
  • 7 Maneiras Para Conseguir Mais Subscritores

Hoje vou ensinar a colocar uma pequena caxa de subscrição por e-mail, podes verificar como fica na imagem abaixo:

Se gostaste do que viste podemos passar para a ação e vamos colocar a “caixa” no blogger!

  1. Em primeiro lugar vai ter de entrar no painel do seu blog e clicar em modelo.
  2. Clique no botão: Editar HTML
  3. Depois procure (para procurar clique nas teclas CTRL+F) pela tag: 

]]>

        4.  Em cima da tag referida acima cole o seguinte código:

#input-rss {
width: 185px;
padding: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;
border: 1px solid #CCC;
font-size: 12px;
height: 15px;
border-image: initial;
float: left;
margin-right: 6px;
}
#input-rss:focus {
border: 1px solid gray;
outline: none;
}
#btn-assinar {
cursor: pointer;
margin-top: -7px;
height: 31px;
color: white!important;
background: #1F9CD8;
background: -moz-linear-gradient(top, rgba(31, 156, 216, 1) 0%, rgba(14, 131, 201, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31, 156, 216, 1)), color-stop(100%,rgba(14, 131, 201, 1)));
background: -webkit-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -o-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -ms-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1f9cd8′, endColorstr=’#0e83c9′,GradientType=0 );
border: 1px solid #085988;
font-size: 17px;
color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
cursor: pointer;
float: left;
line-height: 12px;
text-shadow: 1px 1px 1px #117AAB;
filter: dropshadow(color=#117aab, offx=1, offy=1);
border-image: initial;
}
#btn-assinar:hover {
background: #1F9CD8;
}

Agora pode salvar e podemos passar para o passo seguinte, neste passo anterior estivemos a colocar as características da caixa no “corpo” do blog, agora vamos adiciona-la no blog e colocar-la em funcionamento.

  1. Vá à guia Layout e clique em Adicionar Mini-Aplicação.
  2. Escolha a caixa HTML/JavaScript e cole lá o seguinte código:




Depois de colar o código tem de fazer umas pequenas alterações, onde diz NOME DO SEU FEED coloque o seu nome do Feed do FeedBurner (2 vezes).

E chegamos ao final do nosso tutorial, espero que tenham gostado da vossa nova caixa em CSS3, aproveitem!Se tiverem dúvidas é só comentar 😀

(Visited 23 times, 1 visits today)