jueves, 3 de octubre de 2013

Gadget de Estadísticas para Blogger

10/03/2013 10:31:00 a. m. Por 8 comentarios


El gadget que veremos hoy se trata de un bloque en el que se muestran estadísticas de nuestro blog, tales como los días en línea que lleva publicado, el número de entradas y el número de comentarios. Podéis verlo en la parte inferior de mi blog, y publico su código a petición de los lectores.

Nota: El contador de visitas que aparece debajo de las estadísticas es el de Blogger. Podéis encontrarlo en la lista de gadget que nos ofrece Blogger

Cómo instalar el gadget en tu blog


Para añadir este gadget a tu blog tendremos que seguir los siguientes pasos:

Para añadir el estilo a la plantilla:

  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:
***---Estaditicas---***
.stats-data {
clear: both;
display: block;
float: none;
overflow: hidden;
padding-left: 8px !important;
}
.stats-data li {
border-right: 1px solid #CCCCCC;
color: #ffffff;
float: left;
font-size: 10px;
font-weight: normal;
line-height: 12px;
margin-right: 10px !important;
margin-top: 0 !important;
padding: 5px 15px 2px 0 !important;
text-align: left;
}
.stats-data li span {
color: #ffffff;
display: block;
font-size: 15px;
font-weight: bold;
margin-bottom: 2px;
}

En el código anterior podemos modificar el estilo del gadget a nuestro gusto, pero las líneas de código a modificar más importantes son:

  •        Grosor del separador (en pixeles)
  •        Color del separador (código hexadecimal)
  •        Color del texto (código hexadecimal) (Por defecto: Blanco)
Para agregar el gadget al blog:


  1. En el Escritorio Blogger hacemos clic en Diseño.
  2. Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
  3. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  4. En él pegamos el siguiente código:

<ul class="stats-data">
<li>
<span><script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(15, 07, 2013, "" );</script> </span>Días en línea
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script></li>
<li>
<span><script src="http://zblogger.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Entradas
</li>
<li style="border-right:0 none; padding-right:0!important;">
<span><script src="http://zblogger.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Comentarios
</li>
</ul>

El el código anterior hay que modificar:
  •        URL de tu blog.
  •        Fecha en la que se creó el blog.
Ahora tan solo poned el gadget donde más os guste y comprobad que todos los datos son correctos.

sábado, 14 de septiembre de 2013

Destacar comentarios del autor con una imagen

Destacar comentarios del autor


El siguiente truco está relacionado con el sistema de comentarios anidados de Blogger, que permiten una mayor personalización . Consiste en marcar con una pequeña imagen, un circulo gris con un lapiz dentro que aparece a la derecha del nombre, los comentarios que escribe el autor.

Este truco es muy sencillo de instalar ya que tan solo es añadir un fragmento de código CSS a la plantilla. Hay que destacar que la imagen está en Base64, es decir, no se aloja en ningún servidor externo sino que es un código que el navegador traduce en una imagen.

Cómo instalarlo en tu Blogger


  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
} 

A partir de ahora, cada vez que publiquemos un comentario aparecerá al lado de nuestro nombre una imagen indicando que somos el autor del blog.

lunes, 2 de septiembre de 2013

Botón Ir Arriba (Back to Top) para Blogger

9/02/2013 05:11:00 p. m. Por 5 comentarios

Botón Ir Arriba para Blogger

La función del siguiente botón es volver al inicio de la página de manera rápida para facilitar la experiencia al usuario, en lugar de tener que mover la barra de desplazamiento (Scrollbar) o jugar con la rueda del ratón, sobre todo cuando la página es extensa o el post tiene muchos comentarios.

El siguiente botón tiene la característica de que no incluye ningún script, lo que lo hace muy simple y la velocidad de carga del blog no aumentará al incluir este botón.

Podéis ver una demostración en el siguiente blog de pruebas:

Demo

Instalar el botón en tu blog


Para instalar el botón de Ir Arriba en tu blog sigue los siguientes pasos:
  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. </body>

  6. Encima de ello tenemos que pegar el siguiente código:
<style type='text/css'>
    .backtotop a:hover {
        padding-bottom:2px;
    }
</style>
<div class='backtotop'><a class='backtotop' href='#' rel='nofollow' style='display:scroll;position:fixed;bottom:10px;right:15px;' title='Ir Arriba'><img src='https://lh4.googleusercontent.com/-KXKWAyu7dzI/UiSh8-lgdEI/AAAAAAAABLY/jVxmi_nqXXY/s35-no/top.png' style='border:0;'/></a>
</div>

Nota: Podéis cambiar la URL de la imagen por la que querais.

viernes, 30 de agosto de 2013

Set de Iconos de Redes Sociales (II)

Set de Iconos de Redes Sociales

Hace unas semanas compartí con vosotros un set de iconos de redes sociales que encontré en GraphicsFuel. He visto otros modelos en su web que me parecieron muy bonitos también, circulares con efecto brillo, y son los que comparto a continuación.

Los iconos tienen una licencia gratuita para uso personal y comercial. En el archivo comprimido encontramos los iconos en dos formatos (PSD y PNG), a distintos tamaños: 128x128, 64x64px, 32x32px y 16x16px.

Descargar Set de Iconos

Vía: Graphicsfuel

lunes, 26 de agosto de 2013

Insertar documentos PDF, DOC y otros más en Blogger

8/26/2013 02:00:00 p. m. Por 2 comentarios

Insertar documentos PDF o DOC en Blogger

El editor de Blogger no nos permite incrustar archivos PDF, DOC, PowerPoints o documentos Excel en las entradas, pero usando Google Drive conseguiremos añadir un visor para estos archivos y algunos más que Google Docs (ahora junto con Google Drive) nos permite subir y visualizar en su web,  por ejemplo documentos excel o presentaciones en PowerPoint.

Podéis ver un ejemplo de un documento PDF a continuación:



Para incrustar el visor de archivos en Blogger seguiremos los siguientes pasos:

Insertar Visor en Blogger


  1. Nos dirigimos a Google Drive.
  2. Subimos el documento que queremos añadir a Blogger haciendo clic en la flecha y seleccionando Archivo.

    Subir archivo a Google Drive

  3. Una vez subido el archivo hacemos clic con el botón derecho en él y luego en Abrir con - Google Drive Viewer.

    Google Drive Viewer

  4. Hacemos clic en Archivo - Insertar este archivo PDF.
  5. Copiamos el código que nos proporciona.

    Insertar PDF

  6. En el Editor HTML de la entrada de Blogger pegamos dicho código.

Nota: Podemos cambiar el alto y ancho del visor modificando los valores de height y width respectivamente.

viernes, 23 de agosto de 2013

Publicar automáticamente las entradas en Facebook

8/23/2013 02:00:00 p. m. Por 14 comentarios

Publicar automáticamente las entradas en Facebook


En un tutorial anterior hemos aprendido como crear una página en Facebook, hoy aprenderemos cómo publicar las nuevas entradas en nuestra página de Facebook automáticamente para ahorrar tiempo a la hora de compartir las novedades con nuestros seguidores.

Gracias a RSS Graffiti y al feed de nuestro blog, esta tarea será sencilla y totalmente automática.

Añadir feed a RSS Graffiti


Accedemos a la aplicación a través de este enlace: https://apps.facebook.com/rssgraffiti/

RSS Graffiti

Hacemos clic en Add New Publishing Plan, escribimos el nombre de nuestro blog y hacemos clic en Create Publishing Plan.

RSS Graffiti

En la columna Sources hacemos clic en Add New e introducimos la URL del feed de nuestro blog que tendrá uno de los siguientes formatos (depende de si tenemos FeedBurner o no):


http://nombre-de-tu-blog.blogspot.com/atom.xml
http://feeds.feedburner.com/nombre-de-tu-feed

RSS Graffiti

A continuación aparece una ventana como esta donde podemos configurar algunas cosas.

RSS Graffiti

  • Feed Title: Título del Blog.
  • Feed URL: URL del feed de nuestro blog.
  • Maximum Posts per Update: Número máximo de posts que se publicarán en la misma actualización. Esto podemos configurarlo como "System Maximum" para que no haya un número limitado.
  • Post Order per Update: Para publicar los nuevos/viejos posts primero.
En la pestaña Advanced podemos configurar para que aparezca un mensaje con cada publicación que hagamos en Facebook, y la fecha desde la cual se publicarán los posts del blog posteriores a ella.

Hacemos clic en Save Changes y ya tenemos configurado el feed.

Configurar frecuencia de publicación


Podemos configurar también la frecuencia en la que RSS Graffiti revisará si hay nuevas entradas para publicarlas en la página de Facebook. Para ello hacemos clic en el icono del reloj y modificamos Frecuency Scheduling a "Every half an hour".

RSS Graffiti


Configurar la página de Facebook en RSS Graffiti


Tan solo nos queda configurar RSS Graffiti para que publique los nuevos posts en nuestra página de Facebook, para ello hacemos clic en New Target. En la ventana que aparece configuramos lo siguiente:

RSS Graffiti

  • En Target Setup tenemos que seleccionar nuestra página de Facebook.
  • En Post Style podemos personalizar la publicación que se hará en la página.
Por último, para activar la publicación automática hacemos clic en OFF para que se active y ponga ON.

RSS Graffiti


domingo, 18 de agosto de 2013

Gadget Comentarios Recientes con Avatar

Gadget Comentarios Recientes

Este gadget, totalmente personalizable y con avatar junto a cada comentario, nos permite colocar una lista de los comentarios recientes en nuestro blog. Podéis ver un ejemplo en este mismo blog, en la parte inferior (footer).

Está diseñado por Way2Blogging y han creado un generador en su página web para poder personalizar e instalar dicho gadget en nuestro blog. Es un gadget que se instala fácilmente y además de ser útil, queda muy bonito, os animo a que lo probéis.


Cómo instalar el gadget en tu blog


Configuracióon gadget

  1. Nos dirigimos a la web del generador del gadget de Way2Blogging .
  2. Completamos los datos que nos piden:
    1. Widget Title: Es el título que aparecerá en la parte superior del gadget (También se puede dejar en blanco para que no aparezca nada).
    2. Blog Url: Aquí va la URL de vuestro blog.
    3. Number of Recent Coments: Número de comentarios con avatar que quieres que aparezcan.
    4. Show Avatar: Para mostrar u ocultar el avatar.
    5. Avatar Image Size: Tamaño del avatar en px.
    6. Rounded Avatar Image: Para que el avatar sea circular (Yes) o cuadrado (No).
    7. Number of Comment Excerpt Characters: Número de caracteres a mostrar.
    8. Show More Link in Comment Body: Si queremos que se muestre o no un texto para seguir leyendo.
    9. More Link Text: Texto que se mostrará para seguir leyendo.
    10. Default Avatar Image URL: Aquí podemos poner la URL de la imágen que se mostrará si el autor del comentario no tiene avatar. 
    11. Hide Way2Blogging Link: Marcamos "Yes" si queremos ocultar un link al creador del gadget.
  3. Una vez tengamos todo configurado hacemos clic en Generate.
  4. Somos redirigidos a una página donde tenemos que darle al botón azul que pone Add to Blogger.

    Instalación gadget

  5. Por último aparece una página de Blogger donde tenemos que seleccionar nuestro blog y hacer clic en Añadir Artilugio.

    Instalación gadget
Si os surge alguna duda respecto a este tutorial, dejad un comentario más abajo.

jueves, 15 de agosto de 2013

Personalizar la Nube de Etiquetas con CSS (II)

8/15/2013 01:45:00 p. m. Por , 4 comentarios

Personalizar la Nube de Etiquetas con CSS


Hace unos días expliqué como Personalizar la Nube de Etiquetas con CSS en Blogger y compartí con vosotros algunos diseños que hice. Hoy comparto otro diseño muy bonito que he encontrado en Stylifyyourblog. Podéis ver una demo a continuación:


Cómo instalarlo en tu Blogger


  1. Instalar el Gadget de Etiquetas para Blogger. Si no lo tienes instalado explico cómo hacerlo en Personalizar la Nube de Etiquetas con CSS.
  2. Ir a Escritorio Blogger.
  3. En el menú seleccionamos Plantilla.
  4. Hacemos clic en Editar HTML.
  5. En el código buscamos lo siguiente:
  6. ]] ></b:skin>

  7. Encima de ello tenemos que pegar el siguiente código:
.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px; 
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px; 
 border-top-right-radius:4px; 
 } 
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;  
 } 
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }  

.label-size a:hover{background:#555;} 
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Eso es todo, si tenéis alguna duda acerca de este tutorial dejad un comentario en esta entrada.

lunes, 12 de agosto de 2013

Ocultar o mostrar contenidos con botones Spoiler

8/12/2013 04:25:00 p. m. Por 11 comentarios

Ocultar o mostrar contenidos Spoiler

El truco de hoy consiste en crear un botón que nos sirve para ocultar o mostrar el contenido que queramos dentro de una entrada.

Al crear una entrada para nuestro blog, es posible que queramos ocultar algún contenido para que los lectores vayan leyendo cuando pulsen un botón, ya sea para que la entrada no sea tan larga, ocultar contenidos de spoilers, o para que quede más bonito.

Aquí podéis ver dos ejemplos, ya que puede ser un botón o un texto lo que oculte o muestre el contenido:

Formato botón:

El contenido oculto puede ser cualquier cosa: texto, imágenes, videos, etc...

Formato texto:
Mostrar
El contenido oculto puede ser cualquier cosa: texto, imágenes, videos, etc...

¿Cómo poner este botón en tu web?


Para poner un botón spoiler en tu blog:

  1. Copia uno de los siguientes códigos (Botón o Texto).
  2. Pégalo donde quieras que aparezca.
  3. Sustituye el texto de color rojo por lo que quieras ocultar.

Formato botón:
<div>
  <input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="button" />
  <div style="display: none;">Contenido Oculto</div>
</div>

Formato texto:
<div><a href='#' onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Mostrar';}return false" type="button">Mostrar</a>
  <div style="display: none;">Contenido Oculto</div>
</div>

viernes, 9 de agosto de 2013

Añadir panel de fans (Fan Box) de Facebook


Anteriormente aprendimos a crear una página de Facebook para nuestro blog, hoy vamos a aprender a instalar un panel de fans, también llamado Fan Box o Like Box. Este gadget es muy útil y ofrece las siguientes opciones de configuración:

  • Ver cuanta gente ha hecho clic en Me Gusta en nuestra página.
  • Ver los posts recientes de la página de Facebook.
  • Hacer clic en Me Gusta sin necesidad de ir a la página de Facebook.

Cómo crear gadget Fan Box


Para crear el gadget seguir los siguientes pasos:

  1. Nos dirigimos a esta página de Facebook Developers.


  2. Configuramos las opciones del gadget:
    1. Dirección de la página de Facebook.
    2. Ancho del Widget.
    3. Altura del Widget (Opcional).
    4. Tema del gadget (Claro, Oscuro).
    5. Mostrar cabecera, posts recientes, fotos de los seguidores y mostrar u ocultar el borde del gadget.
  3. Por último hacemos clic en Get Code y seleccionamos HTML5.


Cómo añadir gadget a Blogger


Con el primer código que nos da Facebook tenemos que hacer lo siguiente:
  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. <body>
    

  6. Debajo de ese código pegamos el primer código que nos aparece en la ventana de Facebook.

Con el segundo código que nos da Facebook tenemos que hacer lo siguiente:

  1. En el Escritorio Blogger hacemos clic en Diseño.
  2. Hacemos clic en Añadir un Gadget donde queramos poner el gadget.
  3. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  4. En él pegamos el segundo código.

Nota: El primer código también podéis ponerlo en el gadget HTML, aunque el lugar correcto es después de <body> 

jueves, 8 de agosto de 2013

Gadget de Entradas Aleatorias (al azar) con imagen en miniatura

8/08/2013 03:11:00 p. m. Por 17 comentarios

Gadget de Entradas Aleatorias


El siguiente gadget permite añadir a nuestra sidebar una lista de entradas aleatorias, elegidas al azar, con una imagen en miniatura como pueden ver en la imagen superior. Para añadirlo a tu blog sigue el siguiente tutorial.

Instalación del Gadget


  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:

  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:
  7.  #random-posts img {
         float:left;
         margin-right:10px;
         border:1px solid #999;
         background:#FFF;
         width:70px;
         height:70px;
         padding:3px
     }
    

  8. En el Escritorio Blogger hacemos clic en Diseño.
  9. Hacemos clic en Añadir un Gadget donde queramos poner el gadget.
  10. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  11. En él pegamos el siguiente código:
<ul id='random-posts'>
    <script type='text/javaScript'>
        var rdp_numposts = 5;
        var rdp_snippet_length = 150;
        var rdp_info = 'yes';
        var rdp_comment = 'Comentarios';
        var rdp_disable = 'Comments Disabled';
        var rdp_current = [];
        var rdp_total_posts = 0;
        var rdp_current = new Array(rdp_numposts);

        function totalposts(json) {
            rdp_total_posts = json.feed.openSearch$totalResults.$t
        }
        document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');

        function getvalue() {
            for (var i = 0; i < rdp_numposts; i++) {
                var found = false;
                var rndValue = get_random();
                for (var j = 0; j < rdp_current.length; j++) {
                    if (rdp_current[j] == rndValue) {
                        found = true;
                        break
                    }
                };
                if (found) {
                    i--
                } else {
                    rdp_current[i] = rndValue
                }
            }
        };

        function get_random() {
            var ranNum = 1 + Math.round(Math.random() * (rdp_total_posts - 1));
            return ranNum
        };
    </script>
    <script type='text/javaScript'>
        function random_posts(json) {
            for (var i = 0; i < rdp_numposts; i++) {
                var entry = json.feed.entry[i];
                var rdp_posttitle = entry.title.$t;
                if ('content' in entry) {
                    var rdp_get_snippet = entry.content.$t
                } else {
                    if ('summary' in entry) {
                        var rdp_get_snippet = entry.summary.$t
                    } else {
                        var rdp_get_snippet = "";
                    }
                };
                rdp_get_snippet = rdp_get_snippet.replace(/<[^>]*>/g, "");
                if (rdp_get_snippet.length < rdp_snippet_length) {
                    var rdp_snippet = rdp_get_snippet
                } else {
                    rdp_get_snippet = rdp_get_snippet.substring(0, rdp_snippet_length);
                    var space = rdp_get_snippet.lastIndexOf(" ");
                    rdp_snippet = rdp_get_snippet.substring(0, space) + "&#133;";
                };
                for (var j = 0; j < entry.link.length; j++) {
                    if ('thr$total' in entry) {
                        var rdp_commentsNum = entry.thr$total.$t + ' ' + rdp_comment
                    } else {
                        rdp_commentsNum = rdp_disable
                    };
                    if (entry.link[j].rel == 'alternate') {
                        var rdp_posturl = entry.link[j].href;
                        var rdp_postdate = entry.published.$t;
                        if ('media$thumbnail' in entry) {
                            var rdp_thumb = entry.media$thumbnail.url
                        } else {
                            rdp_thumb = "http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"
                        }
                    }
                };
                document.write('<li>');
                document.write('<img alt="' + rdp_posttitle + '" src="' + rdp_thumb + '"/>');
                document.write('<div><a href="' + rdp_posturl + '" rel="nofollow" title="' + rdp_snippet + '">' + rdp_posttitle + '</a></div>');
                if (rdp_info == 'yes') {
                    document.write('<span>' + rdp_postdate.substring(8, 10) + '/' + rdp_postdate.substring(5, 7) + '/' + rdp_postdate.substring(0, 4) + ' - ' + rdp_commentsNum) + '</span>'
                }
                document.write('<div style="clear:both"></div></li>')
            }
        };
        getvalue();
        for (var i = 0; i < rdp_numposts; i++) {
            document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
        };
    </script>
