Box Para Inscrição Feed - Exclusivo - DicasHot | Ver TV Ao Vivo e Entretenimento Masculino Grátis

Nesta postagem compartilho com vocês está box simples para inscrição em feed.

A box é bem simples mas tem o fundo cinza o que torna bem chamativa. Para coloca-la no blogger... Faça os passos abaixo.

Primeiramente vamos aplicar o estilo CSS. Para fazer isso... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css

/* Box Para Inscrição Feed By DicasHot
----------------------------------------------- */
.form-rside{-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none; background: none repeat scroll 0 0 #EEEEEE; border-color: #CCCCCC #CCCCCC #BBBBBB; border-radius: 10px 10px 0 0; border-style: solid; border-width: 1px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
float:right; margin: 10px 5px 10px 5px; padding: 6px 5px 0px 0px; height: 172px; position: relative; box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.8); width: 284px;}
.form-icon{background: url(http://1.bp.blogspot.com/-2v6lhLg3HHw/UPK6eKJexRI/AAAAAAAAAAc/3qcjBksC5Ko/s1600/bgd.png) 0 0 no-repeat; float: right; height: 64px; width: 84px; margin: 0px; }
.form-subscibe{-moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: -moz-use-text-color -moz-use-text-color #CCCCCC; border-radius: 5px 5px 5px 5px; border-width: 0 0 1px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset; float: left; height: 20px; padding: 4px; width: 165px; margin: 12px 8px 0 2px;}
.form-go{background: none repeat scroll 0 0 #3a3a3a; border: 1px solid #689328; border-radius: 5px 5px 5px 5px; box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset; color: #FFFFFF; cursor: pointer; float: right; margin: 12px 4px 0px 0px; padding: 5px; width:80px;}
.liker-form{padding-top:20px; font-size:21px; font-weight: bold; margin-left:6px; text-align:center; }
.liker-form a{ color:#333333; }
.likeform img:hover{opacity:0.8}
.BlogArchive ul li a, .Label ul li a{padding-left:8px;}
.PopularPosts img {width:74px;height:64px;float:left; padding:0px;border:1px solid #d5d5d5; margin:0 5px 5px 0px;}

Tendo colado, pode salvar e fechar está parte de edição.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<div class='form-rside'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=DicasHot&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px; padding-left: 15px;' target='popupwindow'>
<div class='form-icon' style='background: url (http://1.bp.blogspot.com/-2v6lhLg3HHw/UPK6eKJexRI/AAAAAAAAAAc/3qcjBksC5Ko/s1600/bgd.png);'>
</div>
<span style='font-size:32px;font-weight: bold;line-height: 35px;'>Inscreva-se</span><br/>
<span style='font-family: Times,Times New Roman; font-size:14px;line-height: 19px;'>Inscreva-se para receber atualizações via e-mail grátis</span>
<p><input class='form-subscibe' name='email' placeholder='Enter your email address' style='width:160px' type='text'/>
<input name='uri' type='hidden' value='DicasHot'/><input name='loc' type='hidden' value='en_US'/>
<input class='form-go' type='submit' value='Subscribe'/></p></form>
<div style='clear: both;'></div>
<div class='liker-form'>
<a href='URL FEED' title='Inscreva-se'><img src='http://1.bp.blogspot.com/-2IANA3wWhs4/UPLJT7EsBEI/AAAAAAAAAA8/hBci5RsKdMw/s1600/rs-nab.png' title=''/>RSS</a>
<a href='YOUR-FACEBOOK-URL' rel='Seguir' target='_blank'><img src='http://3.bp.blogspot.com/-NVmSWf-Qp3s/UPLJSNfMGHI/AAAAAAAAAAs/r6eJKG2s46s/s1600/fb-nab.png' title=''/>Curtir</a>
<a href='YOUR-TWITTER-URL' rel='Seguir' target='_blank'><img src='http://4.bp.blogspot.com/-VJGT_06Nh9Y/UPLJTP-1S9I/AAAAAAAAAA0/i2vFj32CsPY/s1600/tw-nab.png' title=''/>Seguir</a>
</div></div>