quinta-feira, 5 de novembro de 2015

Widget Sign up Sidebar Blogger

sign-up-widget-blogger


Hoje vamos mostrar um sign up para blogger eficiente e com layout bonito para colocar ao lado na sidebar do blogger então veja os códigos abaixo para adicionar no seu blogger


Faça login no blogger então no menu modelo >> editar/HTML 
procure por ]]><b:skin> então logo acima disso copie o código e cole antes disso 

  #vn-emailsubsocial {background:#34495e;
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #vn-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: #fff;
text-align: center;
background:#22313F;
     }
   #vn-emailsubsocial p {background:#34495e;
    font-family: open sans;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #vn-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #vn-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #vn-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #vn-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #vn-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }

Salve antes de sair 

Então na guia layout vá em adicionar gadget procure por html/javascript  e copie o código abaixo para colar 

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='vn-emailsubsocial'>
              <div class='heading'>
               Sign Up Here
              </div>
              <div style="text-align:center">
                <p>Isikan dengan pesan yang ingin anda sampaikan disini...!!!!</p> </div>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seuidfeedburner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="BloggerYard" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Sign Up Now!" class="button" type="submit" />

              </form>
             </div>

             </div> 

  
Não esqueça de colocar id do seu feedburner 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