Widgets y Plugins para Blogger


Widgets para Blogger – Medios sociales y buscador integrado


En este nuevo artículo de Widgets para Blogger aprenderán a insertar un simple código con el cual les mostrara un nuevo estilo de iconos sociales y buscador integrado para ubicarlo en el sidebar nuestro blog de Blogger. La inserción del código es tan simple de realizarlo, solo tendrán que copiar un código e insertarlo en un widget HTML/Javascript y realizar unos cambios, con eso se mostrara los perfiles sociales más utilizados como, Facebook, Twitter, Google+ y nuestro RSS de Feed Burner con la cual los  nuevos usuarios que visitan nuestros blogs podrán seguirnos y así obtener mas trafico web en nuestro blog al momento de crear nuevas publicaciones.

Widgets para Blogger – Medios sociales y buscador integrado

Pueden ver su demostración a continuación




Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño


3 Abre un gadget “Añadir un gadget

Widgets para Blogger – Medios sociales y buscador integrado

4 Busca el widget que tiene como nombre “HTML/Javascript” Ábrelo


5 Inserta el siguiente código en su interior

<style type="text/css">
#flipboard_ayudadeblogger{ width:300px;}
ul.flipboard_ayudadeblogger{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_ayudadeblogger 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_ayudadeblogger 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_ayudadeblogger 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_ayudadeblogger li a img{
border-width: 0;
}
ul.flipboard_ayudadeblogger 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_ayudadeblogger li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#ayudadeblogger-searchbox {
    border-radius: 5px;
    background: URL(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#ayudadeblogger-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#ayudadeblogger-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#ayudadeblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}

</style>
<div id="flipboard_ayudadeblogger">
<center>
<a style="font-size:25px;" >Suscríbete </a>
</center>
<br />
<ul class="flipboard_ayudadeblogger">
<li><a href="http://www.facebook.com/ayudadeblogger"><img src="http://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Facebook" /></a></li>
<li><a href="https://plus.google.com/+ayudadeblogger"><img src="http://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/ayudadeblogger"><img src="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/foroayudadeblogger"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="RSS Feed" /></a></li>
</ul>
<div id="ayudadeblogger-searchbox">
<form action="/search" id="ayudadeblogger-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Buscar...&quot;;}" onfocus="if (this.value == &quot;Buscar...&quot;) {this.value = &quot;&quot;}" type="text" value="Buscar..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>

Realiza estos cambios:

He marcado de color azul en los lugares que ustedes tendrán que realizar sus diferentes cambios, cambia cada URL por las URls correspondientes de sus perfiles sociales

Eso es todo, da un clic en “Guardar” y ubica tu nuevo widget de iconos sociales y buscador integrado en el sidebar de tu blog de Blogger

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

Además, no te olvides de visitar más Widgets sociales para Blogger


¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos


Enviar por correo
  1. Hola! ¿Cómo puedo hacer para tener un botón que llame a la caja buscar?

    ResponderEliminar

Discusión: