27 marzo 2012

Centrar gadget en Blogger

Normalmente cuando añadimos un gadget HTML/Javascript y colocamos en su interior un código, a veces nesecitamos centrarlo o alinearlo hacia un lado concreto ya que Blogger tanto textos como elementos los alinea hacia la izquierda.

Para alinear los códigos en gadget donde podemos modificar el Html vamos a encerrarlos en un contenedor (div) y usaremos la propiedad Css "align" para alinearlos hacia cualquier posición.

Centrar
sevillafc
<div align="center">
Código que se quiere centrar
</div>

A la izquierda
sevillafc
<div align="left">
Código que se quiere a la izquierda
</div>
A la derecha
sevillafc
<div align="right">
Código que se quiere a la derecha
</div>

Tan solo hay que añadir el código donde se indica para alinearlo a cualquier posición.

Pero que ocurre si los gadget que instalamos son los propios que Blogger trae por defecto y no podemos modificarlos al no tener acceso al código Html  y que normalmente  los instala a la izquierda,  llaménse: Estadísticas de Blog, imágenes, lista de Blog etc.....

Por ejemplo el gadget de Estadísticas, Blogger nos dá la opción de unos cuantos modelos donde elegir pero su alineamiento es siempre a la izquierda.

¿Cómo centrarlos entonces?

Si accedemos a cualquier plantilla  nos damos cuenta que Blogger identifica a todos los gadget con una identidad, siendo la de Estadísticas "Stats1".

Pués bien conociendo la ID de Estadísticas  Stats1 con un poco de CSS la podemos centrar, así que buscamos en nuestra plantilla (F3 O CTRL+F) el código ]]></b:skin> y justamente encima colocamos esto:
#Stats1 { text-align: center; }

Otro gadget que Blogger nos ofrece y es muy utilizado es el de imágenes y cuya ID es "Image1".
Blogger los identifica por numeración, osea si tienes 4 gadget de imágenes blogger los identifica como Image1, Image2, Image3, Image4 etc...

¿Como sé la ID de uno que quiero centrar?

Bién ello es fácil, como cada imágen lleva un nombre en el gadget, debemos acceder a la plantilla y ver cual es su ID. De ejemplo mi gadget se llama "SEVILLA FC"

Buscamos con (f3 o ctrl+f) el nombre del gadget, en mi caso SEVILLA FC y veremos una cosa así:
<b:widget id='Image1' locked='false' title='SEVILLA FC' type='Image'/>

Donde la id=???? del gadget es la que utilizaremos para centrar la imagen que en este caso sería Image1 y la centraríamos con este código siguiendo los mismos pasos que en el anterior, buscamos ]]></b:skin> y justamente encima colocamos esto:
#Image1 { text-align: center; }

Esta es la forma de buscar las ID de cualquier gadget que queramos centrar y añadiéndole
#nombreID { text-align: center; }

conseguimos centrar cualquier gadget.

!!!!!!!!!!! A DISFRUTARLO!!!!!!!!!!!!!




Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

25 comentarios

Me resultó muy útil, Antonio. Muchas gracias.

una pregunta como ago para colocar los codigos en las entradas

Debes codificar el código, en esta web por ejemplo:CODIFICAR CÓDIGO, pegas el código y pulsa "Parse", copias y pegas en blogger en(edición html), no en redactar.

Saludos.

Si está dentro de tus posibilidades, ando en busca de saber cómo delimitar los gadgets para que se vean solo en una parte del blog y no en todas.

Por ejemplo, el gadget de seguidores de facebook en el lateral del blog, me gustaría que solo apareciera en el home de mi blog, pero no en las entradas. Y hay otros gadgets que viceversa.

Sé que esto es posible con una simple línea de código, en el blog de querida y difunta Rosa del escaparate había algo similar, pero no lo encuentro.

¡Abrazos!

Para que solo aparezca en el Home, deberías colocar una condicional antes del Div.

El gadget de seguidores de facebook comienza con un div, pués debes colocar antes del Div, este código:
<b:if cond='data:blog.homepageUrl == data:blog.url'> y al final del todo, el cierre de la condicional: </b:if>.

Con esto hacemos que solo aparezca en el Home.

¡Gracias! ¿Y para que un gadget solo aparezca en las entradas y no en el home?

En lugar del anterior, colocas este:
<b:if cond='data:blog.pageType == &quot;item&quot;'> y su cierre
</b:if>

Me resultó muy útil esta información, gracias!

Gracias muy claro, había visto esta información en otros blogs, pero aquí me quedo muy claro.

Saludos y muchas gracias por esta entrada, llevaba buscando hace rato coo hacer eso. Gracias.

Hola de nuevo me gustaria saber si puedo darle una posicion exacta en la pantalla. Muchas gracias

Perfectamente, te pongo un ejemplo:

<div style="width:330px;position:absolute;right:316px;top:125px">
<img src="URL IMAGEN"/></div>

Debes ir jugando con los números según posición que desees

