herramientas

jueves, 7 de julio de 2016
| 21:05:00 | No Comments

5 Widgets para tus "Popular posts" en blogger


Adaptando este post desde helplogger traemos la ayuda en español para realizar 5 diferentes estilos de "popular posts" en blogger.

1. Añadimos un nuevo gadget "popular posts" o "entradas recientes"

2. Veremos los distintos diseños que hay a disposición, elige el que quieras y copia el código

Estilo 1


Código

<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>



Estilo 2


código

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

Estilo 3


Código

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>



Estilo 4


Código

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>


Estilo 5


Código

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>


3. Al elegir el que nos guste copiamos el código, vamos a plantilla y editar HTML, con CRTL + F buscamos </head> y justo arriba de esta etiqueta pegamos todo el código

4. Ahora buscamos la etiqueta <head> y justo debajo de esta pegamos la siguiente linea de código

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

La cual permite llamar una api de google que nuestro código CSS necesita

5. Ahora copiamos el siguiente código javascript

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>



Nota: La linea que esta en rojo se debe buscar antes en la plantilla, para no repetirla en el código

Es todo!...Ahora podremos ver nuestros "popular posts" con un diseño totalmente diferente al habitual, puedes ver un DEMO en este enlace
| 11:03:00 | No Comments

Galeria de imagenes a partir de una lista


Para realizar un slider de imágenes seguiremos unos sencillos pasos, basándonos en códigos libres de la plataforma codepen.io

1. Primero debemos asegurarnos de tener la librería JQuery en la plantilla que estemos usando, para esto debemos entrar a "plantilla-->editar HTML" CRTL+F y buscamos la linea

]]></b:skin>

Justo despues de esta linea pegamos el siguiente código
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>


2. Para el estilo, es decir el código CSS podremos ponerlo en la plantilla o en un gadget, si decidimos ponerlo en la plantilla debemos ponerlo entre ]]></b:skin> y </head>

 si decidimos usar un gadget simplemente debemos agregar uno tipo HTML/Javascript donde copiaremos el siguiente código

 <style>
ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;} 
ul.obgaleria li{position: relative;display:inline-block;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;} 
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding:0;border:0;} 
ul.obgaleria li:last-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100%;height: auto;} 
ul.obgaleria li {border-left: 3px solid transparent;border-bottom: 3px solid transparent;box-sizing: border-box;} 
ul.obgaleria li:first-child, ul.obgaleria li:last-child {border-left:0;}

</style>
3. Para el código javascript copiaremos las siguientes lineas, si decidimos ponerlo en la plantilla deben ir en este mismo orden, primero css luego javascript, el valor prop = 60.00 es la proporción del alto/ancho multiplicada por 100 de la imagen principal
<script type='text/javascript'>//<![CDATA[
var prop = 60.00;
$(document).ready(function() {
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var ancho = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().appendTo(id);
$(id + " li:last-child").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:last-child").remove()
$(this).clone().appendTo(id).animate({
width: "100%"
}, 200);
});
});
});
//]]>
</script>


4. Ahora crearemos la lista de imágenes  con un simple código

 <ul class="obgaleria" id="galeria_imagenes"> 
<li><img src="link_img1.jpg"/></li> 
<li><img src="link_img2.jpg"/></li> 
<li><img src="link_img3.jpg"/></li> 
</ul>

La clase "obgaleria" no se puede cambiar, ya que es por la cual tenemos conexión al código CSS.

Si deseas hacerla con las imágenes abajo, dejamos los códigos en la plataforma codepen.io, solo se debe reemplazar los mismos códigos, HTML, CSS y JS, esta plataforma permite ver los cambios en tiempo real, antes de pasar el código a nuestro blog




miércoles, 6 de julio de 2016
| 22:52:00 | No Comments

Botones "me gusta" y "compartir" Facebook en Blogger


En esta ocasión aprenderemos como añadir botones de me gusta y compartir de facebook en nuestro blog de blogger.

Me Gusta

Este botón ayudará a captar mas seguidores y no dejarlos ir después de que visiten tu blog, esta clase de botones tendrá este estilo


Para tener estos botones en tu blog seguiremos los siguientes pasos

1. iremos a las opciones de desarrollador en facebook dando click en este enlace
ya estando ahí podremos ver las características iniciales del botón las cuales podremos editar

2. Estando dentro de la edición del botón podremos cambiar ciertos parámetros para personalizar nuestro propio botón. La primera opción la "URL" es la dirección url de tu fan page, en el ejemplo genérico sale la pagina de plugins, debemos reemplazarla por nuestra fan page. 

Width es el ancho de nuestra "caja de botones" vimos que tiene 2 botones "me gusta" y "compartir" ademas de un texto con las personas a quienes ya les gusta y en muchas ocasiones con fotos de los usuarios. Este ancho es el ancho de el bloque completo no solo de un botón, se recomienda mirar el bloque de diseño en blogger que se tiene definido para esta sección y calcular el ancho en px (pixeles)

3. En las demás opciones tenemos a) Diseño b) Tipo de acción c) tamaño

a) Diseño, podremos elegir entre diferentes formas de visualizar estos botones, se recomienda poner los horizontales en secciones de pie de pagina y los "box_count" en áreas laterales.

b) En el tipo de acción escogeremos si queremos Like (me gusta) o Recommend (Recomendar), en me gusta solo sumara un Like a la pagina, en recommend recomendaremos la página o articulo a nuestros contactos.

c) En tamaño simplemente elegimos el tamaño de los botones




4. A continuación clickeamos "obtener código" y nos mostrara una ventana como esta

Dos códigos que debemos copiar para que funcione nuestro botón, El primero debemos copiarlo e ir a la sección "plantilla" y después "editar HTML" de nuestro blogger, presionamos CTRL + F y escribimos <body>, justo después de esta etiqueta <body> pegamos nuestro código.

NOTA: Recomendamos encerrar el código copiado entre dos etiquetas comentadas para facilitar la futura búsqueda, es decir, escribir una etiqueta al inicio y una al final del código copiado de la siguiente manera

<!-- sdk boton facebook inicio-->
código copiado 
<!-- sdk boton facebook fin-->

De esta manera podremos buscar la próxima vez CTRL + F y escribimos "boton facebook" y sabremos donde inicia y donde termina el código


5. Por ultimo copiamos el segundo código en la parte donde deseamos que salga el botón, se recomienda añadir un nuevo bloque para que salga en todas las paginas o entradas, ya que si se añade en una sola entrada se debe repetir este proceso cada vez que se publique un nuevo post.


Compartir

Este botón permitirá a los usuarios compartir noticias o articulos que tengamos en nuestro blog en el perfil de facebook, los pasos son muy similares

1. Daremos click en el siguiente enlace
2. Configuramos las opciones correspondientes acorde a nuestro blog


La url se debe reemplazar con la misma que escribimos anteriormente, el diseño se selecciona y se puede ver la vista previa y el tamaño se selecciona a preferencia

3. Copiamos los dos códigos de la misma manera que se explicó previamente, despues de <body> y el segundo código en donde queremos que el botón salga



NOTA:  Facebook permite generar distintos botones, podemos verlos en la columna izquierda de los enlaces a donde nos hemos redireccionado, se puede observar así






Algo que agregar?.... Comenta...!!!






lunes, 4 de julio de 2016
| 21:24:00 | No Comments

Incluir formulario de contacto


Tenemos 2 opciones para crear un formulario de contacto en nuestra página de blogger

1. Una forma sencilla de agregar un formulario de contacto es:

En la sección de diseño seleccionamos: Añadir nuevo Gadget, Buscamos la pestaña a la izquierda "mas gadgets" y encontramos "formulario de contacto"




NOTA: Los correos serán enviados al e-mail con el cual esta registrada la cuenta de Blogger


2. Esta manera también es bastante sencilla, entraremos a foxyform para su versión en español podemos entrar a es.foxyform.com



Nos permite elegir que datos queremos recibir de nuestros usuarios (nombre, saludo, email, asunto) y señalar si deben ser obligatorias o no.