</ul>

Puedes cambiar el número de entradas que quieres mostrar, para ello modifica el número subrayado en amarillo


martes, 6 de agosto de 2013

Personalizar la Nube de Etiquetas con CSS

8/06/2013 10:39:00 a. m. Por , 2 comentarios

Personalizar la Nube de Etiquetas con CSS

En el tutorial de hoy aprenderemos a dar un estilo CSS a la nube de etiquetas de Blogger para que tengan una apariencia más atractiva. Puedes elegir uno de los tres estilos que he creado o modificarlos como quieras.

Para instalar el gadget de Etiquetas para Blogger y personalizarlo con estilo CSS siga los pasos explicados a continuación.

Instalar el gadget de Etiquetas para Blogger


  1. Nos dirigimos al Escritorio Blogger.
  2. Hacemos clic en la pestaña Diseño.
  3. Añadimos un gadget donde queramos mostrarlo y de la lista seleccionamos Etiquetas.

    Gadget Etiquetas Blogger

  4. Configuramos el gadget como la siguiente imagen:

Configuración gadget Etiquetas


Lo importante es configurar las dos opciones del cuadrado rojo


Personalizar el gadget con CSS


Para aplicar el estilo a la nube de etiquetas seguiremos los siguientes pasos:

  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar uno de los siguientes códigos o modificarlo para personalizarlo a nuestro gusto:

Etiquetas Azules


.Label a {
    background: #0089e0;
    background-image: linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -o-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    padding-left:10px;
    padding:0 10px;
    color:#ffffff!important;
    border-radius:3px;
    -moz-border-radius:3px;
    height:24px;
    line-height:24px;
    text-decoration:none;
    border:0px solid #2c2f32 !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:12px;
}
.Label a:hover {
    color:#ffffff !important;
    font-weight: bold;
    border-radius:15px;
    -moz-border-radius:15px;
    background: #0089e0;
    background-image: linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -o-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
}

Etiquetas Rojas

.Label a {
    background: #e53030;
    background-image: linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -o-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    padding-left:10px;
    padding:0 10px;
    color:#ffffff!important;
    border-radius:3px;
    -moz-border-radius:3px;
    height:24px;
    line-height:24px;
    text-decoration:none;
    border:0px solid #2c2f32 !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:12px;
}
.Label a:hover {
    color:#ffffff !important;
    font-weight: bold;
    border-radius:15px;
    -moz-border-radius:15px;
    background: #aefb9e;
    background-image: linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -o-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
}

Etiquetas Verdes


.Label a {
    background: #aefb9e;
    background-image: linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -o-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    padding-left:10px;
    padding:0 10px;
    color:#385234!important;
    border-radius:3px;
    -moz-border-radius:3px;
    height:24px;
    line-height:24px;
    text-decoration:none;
    border:0px solid #2c2f32 !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:12px;
}
.Label a:hover {
    color:#ffffff !important;
    font-weight: bold;
    border-radius:15px;
    -moz-border-radius:15px;
    background: #aefb9e;
    background-image: linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -o-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
}


Si quereis que sean de otro color tan solo teneis que modificar el código RGB de las etiquetas background-image

Para cualquier duda o problema en la instalación o personalización dejad un comentario más abajo.