No me funciona, lo coloco en un rotador de banner, q no quiero q se vea en la portada pero sigue viendose :(.

Y aprovecho aqui mismo para preguntar algo q seguro es sencillito, pero yo nose nada de esto y estoy es apenas aprendiendo, desde ya 2 semanas ando buscando info en google y no encuentro ningun articulo que explique como centrar la imagen en las entradas de la portada, en la entrada esta centrada, pero en portada se ven a la izquierda, agradeceria su ayuda, ya q estoy estancada, en el blog solo buscando dia a dia como hacerlo y nada porfi. Y de verdad sugiero escriban sobre eso, no creo yo sea la unica con este problemilla jajaja

Si no me dejas la url de tu blog no puedo contestarte.

Hola que tal ? Puedes pegar un vistazo a mi código ? No me ha funcionado...Quería centrar estos gadgets.....
#FollowByEmail1 { text-align: center; }

#CustomSearch1 { text-align: center; }

http://www.barruntos.net/

Barruntos el buscador de blogger lo tienes bien configurado con #CustomSearch1 {text-align: center}, debería valer.
Los gadget de blogger dejan muy poca posibilidad de configuraciones.
Prueba esto en un gadget/Html:
<style>#search-box{
width: 240px;
margin: 8px 0px 0px 0px;
}</style>
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-amor" value="Buscar" type="submit"/></form>

Hola,no se si este sera el mejor sitio para preguntar por mis dudas bloggers..Llevo bastante con el blog y e hecho muchos cambios pero en uno de esos cambios no se que paso.. que algo habré tocado que no me permite hacer ya nuevos cambios en determinadas cosas..
Me gustaría centrar el leer mas de los post y ponerlo algo mas grande al igual que las sugerencias de antiguas entradas tenerlas centradas y la barra de debajo de la cabezera centrarla también..por mas que miro tutoriales y pongo los links que me dicen no ay cambio alguno..me podrías ayudar con eso?
Este es mi blog: http://rym27forever.blogspot.com.es/

Gracias anticipadas.

Rocío, vamos por parte, ---centrar menú----
de momento elimina todo esto en la plantilla desde: post h3 a {
color:#F5A9BC; /*Color del enlace*/ - See more at: http://www.adorabledesign.com.ar/2012/08/cambiar-color-de-los-titulos-y-ancho-de.html#sthash.87qiLCNh.dpuf

Una vez eliminado, coloca esto en su lugar: .post h3 a {color:#F5A9BC;}
-----aumentar tamaño de leer mas y colocar a la derecha-----
Ahora busca .jump-link a { y en font-size: 12px; coloca 20, aparte añade esto: float:right; margin-top:30px;

Ahora busca .jump-link a:hover { y en font-size: 16px; coloca 20

-------aumentar tamaño antiguas y nuevas entradas-------

Busca .blog-pager { y añade font-size: 22px;

Espero que con esto esté todo como pides.

Hola de nuevo!!!! mil gracias!!! ya lo tengo todo casi listo... en leer mas me gustaria centrarlo en vez de a la derecha,supuse que poniendo center en vez de right funcionaria.. pero que va no me funciono! como lo podria hacer? y la fuente se puede cambiar?
http://rym27forever.blogspot.com.es/
En la ultima pregunta creo que no me exprese bien..me referia a debajo de leer mas tengo una cosilla que pone quizas tambien le interese.. me gustaria lo que es todo eso con las 3 fotos que aparece poder centrarlo tambien..y si pudiera ser redondear las 3 imagenes,alguna vez lo tuve asi pero toqueteando lo quite..!!

Mil gracias por las cositas que ya me has ayudado,si no te importa cuando me soluciones estas dudas,estoy intentando comprar un dominio en 1&1 no se si lo hice bien o no.. por si entiendes o tienes algun post al respecto..mil gracias de nuevo!

Rocío vamos a ello, para centrar el leer más, primero elimina de .jump-link a { esto float:right; margin-top:30px; ahora encima de ese código coloca esto: .jump-link{text-align:center !important;margin-top:30px;font-family: arial !important; } con esto bastaría para quedar centrado.

Ahora para las entradas relacionadas busca esto: <script> var linkwithin............etc. y coloca justo antes esto: <div class='linkwithin_div'/> una vez realizado ese paso solo nos queda dar estilo a ese gadget y colocas en el css de la plantilla este código:
/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
padding: 0 10px;
margin-left:250px !important; /* centrar- aumenta o disminuye */
}
.linkwithin_text {
font-size:14px;
color:#F06ED6;
text-align:center !important;
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts {
width: 500px !important;
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #FAC5F0 !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 20px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8 {
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px;
border-radius: 20px;
border:0 !important;
}
.linkwithin_title {
color: #000000 !important;
font-family: Verdana !important;
font-size: 13px !important;
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #ffffff !important;
font-weight: bold !important;
}
Si observas el primer código lleva colocado /* centrar- aumenta o disminuye */ con ello lo colocas donde quieras, aumentando o disminuyendo.

Espero que con esto se te solucione todo.

Mil gracias de nuevo... jo lo siento si estoy siendo muy pesada...al centrar el leer mas volvio a ser pequeño y de color negro y no toque lo que puse anterior,como lo podria volver a poner del tamaño que me dijiste y en color?

Lo de las entradas relacionadas me quedo perfecto,me encanta..pero como podria centrar todo el gadget y poner las 3 fotos en el centro??

Por ultimo.... me gustaria centrar tambien y poner algo mas grande donde pone "10 comerntarios" serias eso posible??

Muchas gracias por toda tu ayuda!!!!

He conseguido solucionar el 1º punto!!! Solo me faltaria los otros 2..sigo toqueteando mientras me dices algo, si lo soluciono te digo,gracias!!

Hola, ¿sabrías como centrar la barra del menú desplegable? he creado un gadget de Html/Javascript para hacer un menú desplegable, no son las "páginas" que nos ofrece blogger (eso si se centrarlo) pero he leído al menos 20 hilos distintos, buscando en respuestas, he probado todo lo que proponían y nada, no hay manera de centrar esa barra :( quizás podrías ayudarme.
Este es mi blog: http://miriamvallephoto.blogspot.com/
Un saludo y muchas gracias de antemano.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"