sábado, 16 de janeiro de 2016

Subscribe Widget Box para blogger

subscribe-widget-blogger-2016


Hoje vamos compartilhar subscription box de arlina é um design elegante o que pode ser colocado abaixo dos post do blogger ou até mesmo no rodapé do blogger para aumentar o nível de assinantes de feed do seu blogger 


Para adcionar siga os passos abaixo.

Faça login no blogger 
em modelo então Editar/HTML 
com as teclas combinadas CTRL+F 
busque por ]]></b:skin> adicione o Css código a seguir acima disso 

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#ff675c;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#ea5a50;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

Salve o modelo 

Vá em layout e clique em adicionar novo gadget no sidebar ou o lugar que deseja que isso apareça 
procure por Javascript/HTML então adicione o código 

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=SEUID' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=SEUID&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='SEUID'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Não esqueça de modificar o ID de seu feedburner onde esta em amarelo realçado
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner