Pode ver o resultado final na imagem abaixo:
Implementação: A implementação deste widget é super simples. Para adicionares esta caixa de subscrição no teu blogger segue os seguintes passos listados abaixo:
- Entra no blogger
- Clica em modelo
- Clica em adicionar uma mini-aplicação
- Escolhe um HTML/JavaScript
- Cole o código abaixo:
</ol>
<div style=”text-align: justify;”>
<blockquote><span><span>
</span></span><style><!–
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://lh5.googleusercontent.com/-FIiElB5jJ3E/UJUoV7NgFUI/AAAAAAAAAx4/Oh27DfxWa0g/s454/Sharing%2520Touch%2520Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
–></style>
<div><!–RSS–><!–Google Plus–>
<!–Facebook–>
<!– Twitter –></div>
<style><!–
.tk-email{
background:url(https://lh4.googleusercontent.com/-cgxNZKF5kNg/UPJb3vrrdGI/AAAAAAAAAC4/cA6VRFl-Vn0/s48/email%2520%25283%2529.png) no-repeat 0px 5px ;
width:300px;
padding:0px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 1px 0;
color:#686B6C;
}
.tk-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.tk-emailsubmit:hover{
background:#3d87d0;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:150px;
color:#666;}
–></style>
<div>Subscribe via Email
<form id=”feedform” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘<span>http://feedburner.google.com/fb/a/mailverify?uri=XXXXXX</span>', ‘popupwindow', ‘scrollbars=yes,width=550,height=520');return true”>
<input type=”text” name=”email” value=”Enter email address here” onfocus=”if (this.value == "Enter email address here") {this.value = "";}” onblur=”if (this.value == "") {this.value = "Enter email address here";}” />
<input type=”hidden” name=”uri” value=”<span>FeedBurner</span>” /><input type=”hidden” name=”loc” value=”en_US” />
<input type=”submit” value=”Submit” /></form></div></blockquote>
</div>