Blogueros Hispanos

Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug , la extensión para Firefox y en versión Lite, para Chrome. Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger sin mucha dificultad. Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y</b:skin>. Modificar el CSS de un elemento con Firebug. Para modificar cualquier característica de un elemento de una plantilla simplement...

Hola amigos de Comunidad Bloggers , hoy lo que os traigo es un menu un  menú vertical desplegable con efecto deslizante  con  subpestañas  por el que podremos agregar enlaces a cada sección del menú. Tiene dos variantes, puede desplegarse al hacer click, o puede desplegarse al pasar el cursor sobre él. Funciona al hacer click Funciona al pasar el cursor Para empezar insertaremos el script en la plantilla, accediendo a   Diseño | Edición de HTML  y antes de  </head>  agregamos lo siguiente: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ //------------------------------ // Developed by Roshan Bhattarai // Visit http://roshanbh.com.np for this script and more. // www.comunidadbloggers.com // --------------------------------- $(document).ready(function() { $("#firstpane p.menu_head").click(function() { $(this).css({ba...

Aunque  Facebook Slide Likebox  es una extensión de Joomla también podemos usarlo en Blogger. Se trata de un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el  fanbox de Facebook con un efecto deslizante . Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana. El gadget funciona con jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook. Lo primero es entrar en  Diseño | Edición de HTML  y antes de  &lt;/head&gt;  pega el script: &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; jQuery.noConflict(); jQuery(function (){ jQuery(".slide_likebox").hover(function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"me...

El  FanBox  o  LikeBox de Facebook  es esa cajita que muestra los avatares de las personas a las que les gusta determinada página de Facebook. Agregar el Fanbox en Blogger es bastante sencillo y no requiere quebrarse la cabeza con códigos. Primero entra a  Facebook Developers  . Ahí agrega la URL de tu página de Facebook, selecciona el ancho del gadget, color del tema, si deseas mostrar los avatares, la actividad reciente y la cabecera del gadget. Ya que lo tengas listo da click en  Get Code . Aparecerá un código para copiar; copia el código que está debajo de  iframe . Luego entra en  Diseño | Elementos de la página | Añadir gadget | HTML/Javascript  y ahí pega el código que copiaste. Con eso ya tienes el Fanbox en tu blog. Algunas veces la página de Facebook anda medio loca y en el código nos pondrá una altura de 62px con lo cual se verá sólo un rectángulo. Para arreglarlo sólo cambia el alto (height) del có...

Una de las "ventajas" que tiene  Wordpress  es que se puede agregar debajo de cada post una pequeña biografía sobre el autor para que los lectores puedan tener más información acerca de quién escribe el post, y muchos usuarios de  Blogger  desearían poder tenerlo también en el blog, así que vamos a ver cómo poner un ' acerca del autor ' debajo de cada entrada. En él puedes poner tu avatar, una breve información sobre ti e incluso puedes agregar enlaces sobre otros sitios webs que tengas o de tus redes sociales. Primero vamos a  Diseño | Edición de HTML  y marcamos la casilla  Expandir plantillas de artilugios  ahí buscamos este código y lo eliminamos: <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'> <data:post.author/> </span> </b:if> </span> Esa parte que hemos eliminado es la que muestra  Publicado por (nombre del autor...

Sé que ya muchos están usando el  botón Google+1 en el blog  para que los usuarios puedan recomendar las entradas que les parecen interesantes. Pero también podemos colocar el botón +1 (Plus One) para que se recomiende no la entrada sino la página principal del blog. Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el  botón Google +1 en una barra flotante  abajo de la página, de esta forma tus lectores podrán recomendar tu blog. Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un  mensaje al hacer click en el botón +1  haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente. Como sé que a muchos les puede parecer molesto tener siempre la...

Hoy les traigo un  plugin de JQuery  llamado  Lazy Load  que permite que las imágenes carguen después del sitio y cuando bajemos con el scroll, al momento de visualizar la imagen, ésta cargaría con un efecto opacidad. Este  plugin de JQuery  es muy útil para mejorar la optimización de nuestros  blogs  y por tanto nuestro  posicionamiento en Google . Pueden ver que en este  blog  utilizo ese  plugin de JQuery  y tiene un lindo estilo y es muy práctico. [1]  Vamos a  Diseño > Edición de HTML  y antes de  </head>  pegaremos el siguiente código: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/3301800/LazyLoad.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ jQuery(&quot;.post img&quot;).lazyload({ effect:&quot;fadeIn...

jQZoom  es un plugin de  jQuery  que nos permite  agregarle zoom a las imágenes  fácilmente. El sistema funciona como si estuviéramos utilizando una lupa, pues nosotros pasamos el cursor por ensima de una imágen y se nos despliega una ventana que nos muestra de forma más grande lo que estamos viendo. Pueden ver un ejemplo en mi  blog de pruebas . Como pueden ver, es muy útil para ver aquellos detalles de las imágenes muy grandes sin tener que ocupar tanto espacio en el  blog . A continuación les explico como colocarlo en sus  blogs : [1]  Lo primero que vamos a hacer es ir a  Diseño > Edición de HTML  y vamos a pegar antes de  ]]</b:skin>  lo siugiente: div.jqZoomTitle { z-index:5000; text-align:center; font-size:11px; font-family:Tahoma; height:16px; padding-top:2px; position:absolute; top: 0px; left: 0px; width: 100%; color: #FFF; background: #999; } .jqZoomPup { overflow:hidden; background-color...

Buscando  efectos CSS  para poder adaptarlos a  Blogger  encontre un efecto muy bueno solo utilizando  CSS , este efecto hace que las imágenes se hagan mas grandes al pasar el mouse sobre ellas. Para poder logra este efecto vamos a  Blogger , nos vamos a  Diseño > Edicion de HTML  y buscamos la etiqueta  ]]</b:skin> . Antes de esa etiqueta debemos pegar el siguiente código: .hovergallery img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .hovergallery img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity: 1; } Ahora para poder hacer que las imágenes tengan el  efecto de zoom  ponemos la sig...