17 junio 2015

Crear Secciones en las Plantillas para Agregar Widgets

Ayer o antier (nótese que feliz vivo) vi que Blogger hizo unos cambios en la sección de "Diseño". Ahora cada sección aparece delimitada y se muestra con el nombre del Id con el que fue nombrada. Así que vamos a aprovechar esta novedad para hablar sobre este tema, ¿te apuntas?.

Todas las plantillas de Blogger fueron creadas a partir de secciones, con el fin de facilitarnos a los usuarios incluir widgets fácilmente usando la funcionalidad: "Añadir un gadget" que encontramos en Diseño y con la que probablemente ya estarás muy familiarizado si utilizas el servicio.

Los widgets son esos elementos que seguramente ya has agregado al blog, como por ejemplo: la lista de páginas o una lista de enlaces. Aunque, algunos ya vienen incluidos por defecto al crear el blog, como lo son el widget de la cabecera o el de las entradas del blog.

En la siguiente imagen puedes ver cómo se ve la sección que incluye el widget de las entradas (Blog1), y que fue nombrada como: "main".

Seccion de la pagina principal del blog en Diseño


Es posible crear secciones para agregar widgets desde la sección de Diseño. Para lograrlo, es necesario utilizar código propio de Blogger así como hacemos con el código condicional para incluir o excluir elementos en la plantilla.

Para crear una sección hay que usar una etiqueta llamada: <b:section> y ésta debe llevar una etiqueta de cierre: </b:section>.

Dicha etiqueta: <b:section> es devuelta por Blogger al navegador como una etiqueta: <div>; en otras palabras Blogger convierte su etiqueta <b:section> en un <div> que en HTML es una etiqueta que permite dividir/delimitar el contenido de la página en secciones.

El código de las secciones puede incluir ciertos atributos. Solo uno de ellos es obligatorio, mientras que el resto se pueden agregar de forma opcional si se necesitara.

Puedes ver la lista completa de atributos desde la página de Blogger.

El único atributo obligatorio de una sección es:
-"id", y su valor debe ser un nombre único, es decir, no puede repetirse al igual que ocurre con el id de un div en HTML. Puede ser un nombre que incluya letras y números, por ejemplo, puede nombrarse: "seccion_menu" o "columna1".

Ya sabiendo que la sección debe incluir solo el atributo "id" de forma obligatoria, podemos crear una sección en su forma más simple y el código de ésta se vería más o menos así:
<b:section id='seccion1'></b:section>
O simplemente lo pondríamos así:
<b:section id='seccion1'/>
Ya que en un principio la sección no tendrá ningún widget, es decir, la etiqueta no encierra o envuelve ningún código de un widget.

Una vez agregado el código de la sección en el código fuente de la plantilla, se estará habilitando la funcionalidad de añadir widgets y se podrán agregar desde la sección de Diseño.


seecion que muestra el enlace añadir un gadget

Para definir la apariencia de la sección creada, usamos su id al crear la regla de CSS, del mismo modo que se hace con un <div> en HTML; por ejemplo:
#seccion1 {
width: 100%;
position: relative;
...
}

Es decir, ponemos la almohadilla: "#" antes del nombre que es "seccion1" que es el valor del atributo: id de la etiqueta: <b:section>.

También podemos definir reglas de CSS para definir la apariencia de la sección si usamos el nombre/valor del atributo "class" (que es opcional), si por ejemplo queremos usar la misma regla para varias secciones.

Código de los widgets de Blogger

Cuando creamos una sección y agregamos un widget usando el enlace: "Añadir un gadget", aparecerá el código del widget dentro de la sección.

Los widgets utilizan una etiqueta denominada: <b:widget>. Puede incluir atributos y solo dos de ellos son obligatorios.

Los atributos obligatorios de la etiqueta: <b:widget> son:
  • id: que permite identificar el widget. Puede ser un nombre que incluya letras y números y son exclusivos, es decir no se puede repetir.
  • type. Cuyo posible valor incluye el nombre del widget que ha definido Blogger y estos son los más comunes que se agregan al blog u otros ya vienen por defecto:
    • BlogArchive (el widget del Archivo)
    • Blog (corresponde a las entradas del blog)
    • Header (el widget de la cabecera)
    • PageList (lista de páginas)
    • HTML (para agregar código HTML o JavaScript)
    • Image (para agregar una imagen)
    • LinkList ( lista de enlaces)
    • List (una lista con viñetas)
    • BlogProfile (perfil del autor)
    • Navbar (la barra superior de Blogger)
    • Gadget (los widgets de terceros, es decir, que no son de Blogger)

