Código, Web y Blogs

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, 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://dl.dropboxusercontent.com/s/hzuks7yr9bh4b1y/slider04092016.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,

ESTAMOS EN: