quarta-feira, 16 de novembro de 2016

Subscribe box widget sidebar new blogger

sidebar-widget-subscription-blogger


Hoje vamos mostrar como adicionar essa caixa de subscriçao para Blogger na sidebar isso serve para aumentar os leitores do Blog bastante utilizado por feed se deseja adicionar no blog siga os passos abaixo:


Faça login no Blogger va no menu modelo >> Editar HTML 
com as teclas combinadas CTRL+F busque por ]]></b:skin> 

copie e cole o seguinte código:

body {
    background: #333;
    margin: 0 auto 0;
    color: #444;
    font-family: 'PT Sans', arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}
#subscribebox {background:#314d5b; padding:20px;font-family: 'PT Sans', sans-serif;
width:300px;}
.widget_follow_subscribe .widget-detail {
  padding: 36px 30px 40px 30px;}

#subscribebox p {
color: white;
    font-size: 15px;
    text-align: center;
    font-weight: 700;
}

.follow-subscribe-social {
 margin: 0 0 15px;
 padding: 0 0 14px;
 border-bottom: #858585 solid 1px;
}

.follow-subscribe-social ul {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}

.follow-subscribe-social ul li {
 display: inline;
 margin: 0 15px 0 0;    border-bottom: none;
}

.follow-subscribe-social ul li:last-child {
 margin: 0;
}

.follow-subscribe-social ul li a {
 font-size: 17px;
 color: #cacaca;

 -webkit-transition: color 0.2s ease-in-out;
 -moz-transition: color 0.2s ease-in-out;
 -ms-transition: color 0.2s ease-in-out;
 -o-transition: color 0.2s ease-in-out;
 transition: color 0.2s ease-in-out;
}

.follow-subscribe-social ul li a:hover {
 color: #fff;
}

form.subscribe {
 margin-top: -7px;
}

form.subscribe input {
 display: block;
 width: 100%;
}

.subscribe-email {
 height: 45px;
 border: none;
 margin: 0 0 10px;
 font-size: 0.928571em;
 background-color: #ffffff;
  text-align: center;
  color:efefef;
}

.subscribe-email:focus {
 outline: 0;
}

/* ===== Placeholder color ===== */
form.subscribe .placeholder { /* Internet Explorer 9 */
 color: #cacaca;
}

form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #cacaca;
}

form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
    color: #cacaca;
}

form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fafafa;
}

form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fafafa;
}

.subscribe-button {
 height: 45px;
 font-weight: 700;
font-size:16px;
 color: #fff;
 text-transform: uppercase;
 border: none;
 background-color:#ea5217;

 -webkit-transition: background-color 0.2s ease-in-out;
 -moz-transition: background-color 0.2s ease-in-out;
 -ms-transition: background-color 0.2s ease-in-out;
 -o-transition: background-color 0.2s ease-in-out;
 transition: background-color 0.2s ease-in-out;
}

.subscribe-button:hover {
 background-color: #f4b458;
}

.subscribe-button:focus {
 outline: 0;
}

.creadit a {background:#F35D5C;color:white;margin-top:30px;padding:20px;font-size:15px;}


Salve o modelo então clique em adiconar novo gadget selecione JavaScript então copie e cole o seguinte código:
<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<img border="0" alt="Subcribe" src="http://dateinacrate.com/wp-content/uploads/2015/06/icon-subscribe.png" width="100" height="100">
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=xxfeed' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=xxfeed, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
<p style="font-size:60%;">We will not share your information with anyone</p>
</div>
</center>
<br/><br/><br/>
<div class="creadit">
<a href="http://www.mybloggerseo.com" target="_blank"> Get This Widget</a></div>


Salve e pronto


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