Todos los tipos de widgets de Blogger están acompañados de un número, empezando por el 1, Por ejemplo: "Blog1" que es el widget de las entradas.

Algunos widgets solo se puede agregar solo una vez, como el widget de lista de páginas, mientras que otros se pueden agregar de forma indefinida y Blogger los va numerando sucesivamente al irse agregando.

El código de un widget puede incluir código HTML además del código de Blogger. Por lo general incluye también código condicional, para mostrar contenido según la configuración de widget. Por ejemplo, se muestra el título si se ha agregado, o se muestra una versión distinta según el tipo de dispositivo con el que es visto el blog, como por ejemplo sucede con el widget de lista de páginas: éste tiene una estructura definida para la plantilla móvil y solo es devuelta por Blogger cuando un usuario visita el sitio usando un dispositivo móvil.

Resumen y Conclusiones

  • Las secciones de Blogger se crean con el propósito de habilitar la funcionalidad de agregar widgets al blog desde la sección de "Diseño" anteriormente llamada: "Elementos de la página".
  • El código de las secciones solo sirve para incluir dentro código de widgets.
  • Para crear secciones es necesario utilizar la etiqueta <b:section>.
  • Una sección que utiliza la etiqueta <b:section> es devuelta por Blogger como un <div>.
  • El código de los widgets llevan la etiqueta <b:widget>.
  • Tanto la etiqueta <b:section> como la etiqueta <b:widget> pueden llevar atributos.
  • El único atributo obligatorio de la etiqueta <b:section> es "id", mientras que los atributos obligatorios de la etiqueta <b:widget> son "id" y "type".
  • Los widgets son elementos que agregamos al blog desde la sección de "Diseño", usando el enlace que dice: "Añadir un gadget".
  • Los widgets pueden incluir código HTML además del código de Blogger (sus propias etiquetas y elementos).

Saber crear secciones resulta muy útil para cualquier diseñador que cree plantillas para otros, ya que ofrece a los usuarios la posibilidad de gestionar el contenido de los mismos fácilmente, sin tener que ingresar al código de la plantilla.

También es útil para cualquier webmaster que personalice su blog y desee sacar provecho de esta funcionalidad.

¿Listo (a) para crear secciones?

Referencia/Fuente:
Etiquetas de elementos de la página para los diseños:https://support.google.com/blogger/answer/46888?hl=es#
Seguir leyendo
16 junio 2015

¿Tienes Problemas para Poner el Botón: Me gusta? He aquí cómo Agregarlo


Ya son dos personas las que me han comentado que tienen problemas para poner el botón de Facebook  para que se comparta el blog. Cosa que también sucedió con su nuevo complemento para páginas.

La razón por la que se está teniendo problemas para agregar todos estos complementos o plugins (en inglés), se debe a que se está agregando el script que se ofrece en la página de Facebook, sin envolverlo o encerrarlo en una sección llamada: CDATA. Por ello el script no se acepta y da un error el editor.

Tengo una entrada de junio del 2011 en donde detalladamente explicaba cómo poner el botón (uuuh, ya llovió y nevó desde aquel entonces) usando su vieja y ya retirada versión: "iframe" y explicaba cómo ponerlo en la versión web.

Pues para usar su botoncito como se debe, y para evitar problemas de que funcione o no, en esta entrada voy a explicar cómo ponerlo tanto en la versión web como la versión móvil de Blogger y servirá para que se comparta el blog. Además te facilitaré el código actualizado. Ya verás que fácil es ;)

Cómo poner el bóton

Simplemente copia todo el código del estilo del botón que te guste, edita los valores que se indican si es necesario, y ponlo en un gadget: "HTML/Javascript" en la columna lateral del blog, o el pie de la página desde "Diseño".

Gadget de Blogger HTML Javascript

El código es el mismo que ofrecen en la página de Facebook que facilita el botón.

Elegir el estilo del botón

1. Estilo Standar (con las fotos de los amigos/fans)



Ancho mínimo: 225 píxeles.
Ancho por defecto (si no lo especificas en el código): 450 píxeles.
Altura: 35 píxeles (sin fotos) o 80 píxeles (con fotos). 


Código:
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="URL_DEL_BLOG" data-layout="standard" data-action="like" data-width="320" data-show-faces="true" data-share="false"></div>



2. Box_count



Ancho mínimo: 55 píxeles.
Ancho por defecto (si no lo agregas en el código) 55 píxeles.
Altura: 65 píxeles.


Código:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="URL_DEL_BLOG" data-layout="box_count" data-action="like" data-share="false" data-width="55"></div>


3. Button_count 



Ancho mínimo: 90 píxeles.
Ancho por defecto (si no lo agregas en el código) 90 píxeles.
Altura: 20 píxeles.

Código:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://www.compartidisimo.com" data-width="320" data-layout="button_count" data-action="like" data-share="false"></div>


4. Button



Ancho mínimo: 47 píxeles.
Ancho por defecto (si no agregas en el código): 47 píxeles.
Altura: 20 píxeles.

Código:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="URL_DEL_BLOG" data-layout="button" data-action="like" data-share="false"></div>

Cómo editar los valores de los atributos

He resaltado de color naranja, los valores de los atributos que pueden editarse en cada botón. En el caso del ancho, como ejemplo he puesto 320 que es el mínimo ancho para el botón Standard. Verifica el ancho mínimo y otros detalles que puse en el recuadro al principio de cada botón.

En:
  • data-action="like". Puedes editar el texto del botón. Cambia: like  por:
    recommend  si quieres que el botón diga: Recomendar.
  • data-href="URL_DEL_BLOG".Cambia el texto: URL_DEL_BLOG, por la dirección web de la página de inicio del blog.
  • data-width="320". Es ancho que tendrá el botón. Es en píxeles y solo lleva valor numérico.
  • data-show-faces="true". Indica si se mostrará la foto del perfil de quienes hicieron: me gusta a tu blog. Cambia true por false si no quieres que se muestren las fotos. Se aplica solo para el botón Standar.
  • data-share="false". Cambia false por true si quieres que aparezca el botón de compartir a un lado del botón: me gusta.

Poner el botón sobre fondo Obscuro

Si se usara el botón con estilo standar, y si se va a poner en un fondo obscuro, se agrega el atributo: data-colorsheme, con el valor dark, de ese modo el texto aparece color blanco.
<div class="fb-like" data-action="like" data-colorsheme="dark" data-href="URL_DEL_BLOG" data-layout="standard" data-share="false" data-width="320"></div>

Cómo Hacer que aparezca el botón en la versión móvil

Si utilizas la versión móvil de Blogger y quieres que aparezca, tienes que tener seleccionada la opción que dice "Personalizado" al seleccionar la plantilla móvil, de otro modo no funcionará. Si ya la tienes seleccionada, solo sigue estos pasos:

  1. Copia el texto que pusiste en el título en el gadget.
  2. Ve al editor del código de la plantilla: "Editar HTML" y luego haz click dentro de éste, cuidando no mover nada, y pulsa las techas Ctrl + F simultáneamente para que se active el buscador.
  3. Una vez activado, coloca el texto del título del gadget en el campo y pulsa enter.
  4. El editor te enviará a la primera linea de código del gadget donde has colocado el botón. Agrega el atributo mobile con el valor yes, tal y como se muestra a continuación:
  5. <b:widget id='HTML2' locked='false' title='Título que pusiste' type='HTML' mobile='yes'>
El valor del id del gadget: 'HTML2', es solo un ejemplo. Puede aparecer cualquier otro número a un lado de HTML, por ejemplo HTML4 dependiendo de cuántos gadgets "HTML/JavaScript" hayas agregado antes.

No está de más decirlo: si utilizas una plantilla con un diseño adaptable (responsive en inglés), no tendrás que habilitar el gadget, ya que el botón aparecerá en el lugar donde lo pusiste de acuerdo a cómo se muestre la sección que lo contenga en dispositivos pequeños.

Notas Finales:
  • Si utilizas también el complemento: "Page Plugin" no necesitas poner el primer código que incluye el script y que resalte de azulito, otra vez ya que es el mismo. Solo pon el que está debajo y que empieza con: <div class="fb-like"...>.Pero hay que asegurarse de que también se cargue en la versión móvil de Blogger si se usara, habilitando el gadget para que se muestre el contenido (pensando en que el código se agregó en el gadget).
  • Es posible agregar el botón que dice: "compartir" a un lado del botón: "Me gusta", si cambias el valor del atributo: data-share poniendo el valor true.

Seguir leyendo
04 junio 2015

Cómo Personalizar los Botones de AddThis

