Código, Web y SEO

martes, 23 de agosto de 2016

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

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,

domingo, 17 de julio de 2016

Poner Botones Ir arriba e Ir abajo en blog de blogger con Jquery

Tomado gentilmente de Ciudad Blogger
Un post más hoy aprenderemos como poner los botones "Ir arriba" e "Ir abajo" en nuesto blog de blogger, la colocación de los mismos requiere de unos pocos pasos y nada del otro mundo para complicarnos.

 

Un demo de los botones lo podrás ver justo en este blog, en la parte izquierda inferior, así que si ya los viste vamos a ver como se implementan:

EL TUTORIAL 

1. Vamos a nuestro escritorio blogger, luego, edición HTML y buscamos ]]></b:skin> justo antes de él, pegaremos lo siguiente:
/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(http://lh6.googleusercontent.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(http://lh6.googleusercontent.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px;
left:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
 2. Lo siguiente será buscar </body> y justo antes pegaremos lo siguiente:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
Y ya estuvo sólo queda guardar nuestra plantilla y verificar que todo salga bien si en caso tal no se llegase a ver el efecto en corrida a lo mejor el problema radique en la versión de JQUERY que usas para ello pasate por este post. Para dar con una solución.

Lo que se encuentra en naranja en el primer código son los comentarios que te indican los valores que puedes cambiar a tu gusto para estos botones.

Es todo hasta la próxima,

jueves, 16 de junio de 2016

Cómo registrar el imei de tu celular en tigo colombia para que no te bloqueen

Este post tendrá vigencia hasta el 31 de julio de este año
Hoy traigo un nuevo tutorial un tanto específico para la gente de Colombia, en esta guía encontrarás un tutorial completo de como registar tu equipo celular o smartphone por imei y línea telefónica en esta caso por medio del operador TIGO para que no nos bloqueen la señal y mucho menos el celular.


Vamos a ver como se hace: 
  
1. Lo primero será ingresar a la siguiente página web. clikc aquí 

2. Allí vamos a dar click en Registra tu equipo:


3. Allí nos saldrá otra ventana donde pondrán su línea telefónica (ojo tiene que ser TIGO) tal cual lo normal tu número como te lo sabes, luego, das en enviar:


4. Al dar en enviar unos segundos más tarde en unestro celular debe llegar un código en mensaje de texto algo así:


5. El código que les llegue lo introducen en la página web de nuevo justo en este campo y daremos en siguiente:


6. Luego, deberás confirmar tu equipo dónde debes determinar la procedencia de tu equipo puede ser "Nacional" o "internacional" si lo compraste en Colombia es lógicamente nacional verifica el número de línea y el código IMEI de tu celular:


7. un paso importante para poder continuar es que anexes la factura de compra de tu equipo celular, para ello si la conservas la podrás escanear o subirla como adjunto tal como allí sale, sino, baja el siguiente documento imprímelo, llenalo y luego escanealo (click aquí para ver el documento).

 
8. En este paso es fácil verifica tus datos básicos.

9. Te pedirá actualización de datos ajustalos correctamente:

Y listo al dar en siguiente te dirá que no debes preocuparte más por el registro del equipo. Te queda esperar.

¿Cómo se sí mi celular quedó registrado? 

En este caso Tigo pasadas algunas horas, te envía otro mensaje ddónde te notifica que el celular ya se encuentra registrado y puede ser usado sin problemas. Con eso estarás hecho.

Espero te sirva el post, es todo.

Hasta la próxima,
 

lunes, 13 de junio de 2016

¿Cómo hacer que Snapchat no consuma tantos datos móviles? Breve tutorial

Un post más, uno muy sencillo y útil para aquel que no sepa como lograrlo, vamos a reducir el consumo de datos móviles de Snapchat en nuestro celular. En verdad es bastante sencillo basta con hacer algunos 3 toques y sale, veamos.

¿Por qué Snapchat consume tantos datos?

Una pregunta que a lo mejor muchos de nosotros nos hagamos, pero, lo más lógico es que al ser una App muy vinculada a la multimedia (vídeo, fotos) su consumo de datos será grande ya que por cada vídeo que veas esto irá sumando en su gasto.

¿Cómo reducirlos desde la misma App?

En Snapchat tenemos la opción de poner en modo Viajero o modo viaje nuestra App para reducir al máximo el consumo de datos en nuestro celular esto se hace de la siguiente forma: 

1. Abrimo Snapchat, vamos a nuestro perfil y damos en la herramienta.


2. Una vez allí en ajustes buscamos donde diga administrar y damos allí:


3. Por último al dar allí nos saldrá la opción que en principio se dijo habilitamos "Modo de viaje":


Y listo con ello se terminará el objetivo reducir datos como vemos es muy fácil, la reducción de datos en este caso se hace simplemente no cargando las historias por defecto como hace siempre sino, que sólo carga la historia que queremos ver ¡Muy fácil!

Es todo en este post, hasta la próxima.

jueves, 2 de junio de 2016

Poner posts o artículos más recientes con miniatura y efecto de acercamiento en blogger

Tomado gentilmente de AllBloggerTricks
 Aquí estamos actualizando un post que ha muerto por culpa de la caída de un script lo que antes teníamos era un slider que ahora no funciona, pero, este nuevo muestreo de entradas o posts recientes en blogger con miniatura será más genial. 

 Para ver el demo no hace falta ir a otro sitio aquí lo tienen funcionando:


Así que ¿Te gustó? veamos como se pone:

1. Lo primero será ir a nuestro escritorio blogger allí vamos a Diseño > añadir un gadget > HTML/Javascript.

2. Luego allí copiamos el siguiente código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Últimos artículos",       // Titulo del gadget
    numposts    = 14,      // Numero de posts a mostrar
    numchar     = 200,      // Numero de caracteres a mostrar
    rcFadeSpeed = 600,      // Velocidad
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // Defecto imagen si el post no tiene
    blogURL     = "http://tublogaqui.blogspot.com/";       // URL de tu blog
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-recent-posts.js" type="text/javascript"></script>
Ahora bien vamos a modificar por la dirección de nuestro blog lo que está en color azul, con eso ya podríamos guardar todo y salir sin tanto complique sin embargo dejamos aclaración de lo demás que está resaltado.

- En color naranja está el SCRIPT que lo controla todo, está alojado en un sitio de terceros este se satura más a medida que cada vez alguien implemente este mismo código por ende puedes descargarlo y alojarlo por tu cuenta en donde quieras. click aquí para descargar.

- En color rojo tenemos el link de la URL de la imagen que va por defecto cuando un post o entreda reciente no lleva imagen, puedes cambiarla por una de tu gusto. 

- Lo que tenemos en verde claro, especifica datos como velocidad, # de carácteres etc, modificando lo que está en verde lo podrás configurar a tu gusto.


Y listo hasta aquí todo está hecho, como ven muy fácil de entender y todo comentado para modificar.

Hasta la próxima BloggeRs,

domingo, 29 de mayo de 2016

Plantilla completamente en blanco - vacía para blog de Blogger

Un post más en BR, en esta ocasión es un título muy selectivo ya que si llegas aquí es porque deseas diseñar algo en blogger con una plantilla partiendo de ella en un vacío total. -jaja- muchos dirán que es inútil una plantilla de blogger vacía en blanco sin nada, pero, la verdad es.


¿Para qué me puede servir una plantilla vacía de blogger?

- Para partir de un diseño desde cero.
- Para realizar plantillas estáticas como "En construcción" o "En mantenimiento".
- Para Landing Page.

Pero a la final la utilidad se la damos cada uno de nosotros.

LA PLANTILLA

La plantilla no amerita descargarla ya que son unas pocas líneas de código, que para poner basta con ir: Plantilla > Editar HTML, allí damos click derecho seleccionar todo, borramos y pegamos lo siguiente:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
         
    ]]></b:skin>
  </head>

  <body>
    <b:section id='main' showaddelement='yes'/> 
  </body>
</html>

Y sale, sólo queda guardar los cambios efectuados y al ver el PREVIEW de nuestra plantilla el blog deberá aparecer totalmente en blanco, listo para moldear con HTML, CSS y demás lenguajes.

Es todo hasta la próxima,







SÍGUENOS EN: