Código, Web y Blogs


Todo sobre tu Perfil de usuario en Blogger - modificar, foto perfil, configuración y más

Desde el principio de los tiempos Blogger funcionaba con el famoso perfil de usuario nativo de la misma plataforma lo cual estaba bien, pero cuando llegó Google Plus se quiso imponer ante Blogger casi obligándonos a vincular nuestro perfil de Blogger con el de Google+ y así fuese el mismo prácticamente para todos los servicios de Google.


Sin embargo últimamente al Foro Oficial de Blogger han llegado algunas dudas sobre como modificar algún parámetro de sus perfiles, entre las más comunes desean:
- Cambiar la foto de perfil.
- Mostrar u ocultar la lista de blogs que siguen.
- Cambiar el nombre con el que publican en sus blogs.
- Agregar la ciudad donde viven a su perfil.

Entre otras dudas, así que la idea de este post es explicar cual es la mejor configuración que podemos dejarle a nuestro perfil de Blogger y dar el enlace para que no nos compliquemos al momento de editar todo, empecemos.


Configurar perfil de Blogger 2020

1. Lo primero será ir al siguiente enlace, recomiendo que se guarde en favoritos ya que en algún momento lo necesitaremos y hasta donde sé (salvo que sea muy ciego) en el escritorio de blogger no veo la opción directa para modificar nuestro perfil.

2. Una vez dentro veremos todos los parámetros posibles para cambiar:



3. Hasta lo anterior sería suficiente para muchos de nosotros pues es fácil modificar, pero la idea de este artículo no es dejar un enlace y es todo si no explicar que significa cada cosa por más obvia que sea y sepan por qué se modifica:


4. Privacidad

Configurar este apartado correctamente podrá salvarnos del SPAM en un futuro y por experiencia lo puedo decir, como recomendación es mejor ser un poco reservado para evitar molestias, dentro de privacidad tenemos:


4.1. Compartir mi perfil, esta opción permite que alguien nos encuentre en Blogger o no, si deseas tener una reserva total recomiendo desactivar dicha opción. ¿Y qué pasa si publico en mi blog pero no comparto mi perfil? bueno cuando das clic en tu perfil o alguien lo hace saldrá algo así:

4.2. Mostrar mi dirección de correo electrónico, Definitivamente este campo debemos desactivarlo en la era del SPAM en la que estamos, de nada sirve mostrar esto en nuestro perfil además si se trata de que nos contacten podemos usar formularios de contacto en nuestros blogs, si habilitas la opción se verá así en tu perfil:
Se mostrará una opción en nuestro perfil que dirá "Correo electrónico" y por una función mailto se podrá enviar un mensaje.

4.3. Mostrar mis blogs, En tu perfil público saldrá la lista de blogs en los que eres administrador o autor por ejemplo:



Si damos en "Seleccionar los blogs que quieres mostrar" podrás ocultarlos todos o solo dejar ver uno como se verá en este momento:



4.4. Mostrar los sitios que sigo, en este caso no podemos seleccionar cuales blogs se muestren ya que solo somos seguidores y no administradores, recomiendo inhabilitar esta opción si la lista de blogs que siguen es muy grande.


5. Identidad

En la sección de identidad  solo tenemos dos campos modificables y uno que no lo es, básicamente es lo siguiente:

5.1. Nombre de usuario, Es el correo electrónico vinculado a nuestro perfil esto suele causar confusión ya que no es el nombre de nuestro perfil con el que publicamos o el que se ve al momento de publicar en Blogger por ejemplo:


Pienso que ese campo debería llamarse "Correo vinculado al perfil" y no "Nombre de usuario" ya que causa confusiones ligeras y para finalizar no es posible cambiarlo solo es informativo.

5.2. Dirección de Correo electrónico, Este campo es útil si activaste mostrar el correo en el paso 4.2. ya que será el que saldrá como se vio allí en la imagen, igualmente se debe dejar un correo escrito sea que se muestre o no el mismo, ya que es un campo obligatorio:


5.3. Nombre para mostrar, aquí es donde se cambia el nombre con el se publicarán las entradas en nuestros blogs como resalté en azul en la imagen del paso 5.1. y también será el nombre que te identificará directamente en tu perfil de blogger:


6. Foto de perfil, bueno este es evidente saber de que se trata pero recuerden en lo posible subir una imagen cuadrada si no desean subir nada es posible dejarlo así tal y como se ven en la imagen anterior del paso 5.3. 

Hasta aquí con las configuraciones ya explicadas nuestro perfil quedaría listo y ha sido lo más importante, todo lo que queda faltante podría llamarlo como "El relleno" para nuestro perfil y no es un obligatorio escribir sobre esos campos. Todo lo anterior es importante saberlo en especial si eres una persona que recién empieza con la plataforma Blogger.

¿Alguna duda? Comenta. Hasta la próxima,


DROPBOX como hosting de imágenes y vídeos para Blogger, wordpress etc.

Hace unos meses atrás compartí un post enseñando ¿Cómo usar Dropbox de hosting para scripts, CSS y HTML? bueno para ese momento no consideré la opción de que lo mismo sería con las imágenes o vídeos ya que en Blogger no requiero hosting pues la misma plataforma provee un espacio muy generoso para cargar nuestras imágenes.


Usando Dropbox como hosting web de imágenes/vídeos

1. Lo primero será ir a nuestra cuenta de Dropbox (No es necesario descargar la App de Dropbox a nuestro equipo).

2. Ahora vamos al escritorio de Blogger y crearemos una carpeta (A) para ser ordenados la llamaremos "Hosting imágenes" o como deseen 😀, luego seleccionamos "Sólo tú" (B) y finalmente guardamos todo dando en crear (C):


3. Ahora ingresamos a dicha carpeta y allí subiremos (A) las imágenes o vídeos para la prueba yo subiré una imagen y un solo vídeo:


4. Luego a la imagen o vídeo le daremos clic en los 3 puntos (A) y luego seleccionamos compartir (B):


Damos en "crear vínculo" y finalmente copiamos dicho vínculo:


5. El vínculo copiado debería verse algo así:
https://www.dropbox.com/s/l7k3ab80o5323j3/eblogger.png?dl=0

Y si vemos en el navegador dicha url nos saldrá el archivo pero, aún no es funcional como una imagen cargada en un host:



6. Ahora entramos al PASO CLAVE aquí modificaremos el enlace de nuestro archivo para poderlo llamar como si estuviese en un host y usarlo en nuestras webs o blogs, el vínculo similar al del paso 5 le cambiaremos las letras "www" por las letras "dl" hecho eso quedaría así entonces:
https://dl.dropbox.com/s/l7k3ab80o5323j3/eblogger.png

Si vemos ahora la imagen ingresando dicha URL al navegador nos saldrá limpia y solamente la imagen sin nada relacionado con dropbox:


7. Finalmente si queremos usar nuestras imágenes o vídeos con HTML podemos hacer las siguientes etiquetas respectivamente:

<img src="URL de la imagen" /> 

Y para vídeo:
<video src="URL del vídeo" width="640" height="480"></video>

Y eso sería todo, el proceso es fácil sin embargo lo detallo casi paso a paso porque no todos dominan este tipo de temas con facilidad, sin más que decir para cerrar este post dejaré los demos de imagen y vídeo alojados directamente en dropbox y llamados con HTML:

Logo Blogger


Y mi vídeo con un poco de humor 😁:


No es más en este post si tienes alguna duda comentala.

Hasta la próxima,


Insertar publicación de Instagram foto o vídeo entradas blog de Blogger

Lo que para unos es fácil para otros es una odisea, y en Bloggin Red todo lo que se pueda enseñar se hará, hoy veremos como integrar publicaciones de Instagram en las entradas, páginas estáticas o simplemente como un gadget en nuestros blogs, aclaro que desde luego sólo funcionará con cuentas que no sean privadas ya que en caso contrario si la cuenta que sigues es privada entonces solo tú podrás ver la foto o vídeo pero los demás no.



¿Y cómo se verá? bueno aquí dejo un ejemplo (Al final explico como ajustar el tamaño de la publicación insertada):


Insertar publicación Instagram en entrada o página estática

1. Sólo se puede insertar haciendo todo desde la versión escritorio de Instagram vamos a la publicación y damos clic en los tres puntos que tiene la misma:



2. Luego saldrá una ventana y allí damos clic en insertar:


3. Copiamos el código que nos dan allí, si deseamos incluir la descripción de la publicación seleccionamos "Incluir pie de foto":


4. Ahora vamos a ir a la pestaña "HTML" de la entrada o página estática donde queremos insertar la publicación y allí pegamos el código:


Finalmente podemos publicar nuestra entrada o dar en vista previa, para así darnos una idea de como saldrá, y sería todo para la entrada o página estática.


Insertar publicación Instagram como un Gadget


5. Ahora insertaremos la publicación de Instagram como gadget en cualquier parte del blog es fácil a partir del código copiado en el paso 3, iremos a Blogger > Diseño > Añadir gadget > HTML/Javascript.


6. Pega el código allí y da clic en guardar, luego observa en tu blog si todo sale bien.


+Aclaraciones y dudas

- La publicación insertada es por defecto muy grande para ajustar el tamaño de la misma en el código buscaremos algo similar a lo siguiente:
max-width:540px; min-width:326px;
Y cambia los números por una medida que consideres justa para tu publicación insertada. 

- La publicación por defecto no está centrada y estéticamente no se ve bien, así que basta con usar las siguientes etiquetas HTML para centrar el contenido insertado:
<center> Pega aquí el código </center>

Y eso sería todo en este post ¿Alguna duda? comenta.


Blogger: "Sus ingresos están en peligro archivos ads.txt" Solución Adsense

Hoy explicaré como solucionar el problema de ads.txt en Blogger y que el aviso de que nuestros ingresos están en peligro deje de aparecer, claro que si leemos los links que proporciona adsense allí nos indican como hacerlo, sin embargo puede que no todos entiendamos donde encontrar cada opción para corregir dicha problemática.


Vamos con la solución en Blogger...

Para efectos de confianza el error del que hablo es el siguiente, que se ve cuando ingresamos a la web de Adsense:



1. Lo primero será dar click en "Solucionar ahora" allí descargamos el archivo ads.txt, dicho archivo lo abrimos y copiamos lo que hay en su interior:


2. Ahora en este paso es necesario hacer lo mismo en cada blog donde mostremos anuncios con dicha cuenta de adsense; vamos a blogger.com > Configuración > Preferencia para motores de búsqueda > Monetización > Editar:



3. Ahora seleccionamos sí y en el espacio pegamos el código del archivo ads.txt:


Guardamos configuración y sería todo podemos comprobar el contenido de nuestro archivo ads.txt agregado, vamos a http://url-de-nuestro-blog.blogspot.com/ads.txt si nos carga lo que hemos pegado entonces todo estará hecho.

Una vez más recuerden que este proceso de pegar el código debe hacerse en todos los blogs donde tengamos anuncios de Adsense al pasar los días el aviso desaparecerá.

No es más en este post, pero si hay dudas no olviden comentar. 💾


Colocar Adsense en entradas relacionadas de tu Blog Blogger

Pero tiempo que no dedicaba una entrada a Adsense, hoy explicaré un truco/herramienta oficial de Google Adsense todo lo que haremos será desde su web oficial, ¿De qué se trata?, lo que haremos será poner en nuestro blog anuncios de adsense en medio de lo que solemos llamar "Entradas o post relacionados" que van al final de cada entrada así de fácil, así que veamos.
 Requisitos:

- Claramente debes tener un blog aprobado y cuenta de adsense aprobada
- Tener activada la opción de anuncios automáticos en adsense.com
- Conocer un poco de HTML en tu tema Blogger

Creando el bloque de anuncios de Contenidos Relacionados

Sabidos los requisitos, vamos a lo que vamos paso a paso su implementación es ¡Pan comido hacerlo! pero diré a detalle cada cosa:

1. Vamos a adsense.com luego > Anuncios > Bloques de anuncios:


2. Ahora en escogemos la pestaña "(Nativo) Contenido Relacionado":

Click en la imagen para ampliar

3. Seleccionado lo anterior nos saldrá un demo en vivo del bloque de anuncios de "Contenidos relacionados" ahora hay que verificar que nuestro dominio del blog esté apto para poder mostrar ya que la vinculación es automática:

Click para ampliar imagen
Muy bien en mi caso sale blogginred.com como un sitio habilitado y permitido para incluir este tipo de anuncios (Sólo para aclarar si no te sale en sitios web aptos no hay nada que hacer al respecto).



4. Como vemos en la imagen anterior al seleccionar la web apta justo debajo podremos ver un demo de como irían quedando nuestros anuncios mezclados con el contenido del blog al cual podremos ajustar el tamaño según el ancho del espacio de entradas en nuestro blog:


5. Vamos a configurar el bloque de anuncios ahora, en la parte derecha del demo en vivo tenemos todo el panel de ajuste y solo modificaremos:


Nombre del bloque > Para identificar nuestro bloque cuando queramos modificarlo en el futuro.

Opciones de anuncios > Habilitamos la obtención de ingresos

Tamaño > Adaptable, para no sufrir con las versiones de celular. 


6. Finalmente guardamos cambios y obtenemos el código:


El código final y que copiaremos será algo similar a este:

 

Llevando nuestro anuncio a Blogger

Copiado el código anterior empezaremos entonces con poner el anuncio en nuestro blog de blogger debe ser el mismo blog que salió habilitado para poner "Contenidos Relacionados":

7. Vamos a nuestro escritorio Blogger > Tema > Editar HTML y buscamos la siguiente línea:
<div class='post-footer-line post-footer-line-1'/>

Y justo arriba de ella pegamos el código Adsense:

 
Ahora si no te sale la anterior línea busca la siguiente:
<div class='post-footer'>

Y debajo de ella pega el código adsense puede que te salga un par de veces la misma línea prueba en ambas hasta que en una entrada se vea el bloque puesto o un espacio grande en blanco. 

8. Guarda cambios en tu plantilla (Tema) y finalmente ve a una entrada a observar, pero cuidado hay dos cosas que pueden pasar:

- Los anuncios no se vean de primera vez recién pones, pero, si te sale un espacio al final de tu entrada en blanco hiciste un buen trabajo y sólo debes esperar algunas horas para empezar a ver anuncios.

- Que los anuncios se empiecen a ver de una vez por todas.


¿Cómo queda finalmente?

Bueno la respuesta la tienes en una imagen más arriba en el punto 4 si no, aquí mismo en esta entrada puedes ver que hay "Contenidos relacionados" con anuncios adsense de por medio, lo malo del rollo es que no será visible para aquellos lectores que tengan activado AdBlock  en sus navegadores sin embargo puedes implementar un buen script en tu blog para limitar el acceso a aquellos usuarios que tenga Adblock activado si así lo deseas.

Es todo en este post si tienes alguna duda comenta... :)


Aumentar número de carácteres nombre de producto Prestashop 1.7

Días atrás tuve un problema con la tienda prestashop de mi otro blog, donde al estar en el Home de la tienda y por ejemplo darle click a un producto, el título en la página de este era demasiado corto lo cual no tenía sentido ya que el cliente no podía ver todo lo que decía así que opté por investigar un poco hasta dar con la solución y aquí la tengo.

El mejor ejemplo de lo que hablo lo ven en la imagen anterior, pero no hay de qué  preocuparse, aquí detallaré como ocurrió mi problema (para que asimiles si tu caso es similar al mío o no) y claro su respectiva solución. 

EL PROBLEMA

En mi tienda Prestashop 1.7.5.2 al estar en el Home o página príncipal de la misma y darle clic a algún producto en la página de este, el título era demasiado corto, tal y como nos lo puede mostrar este gif, veamos:


LA SOLUCIÓN

Pero todo problema puede tener solución, así que me parece mejor que se vea todo el nombre de producto en la página de detalle del mismo, veamos:

1. Lo primero será ir al CPANEL donde tenemos nuestra tienda instalada, una vez allí buscamos la siguiente ruta y abrimos el archivo "product.tpl":

/themes/nombredetutheme/templates/catalog/_partials/miniatures/product.tpl

2. Ahora abrimos el archivo respectivo y dentro de él buscaremos una línea de código muy similar o igual a la siguiente, también podemos buscar por la palabra clave "truncate" resaltada en rojo:

{$product.name|truncate:25:'...'}
Cuando la encontremos basta con cambiar ese número 25 o el que tengamos allí, generalmente es inferior a 35 ahora lo cambiamos por el que supongamos pueda servirnos (En mi caso he puesto el 80 esto es el número de caracteres a mostrar).



3. Ahora sólo guardamos cambios de nuestro archivo y ya estuvo vamos a nuestra tienda prestashop y checamos los cambios nuevamente aquí un GIF de referencia:


¿Alguna duda? Comenta seguro que si sé te ayudo, es todo en este post.

Hasta la próxima,


Poner aviso de "Uso de cookies 2024" en blog de blogger en la parte inferior

 Tomado gentilmente de Oloblogger
 Un breve post hoy enseñaré como poner el famoso aviso de "Uso de cookies" en nuestro blog de blogger, el tutorial es muy fácil  y no tiene mayor complejidad.


Nuestro aviso en general se verá algo más o menos así:

Click en la imagen para ampliar
Muy bien,

EL TUTORIAL...

1. Lo primero será ir a nuestro escritorio blogger luego vamos a Diseño > Añadir un gadget > HTML/JavaScript.

2. Allí vamos a pegar el siguiente código:
<div id="barracookies">
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
<br/>
Si continúa navegando consideramos que acepta su uso. <a href="javascript:void(0);" onclick="var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie('avisocookies','1',expiration,'/');document.getElementById('barracookies').style.display='none';"><b>OK</b></a> <a href="http://www.google.com/intl/es-419/policies/technologies/types/" target="_blank" >Más información</a> | <a href="http://www.interior.gob.es/documents/10180/13073/Guia_Cookies.pdf/7c72c988-1e55-42b5-aeee-f7c46a319903" target="_blank" >Y más</a>
</div>
<!-- Estilo barra CSS -->
<style>#barracookies {display: none;z-index: 99999;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;padding:5px;background: #333333;color:#d7c712;line-height:20px;font-family:verdana;font-size:12px;text-align:center;box-sizing:border-box;} #barracookies a:nth-child(2) {padding:4px;background:#4682B4;border-radius:5px;text-decoration:none;} #barracookies a {color: #fff;text-decoration: none;}</style>
<!-- Gestión de cookies-->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+"="+escape(value)+((expires==null)?"":"; expires="+expires.toGMTString())+((path==null)?"":"; path="+path)+((domain==null)?"":"; domain="+domain)+((secure==null)?"":"; secure")}function getCookie(name){var cname=name+"=";var dc=document.cookie;if(dc.length>0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(";",begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+"="+((path==null)?"":"; path="+path)+((domain==null)?"":"; domain="+domain)+"; expires=Thu, 01-Jan-70 00:00:01 GMT"}}</script>
<!-- Gestión barra aviso cookies -->
<script type='text/javascript'>
var comprobar = getCookie("avisocookies");
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie("avisocookies","1",expiration);
document.getElementById("barracookies").style.display="block"; }
</script>
 3. Guardamos y todo OK. 

Listo muy fácil con esto ya saldrá el aviso de "uso de cookies" en nuestro blog sin problema alguno, sin embargo, si tienes lío no olvides comentar.

Hasta la próxima,


Usar DROPBOX como hosting de archivos JS y CSS - 2024

Hace casi 9 años que compartí un tutorial donde enseñaba como alojar y cargar scripts u hojas de estilo en Dropbox y claro que fueran funcionales a nivel de desarrollo web es decir, que las pudieramos llamar como un script u hoja de estilo y estas cumplieran su función en nuestros blogs en Blogger, también agrego que es compatible este tutorial con cualquier otra plataforma web/blog. Así que sin más empecemos:



Dropbox como hosting web de archivos...

1. Es obvio tener una cuenta el dropbox, si no la tienes aún puedes registrarte aquí, luego accede a tu cuenta (No es necesario descargar la App de Dropbox a nuestro equipo).


2. Ahora vamos al escritorio de Dropbox y vamos a crear una "nueva carpeta" (A), luego damos un nombre a la carpeta yo le pondrés "Scripts" marcamos la casilla señalada en (B) luego pasamos a dar click en crear:



3. Ahora ingresamos a la carpeta que ha sido creada y luego damos en "Cargar archivos" allí subiremos el archivo .js o .css a cargar: 



4. Ahora al archivo que subí, que sería en mi caso "MiJavascript.js" doy click en los 3 puntos del final > compartir:



5. Saldrá un cuadro y en él daremos en copiar vínculo:



6. Ahora bien el vínculo copiado es de la forma: 
https://www.dropbox.com/s/47p3227ecva4q62/MiJavascript.js?dl=0

El cual al verlo en una ventana nueva de nuestro navegador se ve así y su función no está aún como un script sino como un archivo normal en la nube:



7. Ahora MUCHA ATENCIÓN... para poder convertir el enlace del script a un script funcional y poderlo llamar desde una web o blog, haremos lo siguiente, al link que tienes muy similar al del paso 6 le cambiaremos sólo las letras (www) por las letras (dl) y luego daremos enter, para tener algo así:

https://dl.dropboxusercontent.com/s/47p3227ecva4q62/MiJavascript.js

Si vemos ahora el script ya está en texto plano y lo podremos usar para nuestras funciones con nuestros blogs y códigos de programación web:



8. Ya para finalizar y que nuestro script funcione en nuestra plantilla de blogger por ejemplo, lo citaremos con este código:
<script src='URL SCRIPT' type='text/javascript'/>

Y si es para un archivo (.css) utilizamos el siguiente código para llamarlo:

<LINK href="URL CSS" rel="stylesheet" type="text/css">

Sólo reemplazas tu URL por lo que dice en azul respectivamente y listo, realmente el proceso es fácil y recuerden que cargan nuestros scripts en nuestro propio hosting ayuda a darle mejor velocidad de carga a nuestro blog.

Si tienes alguna duda puedes comentar y veremos que se hace.

Salu2 👍,

ESTAMOS EN: