Código, Web y SEO

miércoles, 21 de septiembre de 2016

Poner pestañas (tabs) CSS en blog de blogger - multiventanas en una entrada

Un nuevo post, hoy vamos a ver como incoporar en nuestro blog o cualquier web plataforma múltiples pestañas para mostrar contenido, es decir, pestañas o tabs con efecto CSS para darle un toque más moderno.

Algo así se ve...
 Pero bueno como con la imagen anterior no es suficiente veamos un demo:

http://www.blogginred.com/p/blog-page.html#.V-LZAK1DQ5c

¿Genial no? vamos a agregarlo entonces:

EL TUTORIAL...

1. Lo primero será saber donde queremos pegar las pestañas, recuerda que lo puedes pegar en (EL HTML de una entrada, Gadget HTML, Directamente en la plantilla código). 

2. Decidido donde se va pegar, copiamos el siguiente código completo tal cuál:
<div id="contenedor">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Pestaña1</label>
  
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Pestaña2</label>
  
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Pestaña3</label>
  
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Pestaña4</label>
                          
    <div class="content">
        <div class="content-1">
            Contenido1
        </div>
        <div class="content-2">
            Contenido2
        </div>
        <div class="content-3">
            Contenido3
        </div>
        <div class="content-4">
            Contenido4
        </div>
    </div>
</div>

<style>#contenedor {
    margin: 40px auto;
    width: 750px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#contenedor input {
height: 32px;
visibility: hidden;
}

#contenedor label {
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 40px;
height: 40px;
padding: 0 20px;
display: block;
color: #888;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #eee;  /* Fondo de las pestañas */
margin-right: 5px;
}

#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#contenedor input:checked + label {
background: #FFDA91;  /* Fondo de las pestañas al presionar */
color: #444; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 45px;
height: 45px;
position: relative;
top: -5px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}

.content {
background: #FFDA91;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 0 5px 5px 5px;
}

.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}

#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
} </style>

3. Guarda y listo este se debe visualziar sin problema alguno tal cual como en el demo.

Explicación de colores 

En color ROJO está el nombre de las pestañas, ponle el de tu gusto y queda.

- En color  AZUL tenemos el contenido de cada pestaña respectivamente allí podremos poner más código HTML, imágenes, vídeos etc.- "Cuestión de imaginación". 

-  En color VERDE tenemos los respectivos comentarios que señalan en el código CSS las modificaciones para color de nuestras pestañas y otras. 

Hecho esto ya quedó el truco muy fácil y breve, espero les guste.

Hasta la próxima, 

miércoles, 14 de septiembre de 2016

Poner - Colocar un botón flotante en blog de Blogger

Un post breve, directo y al grano, vamos a ver como podemos fijar un botón, elemento o texto etc.-directo y muy sencillo vamos a ello.

 Veamos un breve demo:

http://www.aseovil.com/
 
 EL TUTORIAL PARA  BLOGGER

1. Lo primero será ir a "Diseño > Añadir un Gadget > HTML/JavaScript".

2. Allí pegaremos el siguiente código:
<a class='boton' href='LINK CLICK' ><img src='link-imagen-boton' border="0"/></a>

<style>.boton {
    display:scroll;
        position:fixed;
        bottom:320px;
        right:0px;
} </style>
 3. Guardamos y listo, pero, veamos las modificaciones a hacer.

EXPLICACIÓN POR COLORES   

- En color rojo pondremos el link de nuestro botón creado o bajado de internet que quedará fijo.

- En color azul se reemplaza por el link final que llevará cuando el usuario de click y lo ponga en dicho sitio.

Con esas simples modificaciones quedaremos a gusto del funcionamiento del botón sin problema alguno.

Y listo con estas modificaciones queda elemental si alguno requiere una explicación extra o tiene alguna duda, pueden comentar.

Hasta la próxima,
  

domingo, 11 de septiembre de 2016

Permission marketing la alternativa legal al SPAM



Cada día se envían millones de correos electrónicos en busca de algo de atención. Una parte de ellos se hace legalmente, es decir, con el consentimiento de las personas que lo reciben. La otra parte no lo tiene por lo que se convierten automáticamente en spam. Enviar correos masivos sin permiso de los receptores es una mala práctica, además de ilegal según la normativa europea.
En 1999, Seth Godin acuñó el término de permission marketing para referirse a aquellas comunicaciones o campañas que el usuario sí quiere recibir de empresas. Queda claro con su definición que es lo opuesto al spam o correo no deseado. Así, el permission email marketing es una manera legal de enviar información comercial porque el receptor ha dado su consentimiento explícito para recibirla. 


El permission marketing surge como contraposición a la interrupción de anuncios que suelen ser poco interesantes para el usuario por ser masivos y poco exclusivos. Su objetivo es todo lo contrario: centrarse en rentabilizar únicamente a aquellos usuarios que demuestran interés por nuestras comunicaciones y a los que podemos acercarnos de manera más personal.


De hecho, la palabra que utiliza Godin es ‘inversión’: conseguir el permiso de los usuarios para enviarles emails es una inversión que hay que ver como una forma de conseguir clientes potenciales. Se trata de empezar una relación a más largo plazo con ellos y no tanto buscar una conversión rápida como podría hacerse con el spam. Con el tiempo, la confianza aumentará y con ella las probabilidades de compra. No en vano, el subtítulo de su libro “Permission Marketing” es “convertir a extraños en amigos y a los amigos en clientes”.

Llevar a la práctica el permission marketing depende básicamente de la forma en que se incorporen los suscriptores a la base de datos o, en otras palabras, de la configuración del formulario de contacto o de alta a la newsletter. Si importamos una lista sin que esas personas hayan dado su consentimiento, estaremos haciendo spam. Si, por el contrario, utilizamos una suscripción por doble opt-in nos aseguraremos de que los suscriptores quieren realmente recibir nuestros mensajes.


Para ser aún más transparentes y cumplir con la normativa, se añade un check box que el usuario ha de marcar para aceptar la política de privacidad. En esa página, conviene incluir una mención al tratamiento que se hará de sus datos de manera que, por ejemplo, se advierta que se podrán enviar mensajes comerciales propios además de cumplir con el motivo del propio formulario (pedir información, comprar un producto…).


Con el permiso explícito del suscriptor, los mensajes informativos cuidan los intereses de la marca ya que el spam puede dañar la reputación y provocar denuncias de usuarios descontentos con el uso de sus datos.

domingo, 4 de septiembre de 2016

Poner sencillo pero elegante slider de imágenes en blogger con JavaScript

Tomado gentilmente de zblogger
Un post más en Bloggin Red últimamente en comentarios variados han pedidos sliders de todo tipo, así que hoy, traigo uno nuevo útil para quién lo  vea bonito y de agrado para implementarlo en su blog pues al final un slider hace la misma función.
Pero vamos a ver primero el demo a ver ¿Qué tal? y si ustedes deciden implementarlo:
http://bloggin-prueba.blogspot.com.co/2016/09/mcis-display-none-sliderframe-position.html
Cuando ingreses al demo baja un poco con el scroll el 2 slider es

¿Te gustó? muy bien entonces vamos a ponerlo, es muy sencillo:

EL TUTORIAL... 

1. Para poner el slider en nuestro blog de blogger iremos a diseño > Añadir un Gadget > HTML/JavaScript.

2. Allí en dicho espacio pegaremos lo siguiente, el siguiente código:
<style type="text/css">
    #mcis {
        display: none;
    }
    #sliderFrame {
        position: relative;
        width: 500px;
        margin: 0 auto;
        margin-bottom:35px;
        border:5px solid #000;
    }
    #ribbon {
        width: 111px;
        height: 111px;
        position: absolute;
        top: -4px;
        left: -4px;
        background: url(https://lh3.googleusercontent.com/-lOmnjBSMK0E/Ufo5ZIu8GNI/AAAAAAAABEU/vrIaUC-urzI/s109-no/ribbon.png) no-repeat;
        z-index: 7;
    }
    #slider {
        width: 500px;
        height: 250px;
        background: #fff url(https://lh6.googleusercontent.com/-V7xLkgfh1O8/Ufo_dpsg85I/AAAAAAAABF0/pFT5oNtt_2w/s32-no/loading.gif) no-repeat 50% 50%;
        position: relative;
        margin: 0 auto;
        box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
        position: absolute;
        border: none;
        display: none;
    }
    #slider a.imgLink {
        z-index: 2;
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        border: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    div.mc-caption-bg, div.mc-caption-bg2 {
        position: absolute;
        width: 100%;
        height: auto;
        padding: 0;
        left: 0px;
        bottom: 0px;
        z-index: 3;
        overflow: hidden;
        font-size: 0;
    }
    div.mc-caption-bg {
        background-color: black;
    }
    div.mc-caption {
        font: bold 14px/20px Arial;
        color: #EEE;
        z-index: 4;
        padding: 10px 0;
        text-align: center;
    }
    div.mc-caption a {
        color: #FB0;
    }
    div.mc-caption a:hover {
        color: #DA0;
    }
    div.navBulletsWrapper {
        top: 265px;
        left: 190px;
        width: 150px;
        background: none;
        padding-left: 20px;
        position: relative;
        z-index: 5;
        cursor: pointer;
    }
    div.navBulletsWrapper div {
        width: 11px;
        height: 11px;
        background: transparent url(https://lh6.googleusercontent.com/-PrCS8GOrP-s/Ufo5rj88CbI/AAAAAAAABEk/mLp19FTjxQI/w11-h22-no/bullet.png) no-repeat 0 0;
        float: left;
        overflow: hidden;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 11px;
        _position: relative;
    }
    div.navBulletsWrapper div.active {
        background-position: 0 -11px;
    }
    #slider {
        transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
</style>


<script src="https://googledrive.com/host/0B-WopI-jeOOsT1NPRC1acHpxWmc/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="ribbon"></div>
    <div id="slider">
<a href="LINKDETUBLOG"><img src="https://lh4.googleusercontent.com/-NZBdSjNnq8Y/Ufo7i20BECI/AAAAAAAABFE/WmPQj-wHtvM/w500-h250-no/1.jpg" alt="Slider de Imágenes"/></a> 
<a href="
LINKDETUBLOG"><img src="https://lh6.googleusercontent.com/-k-23xqeuGoA/Ufo7i5DJZII/AAAAAAAABFA/flwryNHakH0/w500-h250-no/2.jpg" alt="Bloggin Red"/></a> 
<a href="
LINKDETUBLOG"><img src="https://lh3.googleusercontent.com/--wowk_eCjQ0/Ufo7jGqnu2I/AAAAAAAABFQ/bWFnl2dQrwQ/w500-h250-no/3.jpg" alt="Hecho con JavaScript"/></a> 
<a href="
LINKDETUBLOG"><img src="https://lh5.googleusercontent.com/-83H2OEWPumU/Ufo7jyUMyqI/AAAAAAAABFU/PMBkHwj6JDk/w500-h250-no/4.jpg" alt="Aquí puedes poner el texto que quieras"/></a> 
<a href="
LINKDETUBLOG"><img src="https://lh4.googleusercontent.com/-ROPTHF1Uh_s/Ufo7kXzlNgI/AAAAAAAABFc/bDoWeJTe8Ys/w500-h250-no/5.jpg" alt="http://blogginred.com"/></a>
    </div>
</div>
3. Listo con ello podemos guardar y probar que se visualice y trabaje correctamente.

Ahora vamos a modificar imágenes, link y otras cosas demás para tener en cuenta, vamos con la configuración del slider ya integrado.

EXPLICACIÓN DE COLORES:

- Lo que está en color azul es el link del script que básicamente hace que tu slider sea un slider, ahora bien, es recomendable que cargues tu propio script en otro lugar o nube esto por efectos de rendimiento y carga de tu sitio, imagina que usas este mismo tal cual y otras 100 personas lo usan para sus blogs su uso se hace poco efectivo entre más gente llegue a este tutorial y lo copie tal cual, así que descargalo (click aquí) y para aprender como subirlo a dropbox y usarlo mira este post (click aquí).

- En color naranja tenemos los link de las imágenes del slider pon las tuyas reemplazando el link y listo.

- En color rojo tenemos la descripción que sale debajo de cada imagen en el slider reemplaza por algo que sea de tu gusto y queda.

- En color verde tenemos los links a los que lleva cada imagen cuando alguien da click sobre esa imagen del slider cambialos por los de tu gusto y queda.

¡Listo! prácticamente con ello ya queda el Slider, es importante tener en cuenta cada modificación explicada por color anteriormente.

Es todo en este breve post, si tienes dudas comenta.

Hasta la próxima,

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ÍGUENOS EN: