Horizontal Subscribe Widget blogger kn


Hoje vamos compartilhar esse elegante widget por knigulper isso tem um perfeito layout e pode ser adicionado por exemplo dentro das postagens no rodapé para melhores resultados ou onde achar melhor para adicionar siga os passos.


Adicionando horizontal subscribe widget 

Faça login no Blogger então va no menu Tema >> Editar Html/JavaScript entáo com as teclas combinadas CTRL+F busque por </article> ou <data:post.body> então acima de uma das tags mencionadas  copie e cole o seguinte código   não esqueça de colocar seu usuario feedburner depois salve.

style type='text/css'>
.knigulper2_form-wrapper {background-color:#008000; background-image: url('https://3.bp.blogspot.com/-pxBjk-xyfJI/WRxdW7MupVI/AAAAAAAACV0/XSgZMEOsU0cZprfCXb25P8KLWDhu-R2KwCLcB/s1600/Hosted-at-knigulper.png'); background-repeat: no-repeat; border-top:1px solid #e4e4e4; border:1px solid #e4e4e4; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; height:304px; width:567px; margin:15px auto;margin-top:5px;margin-bottom:5px; }
form {padding-right: 25px; padding-top:72px; }
.knigulper2_form-wrapper .knigulper2_form {font-size:12px; }
.knigulper2_form-wrapper .knigulper2_lbl {display:block; }
.knigulper2_header {color: #008000; padding-left: 98px; }
.knigulper2_header h1{font-family: 'Oswald', sans-serif;font-weight: lighter; font-size: 2.3em; letter-spacing: .95px;padding-top: 12px;}
.knigulper2_header p{font-size: 1.4em; line-height: 23px; margin-top: -1px;color:#111111}
.input_boxes {text-align: center; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"] {background-color:#4f5e67; color: white; font-size: 15px; letter-spacing: .75px; height: 30px; vertical-align:middle; width:175px; border: none; padding-left: 10px; margin-bottom:16px; border-radius: 100px; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"]:focus {background-color:#28333a; border: 1px solid #8496a3; color: white; letter-spacing: .75px; border-radius: 100px; }
.knigulper2_element {text-align: center; border-radius: 100px; display: inline; padding-left: 5px; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"] {background-color:#4f5e67; color: white; font-size: 15px; letter-spacing: .75px; height: 30px; vertical-align:middle; width:175px; border: none; padding-left: 10px; margin-bottom:13px; border-radius: 100px; }
.knigulper2_form-wrapper .knigulper2_form input[type="text"]:focus {background-color:#28333a; border: 1px solid #8496a3; color: white; letter-spacing: .75px; border-radius: 100px; }
.knigulper2_form-wrapper .knigulper2_form #name {background-color: #89a9cd; }
.knigulper2_form-wrapper .knigulper2_form #email {background-color: #89a9cd; }
.knigulper2_submit {text-align: center; padding-top: 8px;}
.knigulpersub2_button {background-color:#10509d; border:.5px solid white; box-shadow:inset 0px 28px 0px -1px #3f71ad; color:white; cursor:pointer; display:inline-block; font-size:15px; letter-spacing: .5px; text-decoration:none; width: 166px; border-radius: 100px; height: 31px; }
.knigulpersub2_button:hover {-webkit-stroke-width: 5.3px; -webkit-fill-color: #89a9cd; -webkit-stroke-color: #89a9cd; text-shadow: 1px 0px 50px white; }
.knigulper2_button:active {position:relative; top:1px; }
.powered_by_knigulper2 p {color: #5a86b9; font-size: 11px; text-align: center; padding-top: 1px; }
.powered_by_knigulper2 a:link {color: #5a86b9; font-weight: bold; text-decoration: none; }
.powered_by_knigulper2 a:visited {color: #5a86b9; font-weight: bold; text-decoration: none; }
.powered_by_knigulper2 a:hover {color: #fcb414; font-weight: bold; text-decoration: none; }
.powered_by_knigulper2 a:active {color: #5a86b9; font-weight: bold; text-decoration: none; }
</style>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='knigulper2_form-wrapper'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='knigulper2_form' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=knigulper&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<div class='knigulper2_header'>
<h1>Subscribe To Our Newsletter</h1>
  <p>Get Our Latest Updates Straight To Your Inbox For <br/>Free! Unsubscribe Any Time Whenever You Want.</p>
  </div>
<div class='input_boxes'>
   <div class='knigulper2_element'>
<input class='knigulper2_textinput' id='name' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Name&apos;}' onfocus='javascript:if(this.value==&apos;Name&apos;) {this.value=&apos;&apos;;}' type='text' value='Name'/>
  </div>
<div class='knigulper2_element'>
<input class='knigulper2_textinput' id='email' name='from' onblur='javascript:if(this.value==&apos;&apos;) {this.value=&apos;Email Address&apos;}' onfocus='javascript:if(this.value==&apos;Email Address&apos;) {this.value=&apos;&apos;;}' type='text' value='Email Address'/>
  </div>
  <div class='knigulper2_submit'>
   <input class='knigulpersub2_button' name='Submit' type='submit' value='Yes! Subscribe Now'/>
  </div>
<div class='powered_by_knigulper2'>
          <p>Powered by <a href='#/' target='_blank'></a>
  </p></div></div>
 </form>
</div>  </b:if>






Click to comment