add

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

emailEnviar por correo

1 comentarios:

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

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios