Vagabundia: : “Si perdieron los botones de compartir de Blogger ...” y 1 más artículos

Si perdieron los botones de compartir de Blogger ...

Posted: 28 Feb 2011 07:00 PM PST

La gente de Blogger es distraida, a veces pierde alguna cosa y nadie la encuentra por varios dias o desaparece para siempre aunque tal vez la tienen frente a las narices. En un tiempo perdieron el lapicito de edición, ahora, parece que en algunos casos se han perdido los botones para compartir.

Como lo que dice Victor no es la primera vez que lo escucho sino la tercera ... esta entrada es para ver si esta solución permite resolver el problema.

Sí esos botones no se ven y no ha habido cambio alguno en la plantilla, en principio, bastaría con agregar esto antes de </b:skin> para que volvieran a aparecer:

.share-button {display: inline-block;}

Eso sí, que nadie pregunte el motivo de la desaparición porque lo desconozco ya que en las plantillas que he visto todo parece normal así que, es uno de esos misterios que hacen que nuestra estadía en Blogger sea tan entretenida.

Breadcrumbs: Triángulos con CSS

Posted: 27 Feb 2011 08:37 PM PST

Esta es una de estas cosas que por ahora no funcionará en Internet Explorer pero no importa, igual vale la pena verlo.

Se trata de hacer un breadcrumbs, es decir, mostrar la ruta de la página web donde nos encontramos:

Inicio > Año > Mes > Título de la entrada
Inicio > Etiqueta > Título de la entrada

La idea de css-tricks.com es hacer eso agregándole alguna característica gráfica especial, sin imágenes y utilizando sólo CSS para crear los triángulos.

El HTML es una simple lista con una clase y en cada item, un enlace:

<ul class="breadcrumb">   <li><a href="#">Inicio</a></li>   <li><a href="#">Categoría</a></li>   <li><a href="#">Blogger</a></li>   <li><a href="#">El título de esta entrada</a></li> </ul>

El resto es el estilo:

<style> .breadcrumb { /* el rectángulo con la lista */   list-style: none;   margin: 0;   overflow: hidden; } .breadcrumb li { /* cada item de la lista */   float: left; } .breadcrumb li a { /* cada item es un enlace */   color: #FFF;   display: block;   float: left;   font-family: Helvetica;   font-size: 18px;   text-decoration: none;   padding: 10px 0 10px 50px;   position: relative;    /* el color de fondo del item que está a la izquierda */   background-color: #A0A9B1; } .breadcrumb li a:after {   content: " ";    display: block;    left: 100%;   height: 0;   margin-top: -50px;    position: absolute;   top: 50%;   width: 0;    z-index: 2;   /* esto creará el primer triángulo */   border-bottom: 50px solid transparent;   border-left: 30px solid #A0A9B1;   border-top: 50px solid transparent; }  .breadcrumb li a:before { /* el siguiente enlace */ content: " ";    display: block;    height: 0;   left: 100%;   margin-top: -50px;    margin-left: 1px;   position: absolute;   top: 50%;   width: 0;    z-index: 1;   /* el color de fondo del segundo item */   border-bottom: 50px solid transparent;   border-left: 30px solid #DEF;   border-top: 50px solid transparent; } /* y los siguientes */ .breadcrumb li:first-child a {padding-left: 10px;} .breadcrumb li:nth-child(2) a {background-color: #808991;} .breadcrumb li:nth-child(2) a:after {border-left-color: #808991;} .breadcrumb li:nth-child(3) a {background-color: #606971;} .breadcrumb li:nth-child(3) a:after {border-left-color: #606971;} .breadcrumb li:nth-child(4) a {background-color: #404951;} .breadcrumb li:nth-child(4) a:after {border-left-color: #404951;} .breadcrumb li:last-child a {   background: none repeat scroll 0 0 transparent !important;   color: #DEF;   cursor: default; } /* el efecto hover */ .breadcrumb li:last-child a:after {border: none;} .breadcrumb li:last-child a:before {border: none;} .breadcrumb li a:hover {background-color: #501921;} .breadcrumb li a:hover:after {border-left-color: #501921 !important;} </style>