¿Quieres personalizar los botones de AddThis? Hoy veremos cómo cambiar la apariencia de los botones que figuran en la herramienta llamada en inglés: "Sharing Buttons" y que utilizaba en la guía/tutorial donde explicaba paso a paso cómo ponerlos tanto en la versión web como la versión móvil.

Voy a considerar los botones de las principales redes sociales que mostraba: Facebook, Pinterest, Twitter, Google+ y su propio botón "+". Si necesitas otros me dices y con gusto los agrego ;)

La ventaja que ofrecen esos botones es que no utilizan imágenes (propiamente en formato de imagen) y el color de fondo es creado con CSS, por lo tanto, podemos personalizarlos fácilmente usando CSS.

El CSS que necesites agregar, lo vas a poner antes de: </style> del CSS que facilitaba en el paso 1 de la parte 3, donde explico cómo poner los botones.

Ahora veamos cómo hacerlo ;)

Crear botones circulares o redondos 


En el CSS que facilitaba en el paso 1 de la tercera parte de la guía que refiero al principio, localiza esta linea: 
.at-share-tbx-element .at-share-btn{margin-right:12px!important;} 
En esa regla, ponemos estas propiedades y valores, que servirán para que los botones se pongan redondos:

-moz-border-radius:32px;
-webkit-border-radius:32px;
 border-radius:32px;

Entonces quedaría así. Cópiala y sustitúyela:
.at-share-tbx-element .at-share-btn {margin-right:12px!important;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px}
Compatibilidad con navegadores: Funciona en todos los navegadores modernos incluyendo IE9. Para versiones antiguas de Firefox: 4.0 (2.0), 1.0 (1.7 o anterior) usamos el prefijo -moz. Para versiones antiguas de Safari 5.0, 3.0, usamos el prefijo -webkit, lo mismo para Android 2.1. Dichos prefijos no son un estándar (no valida el CSS) pero garantizan la compatibilidad con navegadores antiguos.


Cambiar el color de Fondo de los botones


A continuación la regla de CSS que define el color de cada botón para que puedas identificarlo. Tendrás que sustituir el código de color que he resaltado de azul (#3f3f3f), por el color que necesites.

Para el botón de Twitter
a.at-svc-twitter {background:#3f3f3f !important}

Para el botón de Google
a.at-svc-google_plusone_share {background:#3f3f3f !important}

Para el botón de Facebook
a.at-svc-facebook {background:#3f3f3f !important}

Para el botón de Pinterest
a.at-svc-pinterest_share {background:#3f3f3f !important}

Para el botón de AddThis
a.at-svc-compact {background:#3f3f3f !important}

Si vas a usar el mismo color para todos los botones, "lo mejor es agrupar las reglas de CSS", de tal modo que no las repitamos, pues todos los botones usarán la misma propiedad y valor.

Entonces, para los 5 botones agregaríamos/usaríamos esta única regla de CSS:
a.at-svc-twitter, a.at-svc-google_plusone_share, a.at-svc-facebook, a.at-svc-pinterest_share, a.at-svc-compact {background:#3f3f3f !important}
Y editas el código del color que he puesto como:#3f3f3f.

Si por ejemplo no usaras el botón de Addthis, quitarías esta parte:

 , a.at-svc-compact   (ojo que incluye una coma antes y también hay que eliminarla).


Cambiar el color del botón al poner el cursor encima

Por ejemplo, si hemos personalizdo el color del botón que aparecerá por defecto, y al poner el cursor encima de éste queremos que se ponga del color propio que usa la respectiva red social, simplemente agregamos :hover al final del selector como se aprecia a continuación y usamos la propiedad background para poner el color deseado y agregamos !important para que se aplique:

Para el botón de Twitter
a.at-svc-twitter:hover{background:#2ca8d2 !important}

Para el botón de Google
a.at-svc-google_plusone_share:hover{background:#ce4d39 !important}

Para el botón de Facebook
a.at-svc-facebook:hover{background:#305891 !important}

Para el botón de Pinterest
a.at-svc-pinterest_share:hover{background:#c82828 !important}

Para el botón deAddThis
a.at-svc-compact:hover{background:#f8694d !important}

Nota: En el CSS que facilité en la guía/tutorial donde explicaba cómo ponerlos, puse una regla de CSS que hace que se cree opacidad (que se ponga un poco transparente) en el botón, al poner el cursor encima. Si no lo quieres porque prefieres que cambien de color, elíminala. Es esta:

a.at-share-btn:hover{opacity:0.8}

Siéntete libre de comentar cualquier sugerencia, duda o comentario ;)
Seguir leyendo