Box d/ feed c/ redes sociais

Bom e feliz domingo vim aproveitar para trazer uma partilha enquanto a minha internet tá deixando.
Como se pode vêr na imagem acima é um novo modelo de box de feed email com redes sociais.
Não têm efeitos hover é bem simples mas têm fundo de gradientes para todos os navegadores...
Vamos lá aplicár...

Antes de tudo faça uma cópia do seu template...

Entre no painél do seu blog depois em modelo e click editar html e procure este código...

Coloque o meu código ou acima ou abaixo do código sublinhado a vermelho...

<!--http://best-tuga.blogspot.pt/-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.bt-socialcaixa {
background: #9561cc; /* Old browsers */
background: -moz-linear-gradient(45deg, #9561cc 1%, #7d6bbc 51%, #cccccc 53%, #736977 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#9561cc), color-stop(51%,#7d6bbc), color-stop(53%,#cccccc), color-stop(100%,#736977)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #9561cc 1%,#7d6bbc 51%,#cccccc 53%,#736977 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #9561cc 1%,#7d6bbc 51%,#cccccc 53%,#736977 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #9561cc 1%,#7d6bbc 51%,#cccccc 53%,#736977 100%); /* IE10+ */
background: linear-gradient(45deg, #9561cc 1%,#7d6bbc 51%,#cccccc 53%,#736977 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9561cc', endColorstr='#736977',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #ddd;
height: 170px;
margin: 10px auto;
padding: 10px;
width: 550px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0px 3px 5px #000000;
-webkit-box-shadow: 0px 3px 5px #000000;
box-shadow: 0px 3px 5px #000000;  
}
.bt-subscriçao {
border: 1px solid #D3D3D3;
padding: 8px;
width: 532px;
border-radius:  3px;
-moz-border-radius:  3px;
-webkit-border-radius:  3px;  
}
.bt-subscriçao:hover {
}
.bt-email {
border: 1px solid #000;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #666;
font: 14px Oswald;
padding: 7px 15px;
width: 380px;
}
.bt-email:hover {
-webkit-box-shadow: none;
box-shadow: none;

}
.bt-botao {
font: bold 12px Oswald;
font-style: normal;
color: #000;
background: #f063c7;
border: 2px solid #ffffff;
text-shadow: 0px -1px 1px #fcfcfc;
border-radius:  3px;
-moz-border-radius:  3px;
-webkit-border-radius:  3px;
padding: 6px 15px;
cursor: pointer;
margin: 0 auto;
}
.bt-botao:active {
cursor: pointer;
position: relative;
top: 2px;
}
.bt-botao::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<div class='bt-socialcaixa'>
<div class='bt-subscriçao'>
<div style='color: #FCFCFC;text-shadow:3px 2px 2px #000000;  font: 20px Oswald; margin:10px  ;'>ASSINE O FEED E REÇEBA AS NOVIDADES POR EMAIL</div>
<div style='margin: 10px 0 0 18px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=seu feed&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='seu feed' />
<input name='loc' type='hidden' value='en_US' />
<input class='bt-email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Aqui o seu email...&quot;;}'
onfocus='if (this.value == &quot;Aqui o seu email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Aqui o seu email...' />
<input alt='' class='bt-botao' title='' type='submit' value='ASSINE' />
</form>

<div style='border: none; color: #666666; font: 22px Oswald; margin: 10px 0 0 18px;'></div>
<div style='margin: -2px 0 0 80px;'>

<a href='http://facebook.com/nome rede social' rel='nofollow' target='_blank' title='siga me Facebook'><img src='http://i.imgur.com/YDKjIFb.png' alt='facebook'/></a>

<a href='http://twitter.com/nome rede social' rel='nofollow' target='_blank'
title='siga me Twitter'><img src='http://i.imgur.com/dDgPIsX.png' alt='twitter'/></a>

<a href='http://deliciuos.com/nome rede social' rel='nofollow' target='_blank'
title='siga me deliciuos'><img src='http://i.imgur.com/BG30jNi.png' alt='deliciuos'/></a>

<a href='http://linkedin.com/nome rede social' rel='nofollow' target='_blank'
title='siga me linkedin'><img src='http://i.imgur.com/ZIKUOrB.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/nome rede social' rel='nofollow' target='_blank'
title='assine feed'><img src='http://i.imgur.com/G1ZCOL7.pngx8yxTXY/s32/rss.png' alt='feed'/></a>
</div>
</b:if> 

NOTAS: height: 170px; altura da box geral...
               width: 550px; largura da box geral...
               width: 532px; largura da subscrição email geral...
               width: 380px; largura box branca de email...
              background: #f063c7; fundo do botão...
             ASSINE O FEED E REÇEBA AS NOVIDADES POR EMAIL  troque o texto pelo que quiser...
              seu feed coloque o nome de seu feed...
             nome rede social; coloque nome respetivo á sua rede social...

Foi este o post que trouxe ,alguma dúvida disponha,até mais ...

Box d/ feed c/ redes sociais

► 0

► box r sociais

► Cartita