Código, Web y SEO

jueves, 25 de agosto de 2016

Descargar plantilla photoshop limpia para foto de portada y perfil en páginas de Facebook

Un post más, este post es sencillo y para algunos podría llegar a ser "inservible" pero, nadie sabe con la flojera que otro vive, así que básicamente y para que lo sepas de una vez en este post descargarás una plantilla en blanco con las medidas puestas sin problema alguno para fotos de portada y perfil para las páginas que creemos o tengamos en Facebook. Además, de dictar las medidas que se usan en pixeles en estos casos.


¿Medidas en píxeles para fotos de perfil y portada en facebook páginas?

La respuesta es simple aclarando que esto es para páginas en Facebook

- Para fotos de perfil: En PC son de 160x160 píxeles, en smartphones son 128x128 píxeles y teléfonos básicos son 36x36 píxeles. es decir algo así:


- Para fotos de Portada:  (Relación ancho x alto)En PC son de 828 x 315 píxeles, en smartphone es de 640 x 360 píxeles. No se ve en teléfonos sencillos

Listo hasta ahí puedes crear tus diseños de perfil y portada,  


+ Descarga de plantillas vacías más abajo

 ¿No confías en las medidas aún viéndolas?

No te preocupes a continuación te damos la posiblidad de descargar todas las plantillas vacías-limpias para trabajar como quieras con cada medida aquí escrita en Photoshop:

Descarga plantilla PSD para fotos de perfil (CLICK AQUÍ)
Descarga plantilla PSD para fotos de portada (CLICK AQUÍ)
Descarga todas las plantillas perfil y portada en uno sólo (CLICK AQUÍ)    

El archivo que bajas está comprimido viene nombrado con el tamaño de las medidas en píxeles, Ej: "portada828x315.psd" y así con los demás. 

Es todo en este post espero les guste sencillo pero útil,

Hasta la próxima,  

martes, 23 de agosto de 2016

Poner aviso de "Uso de cookies" 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.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf" 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,

sábado, 20 de agosto de 2016

Cómo inscribir una cuenta Bancolombia en la sucursal virtual personas para enviar dinero

Es necesario realizar el proceso desde un PC o portátil
 Hoy traigo un post casi que exclusivo para personas de Colombia, como todos sabemos Bancolombia es el banco con más clientes en el país es por ello que tiene la mayor cantidad de plataformas y servicios, entre ellas la más conocida y útil "Sucursal Virtual Personas", así que hoy veremos como se inscribe una cuenta Bancolombia allí.


¿Qué significa Inscribir una cuenta?

Inscribir una cuenta básicamente es la posibilidad de registrar a un amigo, familiar, conocido etc.- que tiene cuenta bancaria en Bancolombia y deseas a esa persona poder enviarle dinero ya sea sólo una vez o de forma constante (Teniendo en cuenta que esto no genera ningún cobro adicional entre cuentas bancolombia sin importar de que ciudad sea).

EL PASO A PASO PARA INSCRIBIR UNA CUENTA...

1. Asumo que ya todos los que leen este post tienen acceso a la Sucursal Virtual y están registrados etc, así que vamos a ella, puedes dar click aquí.

2. Ingresamos de forma normal nuestro usuario y clave y una vez adentro vamos en el menú a Transferencias > Inscripción de cuentas:


3. Ingresan su segunda clave.


4. Nos saldrá un breve formulario a llenar:


- En banco escogemos Bancolombia lógicamente.
- Tipo de cuenta de ahorros la más común es ahorros y corriente en todo caso esta info te la dice la persona a la que deseas inscribir.
- Tipo de fondo de inversión, no se pone nada, se deja así tal cual.
- # de cuenta fácil y esta info te la da la persona que vas a inscribir, pon los números todos pegados sin espacio ej: 0657483393.
- Nombre personalizado, el nombre de la persona a Inscribir, no tiene porque ser completo.
- Tipo de documento, es fácil también lo escogemos según la persona a inscribir.
- # de documento también lógico ya sea # de cédula, TI, extranjería etc.- esa info la da la persona.

5. Confirmamos que la info está bien y damos en Aceptar.

6. Y listo al final nos sale un texto más o menos similar al siguiente:

Ya queda sólo debemos esperar una hora pasadita y será posible realizar transacciones de forma constante a la persona que inscribimos sin problemas.

Es todo en este post muy fácil de enteder,

Hasta la próxima,

miércoles, 17 de agosto de 2016

Descargar Wallpapers HD Suicide Squad película - Escuadrón Suicida

Un post más en Bloggin Red, pero, en esta ocasión no es ningún tipo de tutorial hoy simplemente vengo a compartir con ustedes algunos Wallpapers HD (En alta definición) de la película del momento Suicide Squad, epero les guste disfrútenlos:

¿Cómo descargarlos? 

Para descargar las imágenes las que desees simplemente haces click derecho sobre ella y la guardas, se te guardará en alta resolución, no te preocupes.

Si quieres descargar todos los Wallpapers en un sólo link al final estará pegado.






















Descargar todo el pack Wallpapers completo en sólo link (CLICK AQUI)

viernes, 12 de agosto de 2016

Como centrar cabecera, header o logo en blog de blogger

Muchos de nosotros al tener nuestro blog por algún motivo hemos querido centrar un logo o todo el contenido de cabecera en Blogger, la búsqueda de ello puede hacer tediosa si no se sabe bien como se hace, pero, hoy en Bloggin Red te explicaré como lograrlo en unos breves pasos.


Muy bien vamos a lo que vamos:

EL TUTORIAL 

1. Lo primero será ir a nuestro escritorio Blogger luego, Plantilla > Editar HTML.

2. Presionamos (ctrl + f) y buscamos ]]></b:skin>.

3. Justo encima de lo que buscamos pegaremos el siguiente código:
.header .widget {
 text-align:center;}
.header img {margin:0 auto;}
Y listo con este sencillo paso a paso hemos logrado el objetivo de centrar nuestra cabecera en nuestro de blog de blogger.

Si tienes dudas puedes comentar, no olvides que puedes seguir el blog en redes sociales.

Es todo hasta la próxima,

martes, 2 de agosto de 2016

Gadget que muestra todas las entradas resumidas a un lado Blogger

Un post más en Bloggin Red vamos hoy presentaré un interesante gadget que muestra todas las entradas de nuestro blog a un costado, es decir, en la Sidebar de nuestro sitio.

El efecto en sí es algo básico y fácil con un simple hover que cambia al pasar el mouse por alguna entrada en imagen lo puedes ver al costado izquierdo <--- , o sí lo deseas y gustas de un DEMO en vivo:

http://blogginpruebastres.blogspot.com.co/ 
¿Genial no? Para incorporarlo en nuestro blog no hace falta hacer mayor cosa que copiar todo un código en el lugar correcto.

El tutorial 

1. Lo primero será ir a nuestro escritorio Blogger y luego vamos a Diseño.

2. Añadimos un gadget y allí seleccionamos "HTML / JavaScript". 







3. Ahora allín en dicho espacio pegaremos el siguiente código completo sin omitir nada: 
<style>#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px;transition: all 0.25s linear 0s; border-radius:10px}
.mas-elemen img{background:white;padding:4px;float:left;height:70px;margin-right:8px;width:70px; border-radius:10px;}
.mas-elemen h6,.mas-elemen h6 a{font-size:10px!important;margin:0;color:#111;font-family: "Verdana","Arial";}
.mas-elemen:hover{background-color:#81F79F;}
.mas-elemen p{font:12px PT Sans Narrow;text-align:justify;color:black;line-height:14px;margin:5px 0;font-family: "Open Sans","Tahoma","Verdana","Arial", sans-serif;}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#848484 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important} </style>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 6;
var startfeed = 0;
var urlblog = "http://tublog.blogspot.com";
var charac = 50;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'> ◄Anterior</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Anterior</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Próximo ► </a>";
} else {
showblogfeed += "<span class='noactived next'>Próximo ► </span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Inicio</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
Muy bien una vez puesto vamos a ver como se personaliza.

Personalización

- En color naranja tenemos la cantidad de entradas que se van a ver por cada mini página en el gadget.

-En azul tenemos que poner la dirección de nuestro blog de blogger, solamente lo azul tan cual. 

- En verde la cantidad de carácteres que llevará el breve resumen. 

Con estas sencillas modificaciones sólo queda guardar y visualizar en tu blog, recuerda si dominas CSS podrás hacer las modificaciones que desees a decisión y gusto tuyo.

Es todo hasta la próxima,

SÍGUENOS EN: