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.
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1gZ6OQHBP04Voh0Fjkh6ZrVWF9fcVy21HZuCWKLDB-wL_QaUT-ZeS1WOrtzZGXhd7390c-pDc0GjuYGAT68e55HiqWq7Yw1V89kbBfCXViQyehMcaOoA5Kw26tDcwyqtnTlaOk0C5ZVH2/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittFzEoGC4pzzKTrMd7vyEm67QCI6O9RD-bzB-aLWRjheS7yUT5T4M8fJHMbKa1mDmZn2oWAjB4uWAJVvEvVuUA1EoH1vVOmOatSySJKzZC2Aat2MBnKuwMN4eIryeffdl3CNAngSNDkb-/s1600/btrix_facebook.png"
title="Facebook" /></a></li>
<li><a href="https://plus.google.com/+ayudadeblogger"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflW-aCvajfTxbEPuVbJpeWRf4lV0lHqTvEKYXPuDSVhwXCRbxIQrdJ6hOTMDBzWqoJw5ikMLJ4c_D_H6FhraVBPACoeVct4NkMyzP4SCfLZCdFq8ksz0WRR0SXUzhHC9-XjhmFYZ-zzNi/s1600/btrix_google+.png"
title="Google plus" /></a></li>
<li><a href="http://www.twitter/ayudadeblogger"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoKICfhqNq8JQCG96fAmPRT0EXeQGeYpSukL-wfC_LOiE5cR5VFF16byLC6Af7UbBBbr792k6BGlURh171pqS2XPXoHM0E0ioELmuolm5Z8Mb-EYv0LLui6Ij4rZYGTk59057jC7d7S29A/s1600/btrix_twitter.png"
title="Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/foroayudadeblogger"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPAmUb9JfZqzjwwwaxZE-21o6ZHT01LkiksaesM6-iJkAMsE4TZ8QAyRIkDA3oDAGdTR6t2_m010qZTH4MnXPesuMPMEGmKFmCTo0U5uavn4VW8PvbvxBlJRaqyhOCIV8-GGbvCjBevev/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 == "") {this.value = "Buscar...";}"
onfocus="if (this.value == "Buscar...") {this.value =
""}" 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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Hola! ¿Cómo puedo hacer para tener un botón que llame a la caja buscar?
ResponderEliminar