Dividir en Columnas el Widget de Etiquetas


El widget de etiquetas o categorías es muy útil a la hora de ordenar nuestro blog, ya que podemos agrupar las diferentes entradas para luego buscar por lo que nos interesa.

Darle un aspecto personalizado es muy sencillo. Lo primero será agregar el widget de etiquetas, debemos fijarnos en que esté en modo Lista. 

Una vez agregado iremos a plantilla, edición HTML, continuar, pulsamos F3 en Chrome, y buscamos ]]></b:skin> , y justo arriba pegamos el siguiente código:
#Label1 ul li{
float: left;
width: 35%;/*Edita el valor según necesites*/
background:url(http://4.bp.blogspot.com/-tUFtGFy4bcg/UFeDy_a-7mI/AAAAAAAAEoY/X-UXT9mRNsc/s1600/check.png) no-repeat left center;
padding-left:19px; /*Edita el valor según necesites*/
}
En donde dice, edita el valor que necesites pondrás el valor que mas te convenga, ya que depende del ancho de tu sidebar el como quedará finalmente el widget de las etiquetas.

Si es muy angosta deberás disminuir el width.

Poner el Traductor de Google a tu Blog.

El traductor de Google es una aplicación gratuita que permite traducir palabras, textos de un tamaño considerable y hasta páginas completas de internet.

No es útil cuando queremos incrementar las visitas proveniente de lugares con otras lenguas de esta forma es mas fácil acceder a un nuevo mercado de usuarios.

Al igual que otras herramientas de traducción automática, tiene sus limitaciones. Si bien puede ayudar al lector a comprender el contenido general de un texto en lengua extranjera, no siempre ofrece traducciones precisas. Con algunos idiomas se obtienen mejores resultados que con otros. El rendimiento del traductor Google mejora cuanto menor es la longitud del texto a traducir.

Agregar el traductor es simple, solo debes dirigirte a Google Traductor, una vez allí nos encontraremos con la siguiente página en donde tenemos dos opciones, una sería añadir un gadget html/javascript con el código que proporcionan, y la mas fácil es simplemente agregarlo de forma automática, haciendo clic en el ícono de Blogger


Una vez hecho esto tendremos especial cuidado al momento de seleccionar el blog en el cual queremos implementarlo si es que tenemos mas de uno. Se puede cambiar el titulo del gadget si queremos. Luego pinchamos en añadir artilugio, y listo!!!... Con esto ya tendremos  nuestro traductor, podremos cambiarlo de posición como cualquier otro gadget y cambiar el titulo si es que  el anterior no es de nuestro agrado.




Agregar el Botón de Google+ en tu Blog.

Google acaba de lanzar en el menú de diseño de Blogger los botones de Google+ e insignia. La particularidad del botón es que enlaza directamente con nuestro blog por lo que lo remienda en su totalidad, no solo la página de entrada.

La insignia del perfil, permite que una persona pueda seguirnos directamente sin tener que entrar al el. Así los lectores pueden añadirnos a sus propios círculos.

En Oloblogger, explican muy bien de que se trata y como implementarlo, y nos comenta que no es una cuestión menor ya que finalmente el posicionamiento de tu blog se ve afectado de acuerdo a los lectores que han hecho clic en tu botón, ya que los resultados marcados se acercan a las primeras páginas cuando han sido votados.

Karla de Compartidisimo también ha hecho una entrada muy completa al respecto, por lo que no tiene sentido que me explaye aún más. En ella nos comenta como instalar el botón y la insignia de manera muy fácil.

Y para quienes no siempre estamos conformes, podemos dirigirnos a Google Developers y complicarnos un poco la vida para tener un resultado mas a nuestro gusto, aquí podemos elegir distintos tamaños, formas, y diseños. Si queremos, podemos vincularlo a una página en concreto o a la página principal del blog, etc.

Aquí les dejo un ejemplo de algo alternativo, ustedes pueden personalizarlo cambiando el color de la fuente, tamaño, color de fondo.

Marcos Gratis en

Aquí el código:
<center><a href="https://plus.google.com/ID de tu perfil?prsrc=3" style="background: url(URL o Color de Fondo); border: 1px solid #000; color: #333333; cursor: pointer; display: inline-block; font: 16px Arial; letter-spacing: .2em; margin-bottom: 5px; padding: 5px; text-decoration: none; width: 300px;"><span style="display: inline-block; margin-right: 5px; margin-top: 65px; vertical-align: top;"> Tu Nombre</span><img alt="" src="https://ssl.gstatic.com/images/icons/gplus-32.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; height: 32px; margin-top: 4px; width: 32px;" /></a></center>

Como poner botones Me Gusta, Twittear, Google+. Bajo el Título del Post.

A pedido de Roos y de mis amigos de Hotel Barrio 14, hoy veremos como poner los botones sociales de Facebook, Google+ y Twitter para promover nuestros blogs. Ya que los que pone por defecto Blogger, en realidad no son muy visibles.
Aquí un ejemplo:

*Actualización: Se ha cambiando el código original y he puesto uno actualizado en donde se ve el botón me gusta y al lado compartir. Pueden verlo en acción al final del post.



Como siempre el truco está probado en las plantillas del diseñador de Blogger.

Lo primero que haremos es ir a plantilla, Edición de Html, continuar. Debemos hacer clic en expandir plantillas de artilugios.
Presionamos F3 (Chrome) y nos saldrá un buscador, allí pondremos lo siguiente:

 <div class='post-header-line-1'/>

Si no lo encuentras con ese código búscalo nuevamente introduciendo el código sin el final "/>". Existen 2 lineas con el mismo código, prueba en ambas ya que para algunos resulta bajo la primera y en otros bajo la segunda:
<table border='0' cellpadding='0' style='float:left;'><tbody>
<tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' expr:data-text='data:post.title'></a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=true&amp;share=true&amp;width=120&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; height:21px'/>
</td>
</tr>
</tbody></table>
Con eso ya deberiamos tener listos nuestros botones para compartir nuestras entradas.

Si tenemos entradas resumidas y queremos que los botones solo sean visibles dentro de la entrada entonces pondremos en mismo código anterior pero encerrado dentro de una condicional, de la siguiente forma:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ANTERIOR
 </b:if>

*Si no funciona  el botón de Google+ no te preocupes. Pon el siguiente script antes de </body>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Fácil Menú para Blogger

Este es un Menú muy fácil que podemos implementar en nuestros blogs. No necesitamos mayores conocimientos y se ven muy vistosos y coloridos dependiendo de los estilos que se encuentren en nuestra plantilla.

Lo primero que debemos hacer es ir donde dice Páginas. Para cada pestaña del menú que deseemos generar, debemos crear primero una página, que es algo similar a crear un post. En este caso yo he creado una para contacto, servicios, políticas, páginas amigas, etc.  Una vez terminado, tendremos algo como en la siguiente captura:


Hecho eso, escogemos la opción Pestañas Principales, como muestra el recuadro, y listo, ya tendremos nuestro menú, que como dije antes quedará según los estilos que posea la plantilla.

Aquí les dejo algunos ejemplos de ello con las distintas plantillas que entrega el diseñador de plantillas de Blogger.




Pie de página de 1, 2 o 3 columnas.

Añadir columnas al pie de página es muy sencillo si tienes implementada una plantilla del diseñador de plantillas de Blogger. Basta con ir a Plantilla, personalizar y escoger la opción "Diseño", una vez allí nos encontraremos con "Diseño de Pie de Página", tal como se muestra en la siguiente imágen:


Escogemos la opción que deseamos y finalmente presionamos aplicar al Blog, de este modo ya tendremos nuestro diseño aplicado de las columnas deseadas.

Como seguramente han notado, en esta sección también podemos cambiar la disposición del cuerpo del blog, escogiendo distinto número de columnas, izquierda o derecha, en fin, solo es cuestión de ir creando.

Rotador de Imágenes para Blogger

Hoy voy a mostrarles como implementar el slider o rotador de imágenes que tengo en este blog. El tutorial lo he tomado de la página de coquitoblogger pero en realidad, investigando un poco sé que su creador es un diseñador que tenía una página llamada SOHTANAKA, la cual al parecer ya no existe.


Lo que hice, fué cambiar el CSS para que quedase con dimensiones aptas para poner el slider bajo el menú, además de cambiar la imagen de la numeración, lo cual también pueden hacer ustedes de manera de personalizarlo y adaptarlo a su estilo.
También comentarles que el slider es en base a Jquery, y que si ya lo tienen implementado en sus blogs no es necesario que vuelvan a ponerlo.

Bien, lo primero es poner el script. Para hacerlo iremos a plantilla, edición html presionamos F3 y en el buscador de la parte superior derecha ponemos </head>, justo arriba de ello pondremos el script:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {


//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);


//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;


//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});


//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide


$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)


//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );


}; 


//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Duracion de tiempo en rotar (6 segundos)
};


rotateSwitch(); //Run function on launch


//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 


//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 


});
</script>

Seguido de eso, volvemos a nuestro buscador y agregamos ]]></b:skin>, arriba de eso pondremos nuestro CSS:


/*--Main Container--*/
.main_view {
float: center;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height: 150px; width: 800px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: 50px;
width: 155px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 50px;
background: url(http://3.bp.blogspot.com/-Ts0AbrLK7oY/Toc7gmcbHKI/AAAAAAAAA5k/rfBIdVmdgR8/s1600/paginas3.png) no-repeat; /*--aquí va la imagen de la paginación--*/
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #057CD7;
}
.paging a.active {
font-weight: bold;
background: #8FC5EF;
border: 1px solid #8FC5EF;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {
font-weight: blod;
}

"En el trozo height: 150px; width: 800px; especificamos las dimensiones de las imágenes. Si quisieras poner otras de distinto tamaño deberás ajustar los valores, además de bottom: 40px; right: 50px; que controla la posición de la imagen de la paginación".

Una vez puesto esto, pulsamos vista previa, si todo luce bién guardamos la plantilla. Por último debemos anexar nuestro html, para ello agregamos un gadget html/javascript y ponemos:



<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='URL DE TU ENLACE1'><img alt='' src='URL DE TU IMAGEN1'/></a>
<a href='URL DE TU ENLACE2'><img alt='' src='URL DE TU IMAGEN2'/></a>
<a href='URL DE TU ENLACE3'><img alt='' src='URL DE TU IMAGEN3'/></a>
<a href='URL DE TU ENLACE4'><img alt='' src='URL DE TU IMAGEN4'/></a>
</div>
</div>
<div class='paging'>
<a href='URL DE TU ENLACE1' rel='1'>1</a>
<a href='URL DE TU ENLACE2' rel='2'>2</a>
<a href='URL DE TU ENLACE3' rel='3'>3</a>
<a href='URL DE TU ENLACE4' rel='4'>4</a>
</div>
</div>



Recuerda escribir bien los códigos y cerrarlos correctamente.

Lista de Enlaces con Efecto Hover

Esta es un lista de enlaces que tiene la propiedad de que al pasar el mouse sobre cada enlace, éste cambiara el icono  de cruz a una flechita en color azul. Da un bonito efecto. De esta forma se señala que se está pulsando sobre el enlace escogido.
El resultado es el siguiente:

Para realizarlo es muy sencillo. Primero agregamos a través de diseño, añadir un gadget, lista de enlaces. En seguida vamos a plantilla edición de html y pulsamos F3, seguidamente nos saldrá un buscador en la parte superior derecha y buscaremos  ]]></b:skin>, justo arriba de esto pegamos nuestro código CSS, el cual sería:


#LinkList1 li {
list-style:none;
margin-left:0;
border:none;
font-family: Georgia, 'Times New Roman', serif;
padding: 2px 2px 2px 2px;
font-style:italic;
}
#LinkList1 li a{
color: #000000;
background: transparent url(https://lh6.googleusercontent.com/-PNdYSx9mOqo/TpQfqZmZPSI/AAAAAAAABAo/kXVPI1HYuQc/s16/dbtool.png) no-repeat center left;
padding: 2px 2px 2px 20px;
}
#LinkList1 li a:hover {
list-style:none;
color: #585858;
padding-left: 20px;
font-family: Georgia, 'Times New Roman', serif;
font-style:italic;
background: transparent url(https://lh6.googleusercontent.com/-cO0fZ7mcJJk/TpP5trSawYI/AAAAAAAABAg/AYUoWa1-P68/s16/check.png) no-repeat center left;
text-decoration:none;
}


Luego de ello ya tendrás la lista de enlaces funcional. Si quieres puedes personalizarla aún más cambiando los colores, fuentes, o agregándole tus propios iconos. Para esto último en donde dice background, cambia la URL (lo que está entre paréntesis), por la URL de tu imagen.

Iconos Sociales con Efecto de Agrandar en Css.

Iconos Sociales con Efecto de Agrandar en Css. Tutorial creado por Creando Blogs.

Estos íconos los he implementado en mi blog Marcos Gratis y me gusta mucho como queda, recomiendo alojar   las imágenes en tu propio servidor ya que a menudo hago cambio de plantilla y limpieza y puede ser que se borren las imágenes.

Aquí pueden probar los botones pinchando sobre cada uno, aunque el resultado final no es el óptimo debido a los estilos de mi plantilla para las imágenes de las entradas.

Bueno primero que nada, haz una copia de seguridad de la plantilla de tu blog. Luego agregamos lo siguiente  en añadir un gadget html/javascript.

<div class="social-connect-widget">
<a href="TU PAGINA DE GOOGLE+" target="_blank"><img alt="agrégame en google+" src="http://1.bp.blogspot.com/-NCMiSqVwgrg/TwWYbZBmM7I/AAAAAAAACGU/x5kaQIDb7hM/s1600/gplus-32.png" title="agrégame en google+" /></a>
<a href="http://twitter.com/TU NOMBRE DE TWITTER" target="_blank"><img alt="síguenos en twitter" src="http://3.bp.blogspot.com/-1NQnfW9_qD8/TnkjXj3f-qI/AAAAAAAAAPY/2MgSdlsVwN0/s000/social-connect-twitter.png" title="síguenos en twitter" /></a>
<a href="http://facebook.com/TU ID DE FACEBOOK" target="_blank"><img alt="estamos en facebook" src="http://3.bp.blogspot.com/-jtgnrR7QDLI/TnkjYOcfWVI/AAAAAAAAAPc/xRBFIzZYJ2I/s1600/social-connect-facebook.png" title="estamos en facebook" /></a>
<a href="http://feeds.feedburner.com/TU FEED" target="_blank"><img alt="feed rss" src="http://4.bp.blogspot.com/-BSXqhFPVRmY/TnkjXQAIbaI/AAAAAAAAAPU/63ZmAXMOa9U/s000/social-connect-rss.png" title="feed rss" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=TU ID" target="_blank"><img alt="suscríbete por e-mail" src="http://2.bp.blogspot.com/-kIIqoW-rCVo/Tyc72-a_-GI/AAAAAAAACYM/gw3n0TMTdfY/s1600/social-connect-mail.png" title="suscríbete por e-mail" /></a>
</div>
</div>

