Como adicionar box de assinatura abaixo dos posts no blogger

box de assinatura
Olá e bem-vindo ao Mult-focos. Neste post temos um tutorial de como adicionar box de assinatura abaixo dos posts no blogger. O Box de assinatura ou subscrição ajuda a aumentar seus seguidores em redes sociais o que contribui para o aumento do tráfego de seu blog, o que torna uma ferramenta superimportante.

Demonstração

Como adicionar

  • Abra o seu Painel do Blogger e selecione o seu blog. Escolha modelo->clique em Editar HTML. 
  • Ache o seguinte código:<div class='post-footer-line post-footer-line-1'>
  • Abaixo dele copie e cole o código JS do box de códigos, obs: se houver dois códigos<div class='post-footer-line post-footer-line-1'> cole o código JS abaixo do segundo, você deve configurar o código antes de adiciona-lo.
Isto é tudo.

<style>
.wc-subboxv2{
float:left;
width:500px;
padding:10px;
border:1px solid #ccc;
color:#444444;
background-color:#fff; 
margin:25px auto;
font-family:Droid Sans;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}
ul.wc-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.wc-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.wc-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.wc-subboxbutton{
background:#f8f8f8;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.wc-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.wc-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.wc-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.wc-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.wc-subboxinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.wc-subboxbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.wc-subboxbutton{
padding:8px !important;
}
.wc-subboxemailform, .wc-subboxinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div class='wc-subboxv2'>
<div class='wc-subboxemail'>
<h4 style='text-align:center;'>Receba atualizações via email</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='wc-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AQUI SEU ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='AQUI SEU ID'/>
<input name='loc' type='hidden' value='pt_Br'/>
<input class='wc-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Digite seu e-mail...";}' onfocus='if (this.value == "Digite seu e-mail...") {this.value = ""}' type='text' value='Digite seu e-mail...'/>
 <input class='wc-subboxbutton' title='' type='submit' value='Subscrever'/>
</form>
</div>
<ul class='wc-subboxsoc'>
<li>
<a href='http://feeds.feedburner.com/mult-focos'><img src='https://lh3.googleusercontent.com/-xaJ0CVk6WGs/VGp13pn6atI/AAAAAAAAIdk/tMsJ3H9FDfU/s64-no/rss.png' title='Subscribe us'/></a>
</li><li>
<a href='http://twitter.com/multfocos'><img src='https://lh6.googleusercontent.com/-rwlD1lSh6vc/VGp2pToIpjI/AAAAAAAAId4/mZnLUyVV5Jg/s64-no/twitter.png' title='Follow us'/></a>
</li><li>
<a href='http://facebook.com/Multfocossuarevistadigital'><img src='https://lh6.googleusercontent.com/-UdGxZqUjPcU/VGp29Ne7g_I/AAAAAAAAIeM/15LyO8UDnZ4/s64-no/facebook.png' title='Like us'/></a>
</li><li>
<a href='https://plus.google.com/u/0/105144526522017770430/about'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYHrkQWA71u_6yiRqie8s-kBZf2-RLtpOt2ycDH-AqC1t1U7zTxxjgX0v9vC1krgw5mTrnk8guMCqLe_4jR7UF0ynlCP7Hag9KM0yjNjxw5uywygsBeHYBSQ5zcASAKfNq5JRkEOU-7nB/s64-no/google.png' title='Circle us'/></a>
</li>
</ul>
</div>
</b:if>

See the Pen LEYwWr by Mairink (@Oemes) on CodePen.



Postado por Mairink Oemes

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter