Añadir un slider a mi blog de Blogger

Hoy nos trae el mostraros como añadir un slider a nuestro blog en Blogger.

En primer lugar, aclarar que es un slider, para ello pueden visitar el artículo de la Wikipedia.

En segundo lugar he buscado una plantilla en Blogger que se preste a incluir un slider, hecho esto vayamos a al trabajo.

En el menú izquierdo, haga clic en la opción Diseño, le mostrará todas las áreas que incluye su blog haga clic en la la opción Añadir un gadget, da lo mismo donde se encuentre, luego puede arrastrar lo que ha creado a otra zona.

Le mostrará el siguiente cuadro de diálogo, haga clic en la opción HTML/Javascript.

<div id="slider-wrapper">
  <div class="inner-wrapper">
    <input checked type="radio" name="slide" class="control" id="Slide1" />
    <label for="Slide1" id="s1"></label>
    <input type="radio" name="slide" class="control" id="Slide2" />
    <label for="Slide2" id="s2"></label>
    <input type="radio" name="slide" class="control" id="Slide3" />
    <label for="Slide3" id="s3"></label>
    <input type="radio" name="slide" class="control" id="Slide4" />
    <label for="Slide4" id="s4"></label>
    <div class="overflow-wrapper">
      <a class="slide" href=""><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" /></a>
      <a class="slide" href=""><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" /></a>
      <a class="slide" href=""><img src="https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295431_960_720.jpg" /></a>
      <a class="slide" href=""><img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg" /></a>
    </div>
  </div>
</div>

Observe las instrucciones href, debe modificar estas con la dirección o URL de las imágenes que usted quiera que aparezcan.
Instrucción href, ver página.

Incluya un título, copie y pegue el siguiente código HTML 

Como he creado mi gadget en un área que no es la que yo deseaba, haga clic sobre la barra izquierda que tiene el gadget con tres puntos verticales,

Arrástrelo hacia la zona que usted desee, observará que se abre una zona para incluirlo.

Como en la zona que he incluido mi gadget hay otra sección que no quiero que aparezca, no la voy a eliminar, por si en el futuro me hace falta, la voy a deshabilitar, haga clic en el lápiz que se encuentra a la derecha de la zona que quiere deshabilitar.

Le mostrará un cuadro de diálogo como el siguiente, haga clic en la casilla Visible, hecho esto guarde los cambios.

Observará que el icono del ojo que aparece en el área deshabilitada, se ha modificado a un icono menos nítido.

Seleccione la opción Avanzado > Añadir CSS. Copie este código  y lo pega en el cuadro de diálogo que muesrta, el código no es mio, lo iremos perfeccionando en capítulos siguientes.

#slider-wrapper {
  width: 940px;
  height: 470px;
  margin: 50px auto;
  position: relative;
  margin-bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

#s1 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s2 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -12px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s3 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 12px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s4 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
  opacity: .50;
}

.inner-wrapper {
  width: 940px;
  height: 470px;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
}

.control {
  display: none;
}

#Slide1:checked ~ .overflow-wrapper {
  margin-left: 0%;
}

#Slide2:checked ~ .overflow-wrapper {
  margin-left: -100%;
}

#Slide3:checked ~ .overflow-wrapper {
  margin-left: -200%;
}

#Slide4:checked ~ .overflow-wrapper {
  margin-left: -300%;
}

#Slide1:checked + #s1 {
  opacity: 1;
}

#Slide2:checked + #s2 {
  opacity: 1;
}

#Slide3:checked + #s3 {
  opacity: 1;
}

#Slide4:checked + #s4 {
  opacity: 1;
}

.overflow-wrapper {
  width: 400%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.slide img {
  width: 25%;
  float: left;
}

Guarde el coódigo CSS y visualice los resultados.

Si te gusto, ¡¡comparte!!, y no te olvides que puedes seguirnos en nuestras Redes Sociales.

Te puede interesar

Combinar pintar rutas con otras herramientas en Gimp	Crear un menú desplegable en Blogger	¿Sabes cómo crear una foto 3D para Facebook?, en este artículo te lo mostramos

Leer más

Crear un menú desplegable en Blogger

Vamos a dedicar este capítulo a atender a una usuaria que su intención es el diseño de un menú con opciones desplegables en Blogger.

Para ello, he creado un blog de pruebas, he seleccionado una plantilla de Blogger que viene predefinida, con un menú en la parte superior, o con un espacio para situar el menú.

Para comenzar vaya a la opción Diseño del menú que se encuentra en la izquierda de nuestro área de trabajo.

Localice la sección donde va a situa el menú, haga clic en la opción Añadir un gadget.

Le mostrará el siguiente cuadro de diálogo, en este, seleccione  la opción HTML/JavaScript.

Una vez nos muestra el cuadro de diálogo, introduzca el  título, copie y pegue el siguiente código escrito en lenguaje HTML:

<div id="navmenu">
<div id="navmenu">
<div id="navmenuleft">
<ul id="nav">
<li><a href="urldestino">opcion1</a></li>
<li>
<li><a href="urldestino">opcion2</a></li>
<li>
<a href="#">opcion3</a>
<ul>
<li><a href="urldestino">opcion31</a></li>
<li><a href="urldestino">opcion32</a></li>
</ul>
</li>
<li>
<a href="#">opcion4</a>
<ul>
<li><a href="urldestino">opcion41</a></li>
<li><a href="urldestino">opcion42</a></li>
</ul>
</li>
<li><a href="urldestino">opcion5</a></li>
</li>
<li><a href="urldestino">opcion6</a></li>
</ul>
</div>
</div>

En caso que no sepas programar te facilitarán un poco las siguientes páginas:

Instrucción href, ver página.
Instrucción ul y li, ver página.

Haga clic en el botón Guardar.

Para terminar necesitamos introducir código e lenguaje CSS. Haga clic en el menú lateral de la izquierda, en la opción Tema. Haga clic en el botón Personalizar.

Seleccione la opción Avanzado > Añadir CSS. Copie este código  y lo pega en el cuadro de diálogo que muesrta, el código no es mio, lo iremos perfeccionando en capítulos siguientes.

.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #4a81d3; text-align: center !important;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #241aad; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 0px solid #437b7e; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 0px solid #437b7e; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #437b7e; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 980px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 3px ; /*alto del fondo del menu*/
background:#64b6bb;/*color de fondo del menú completo*/
}
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px ‘Georgia’, Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #0975bd; /* Color de la letra */
text-transform: uppercase;/*poner texto en mayúsculas, sino lo quieres borra esta línea*/
border-left: 0px solid #0e85bd; /* Borde izquierdo de la celda */
border-right: 0px solid #0e85bd; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px arial; /*Tamaño y tipografías de las subpestañas*/
background: #0975bd; /*Color del fondo de las subpestañas*/
border-top:2px solid #0975bd; /*borde superior de las suspestañas, sino lo quieres borra esta línea*/
width: 150px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #0a69a8; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #000000; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }

Sino necesita un manual de lenguaje CSS, aquí se lo dejo, ver manual.
Para modificar los colores, te dejo una página de colores HTML, ver página.

En la parte superior derecha, haga clic en el botón Aplicar al blog. Ya puede probar el resultado.

En principio, solo hay que modificar la parte del código HTML, el código CSS, solo lo modificaremos en cuanto a colores.

Si te gusto, ¡¡comparte!!, y no te olvides que puedes seguirnos en nuestras Redes Sociales.

Te puede interesar

Combinar pintar rutas con otras herramientas en Gimp	Añadir un slider a mi blog de Blogger	¿Sabes cómo crear una foto 3D para Facebook?, en este artículo te lo mostramos

Leer más