Debes llenar los datos que se encuentran con letras mayúsculas, tal como la dirección de tu página de Google + , etc. si no tienes puedes borrar esa parte y simplemente no se verá.

Luego iremos a plantilla, edición de html y ante de ]]></b:skin>, agregamos los siguientes estilos, los cuales dan el efcto de agrandar.

/* -- social connect widget -- */
.social-connect-widget img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget img:hover{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget{text-align:right;margin:20px 20px ;}
.social-connect-widget img{vertical-align:middle} 

Si quisieras agrandar aún mas los íconos, prueba cambiando los valores en scale(1) a scale(1.2)  por ejemplo. Comprobamos en vista previa que todo luce bién y guardamos.

Numerar los Nuevos Comentarios de Blogger.


Este tutorial lo he tomado de Vagabundia, una página excelente con cantidad de información, trucos y tutoriales para el blog e informática en general. Lo pongo a modo de ayuda-memoria.

Primero ir a Plantilla, Edición de Html, pulso la tecla F3 y me saldrá un buscador en la esquina superior derecha, busco </b:skin> y justo arriba de eso pongo el siguiente código:

.comments .comments-content {
  counter-reset: contadorcomentarios;
}
.comments .comment-block:before {
  /* el contador */
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  /* la posición dentro del rectángulo */
  position: absolute;
  right: 0;
  top: 5px;
  /* las propiedades gráficas de la fuente */
  color: #9AB;
  font-family: Century Gothic;
  font-size: 26px;
}

En donde están la últimas tres lineas puedo cambiar el color de la letra, la fuente, y el tamaño. 

Poner un Fondo a los Títulos de la Sidebar.

Poner un Fondo a los Títulos de la Sidebar, le dará a tu blog un toque mas personal, sin decir que puedes hacer volar a tu imaginación con un montón de colores y texturas con las cuales podemos experimentar.

Nunca debemos olvidar hacer una copia de la plantilla  antes de cada cambio que vayamos a hacer ya que un pequeño error puede significar un gran cambio a la  hora de guardar la plantilla y sobre todo si no tenemos pericia en el tema, sin embargo no debemos tener temor ya que con este simple paso podemos volver todo a la normalidad.

Lo primero que haremos es ir a la edición Html de la plantilla, presionar F3 y saldrá un buscador, allí ponemos .sidebar h2 una vez ubicado el código, lo reemplazamos por lo siguiente:
.sidebar h2{
background: url(URL-DE-TU-IMAGEN);
border: 1px solid #9CD2F6;
margin-bottom:15px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
Si lo quieres sin borde, quita: border: 1px solid #9CD2F6. Si quieres el borde de otro color cambia #9CD2F6 por el color de tu elección. Si en vez  de una imagen de fondo quieres un color, debes sacar url(URL-DE-TU-IMAGEN) y solo poner un color antecedido de un #.

Adicionalmente he puesto los textos centrados. Para ubicarlos a la derecha deberás cambiar en center por right, y a la izquierda por left.

Está probado en las plantillas del diseñador de blogger, aunque cada caso pudiese ser distinto.


Como eliminar la Navbar o Barra de Blogger.

La Navbar de Blogger cumple variadas funciones, entre las cuales destacan;

  • Regresar al panel de control de tu propio blog, 
  • Buscar en un blog mediante la vía búsqueda de blogs, Compartirlo a través de Twitter o Facebook, 
  • Informar sobre mal uso, 
  • Acceder a un blog aleatorio actualizado recientemente, entre otros.


A pesar de sus múltiples ventajas también tiene inconvenientes, por ejemplo la estética se ve afectada sobre todo cuando queremos darle a nuestra página un aspecto mas profesional.

Si quieres eliminarla deberás acceder a la plantilla, en edición de html e insertar el siguiente código antes de </b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

En donde dice display:none; estamos dando la orden de que la barra se oculte. Por lo que si mas adelante deseas volver a incorporarla bastará con borrar el código.