segunda-feira, 12 de dezembro de 2016

Elegant follow by email widget blogger

Tags

stylish widget follow by email widget blogger

Hoje vamos apresentar esse widget follow by email by Contoh isso é elegante e tem um bom layout  vai ficar perfeito em qualquer parte do blog melhor ainda se isso for na sidebar do Blogger coluna do lado direito para adicionar o widget no Blogger siga os passos abaixo.


Para adicionar o widget follow by e-mail no blogger siga os passos

Faça login no blogger então va no menu layout adicionar novo gadget procure por follow by email adicione isso agora va em modelo editar HTML 
com as teclas combinadas CTRL+F busque por ]]></b:skin> e logo acima disso copie e cole o código CSS.

/* Follow by Email */
.FollowByEmail .follow-by-email-inner {
position: relative;
}
.follow-by-email-inner {
background: none repeat scroll 0 0 #222;
padding: 15px;
}
.follow-by-email-inner:before {
color: #c9c9c9;
content: "Get Our Latest Articles Delivered to Your Email Inbox. It's Free!";
font-family:sans-serif,arial;
font-size: 12px;
font-weight: normal;
padding: 0px 0px 0px 2px;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{
border: 1px solid #f0f0f0;
font-size: 13px;
height: 28px;
padding-left: 8px;
width: 100%
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
background: #f24024;
border: 0 none;
color: #FFF;
cursor: pointer;
font-size: 11px;
height: 28px;
margin: 0 3px;
width: 80px;
z-index: 0;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {
background: #f24024;
border:none !important;
box-shadow:none !important;
border-radius:none !important;
filter: alpha(opacity=60);
opacity: 0.9;
cursor:pointer
}

Salve o modelo e pronto.


contact form new widget form


Para adicionar Formulario de contato siga os passos:

Vá em layout adicionar novo gadget procure por formulario de contato então va no menu modelo editar HTML com as teclas combinadas CTRL+F busque por ]]></b:skin>  e cole o código CSS acima disso:


* Contact Form */
.contact-form-widget{
margin-top:20px;
font-family:arial,serif;
font-weight: normal;
font-size: 12px;
color:#c9c9c9;
}
.contact-form-button{
width:95%;
margin-top:10px;
border:none !important;
font-weight: normal;
font-size: 12px;
font-family:arial,sans-serif,
height: 2em;
text-transform: uppercase;
color:#c9c9c9;
}
.contact-form-name,.contact-form-email,.contact-form-email-message{
max-width:95%;
margin-bottom:5px;
color:#333;
}
.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{
box-shadow:none
}
input:focus,.contact-form-email-message{
box-shadow:none
}
.contact-form-email-message{
border:none !important;
border-top:0px;
border:0px
}
.contact-form-email, .contact-form-name{
border:none;
background:#fff;
border:none !important;
padding:5px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message{
background:#fff;
padding:5px;
}
.contact-form-button-submit{
background:#1874ff;
border:none !important;
box-shadow:none !important;
border-radius:none !important;
cursor:pointer
}
.contact-form-button-submit:hover {
background:#c00;
border:none !important;
box-shadow:none !important;
border-radius:none !important;
filter: alpha(opacity=60);
opacity: 0.9;
cursor:pointer
}

Salve o template.e pronto.


Blogger
Disqus
Escolha o Sistem de Comentario

Nenhum comentário