En este Articulo te voy a explicar como implementar en tu pagina de blogger un widget con efecto de voltear los botones de social media con una ligera casilla para la busqueda.
Asi que este aparatito contiene dos funciones,los iconos de profile social y
un encasillado de busqueda.Te puedes enlazar con Facebook, Twitter, Google plus ,Pintrest y Rss
Feed.Para apreciar como este funciona dale una mirada a este aparatito.Ejemplo:Da Click en la imagen aqui para verlo en vivo.
Pasos para instalar este widget de redes sociales.
1.Entra en tu cuenta de blogger
2Ahora Selecciona Diseno.
3. Haga clic en Agregar un Gadget y seleccione "HTML / Javascript".
4. Pegue continuación el codigo de abajo dentro de HTML / Javascript.
<style type="text/css">
#flipboard_ciudad{ width:300px;}
ul.flipboard_ciudad{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_ciudad li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_ciudad li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_ciudad li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_ciudad li a img{
border-width: 0;
}
ul.flipboard_ciudad li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_ciudad li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#ciudad-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdr9rAC_utXddP7h6FItwycD08hil_aXYT-BjJQANni-qKrybQmJMR5pXhOCDJsoLdRLnl4BzRl2euoJe55F5TPP-1BwaFpM7cDpCZKgQk9_4uuP6pqPhyphenhyphenZvB80OqhfzlOmKNW2AuCmxeL/s1600/verde.png) no-repeat scroll center center transparent;
width: 290px;
height: 50px;
disaply: block;
}
form#ciudad-searchform {
display: block;
padding: 7px 16px;
margin: 0;
}
form#ciudad-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#ciudad-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<br />
<div id="flipboard_ciudad">
<center>
<a href="http://www.ciudadblogger.info/null" style="font-size: 25px;">Conectate Con Nosotros </a>
</center>
<br />
<ul class="flipboard_ciudad">
<li><a href="http://www.pinteresr/andante77"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSKS506GBaIKnIw6epMR9r2OtyHzl4Be0sYlJqzcPy4npeSMfe7LSFTgumvNNAgP8fNMJaw_4KhoOl9_MF2hqQhvcmFyr9NNLH-Q30isIc0lyzF_onE7jy9xd-hetjiGp5X_bYKv1eD5Y/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/trucosblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcITGnir1OdYnyytB14tKYdh6Du45ihM70lEXVtl1QddTh5uoSIGz_tMZXokmL8iQkgq4IdRNcrjsori2asqGjYytR8pgNevCG4f4GXG8W23kw1p5KIE6cvy07yGPFZopIySO0VfuqPnQK/s1600/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/ID de Usuario"><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi373SG3w5mebWdvLcUTUEP3PVSx9tYtx3hH-2X-eSBRiHrfiatLTSRFWKPZVwYi0UkHmt5kiYSgYT8IWgQ_uFWUVPl6X59aXJXQhIe7-o1LjWBLHelw460ViIKRteEreUg8Pgt-W_yUnf5/s1600/google.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/andante772"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLIF9YTMEvO5zuGon2qiIOVzCTV_okhBqHoq0jiBOXr_OEO7xnbm_Dc38Rv76nYJHF-TtUv-0pa6BCldoLRTK1rCL5vH3vcWOvCcAdBERPqm0aq-aPf99fifV2wTOqZKEO4Q_lnXp4bn7/s1600/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/ciudadblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImQHbiSe8JOf0s81LR8eHhZ77qqaONJHuMy7C8ckubX3FSUI78sUd6cvtylhcXx6iJa3rBkbHC2ai9z-R6zd4UV2YetKGxUwk-HLZjlIUYbMWoJp-iYnRmzJBaL_brVkWC3lYoL1EjThd/s1600/rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="ciudad-searchbox">
<form action="/search" id="ciudad-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>
Nota:Reemplace Andante772 con su perfil de Twitter
Reemplace Trucosblogger con su perfil de facebook
Reemplace Ciudadblogger con su feedburner perfil
Reemplace Andante77 con su nombre de usuario pinterest
Reemplace ID de usuario con tu ID de usuario Google Plus
5. Ahora guarda el HTML / Javascript.
Usted está terminado vaya a su pagina y chequeelo..
0 comentarios:
Publicar un comentario