A continuación permite editar el diseño, si nuestro blog es oscuro el color debe ser negro, por lo cual cambiaremos la opción "Color de fondo" a #00000 y "color de fuente" a #ffffff
o bien, al clickear en "(Colores)" nos facilitará el escoger este color.


Esta opción de formulario si nos permite escoger a donde queremos que lleguen los correos, puede ser cualquier e-mail, por ultimo confirmamos que "no somos robots" y clickeamos en "crear formulario"



POR ULTIMO...!!!


Nos confirma a donde enviará los correos y nos da un código... Donde ponemos este código? 

Si queremos que el formulario salga en una entrada o pagina, el codigo debera copiarse en la sección HTML de esta, es decir, cambiamos la opción de "Redactar" a "HTML" como vemos


Pegamos nuestro codigo teniendo seleccionada la opción "HTML" y volvemos a "Redactar", el formulario no se podrá ver hasta publicar la entrada o pagina.

Si queremos que el formulario este en la pagina inicial de nuestro blog, debemos agregar un nuevo gadget en la opción de diseño



Y agregamos un gadget "HTML/JavaScript" dentro pegamos el código  y tendremos el formulario donde ubiquemos el bloque de diseño
| 19:31:00 | No Comments

Donde puedo ver mis etiquetas?


Una etiqueta es un identificador para nuestras entradas, ejemplo, si hablamos de autos y queremos referirnos a uno en especial podemos ponerle etiquetas como la marca, el color, el motor, entre otros. 

 Como poner etiquetas en mi blog? En el menú derecho encontraremos la opción etiquetas.

En este espacio escribiremos nuestras etiquetas separadas por una coma ( , ), estas etiquetas quedarán guardadas para ser reutilizadas en otras paginas o entradas.

En los bloques de diseño encontraremos la opción "Añadir un gadget", dentro encontraremos la opción etiquetas. Dentro nos mostrará varias opciones de orden, orden alfabético o por frecuencia, es decir las mas visitadas, también la opción de lista o nube, es la forma en la que podremos verlas.

Si tenemos muchas etiquetas y queremos que aparezcan solo algunas, seleccionamos la opción "Etiquetas seleccionadas" luego el botón "editar" y podremos seleccionar las etiquetas que se mostrarán en ese bloque.


Algo que añadir? Comenta...

| 11:44:00 | No Comments

Editar menú en plantilla Blogger


Muchas plantillas al descargarlas vienen un con menú predefinido el cual no se encuentra en ningún bloque en nuestra sección de diseño, para esto debemos realizar el siguiente proceso.

1. Entramos a -->  plantilla, editar HTML y CRTL +F

Aquí vamos a buscar alguna palabra que tenga nuestro menú, veamos unos ejemplos


El menú tiene las opciones "Home, about, contact, facebook y twitter"

Al presionar CTRL+F escribimos alguna de estas opciones.

NOTA: Recomendamos buscar palabras como about u otra diferente a "home" ya que esta palabra se repite en varias partes del código.

Debemos encontrar el código del menú así:


2. Reemplazamos cada palabra con la que deseemos que salga en el menú, también vamos a reemplazar los "#" por la dirección URL a donde queremos que vaya este enlace.

3. En muchos casos aparecen mas opciones dentro del menú, esto es una sección hija del menú, es decir que esta dentro de una opción. Al tener la etiqueta <li> opcion1 </li> significa que es una opción primaria, es decir que aparecerá a primera vista en el menú, dentro de ella debe haber una una opción con etiqueta <ul> y dentro de ella de nuevo opciones con etiqueta <li>, estas opciones dentro son opciones secundarias que aparecen en el menú únicamente si se clickea la opción primaria.



4. Si queremos que una de las opciones sea la búsqueda de una etiqueta o que se clasifiquen las entradas por temas, debemos seleccionar una etiqueta y copiar la URL a la que nos redirige. La dirección URL debe ser similar a esta

http://doingblogger.blogspot.com.co/search/label/herramientas

Siendo la ultima palabra el nombre de la etiqueta. Copiamos esta dirección y la reemplazamos por el "#".


¿Donde puedo ver mis etiquetas?