Subscribe box widget sidebar new blogger

- 14:06:00
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


.


EmoticonEmoticon

 

Start typing and press Enter to search