El deslizador Nivo es uno de los mejores deslizadores de contenido jquery de la historia. Viene con 3 temas Predeterminado, Orman y Pascal y hoy daremos un tutorial sobre el tema Pascal.
La razón detrás de la selección del control deslizante Nivo sobre el otro es que tiene 16 efectos de transición únicos Eso hace que sea la diapositiva más hermosa del mundo.
Las diapositivas de la imagen aparecen en un fondo elegante con una "Cinta Presentada" en la esquina superior izquierda, puede agregar manualmente su propia imagen reemplazando la URL de la imagen de la Cinta con la suya. También puede agregar leyendas y enlaces a sus diapositivas. La configuración del control deslizante es muy fácil, solo tiene que poner algunos códigos en sus plantillas. Acceda al tutorial, primero vea la demostración.
¿Cómo agregar el control deslizante de Nivo al blog de Blogger?
Vaya a Blogger Vamos a "Plantilla"
Como siempre, haga una copia de seguridad de su plantilla.
Abre "Editar HTLM"
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal
y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.
]]></b:skin>
agrega e el código de abajo justo arriba.
/*Start Nivo Slider Css helperblogger.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - Rahul Ippar @ helperblogger.com
*
* March 2010
*/
/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* Caption styles */
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
/* Overridden by captionOpacity setting */
width: 100%;
z-index: 8;
}
.nivo-caption p {
padding: 5px;
margin: 0;
}
.nivo-caption a {
display: inline !important;
}
.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}
.nivo-prevNav {
left: 0px;
}
.nivo-nextNav {
right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 9;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/
.theme-pascal.slider-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sdoULrtY-A5alBpkWhpFHnuk_Hn2B4dzzpshkDrQaqY-q3FyotzPua_Pk7RL7LyKrs1ND4OYM4CFOafbHHMZYlcNWUdrJlmv3rY9RxUtGiN3xQJGga9NLSnG4AL4xgQ2EyDwK0S1Egas/s1600/helperblogger-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}
.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPty3Awrp5FGxtFI9LlBBkrAqGnaw7PzcQFFiaQXSHIGGVTGHHF_30gXk4kjuV7r0hCN_mWoaNlHCaVPQywxfbqskW8G3rZNInxuMdiGprFwO_dmd0gKpXDL_nIpXkAX1YeiiMEZjQupv/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border: 0;
display: block;
}
.theme-pascal .nivo-controlNav {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQyN334rx_0DmRI0cQ3uLQQDSk7JGy9MG2mAgsQNXj4VDUAyC_iYCvRyipzQPC_k61Ycg8Bi3ktWK5RHHFqEXaEBCT5kh8fklSFGaeE0eWezdqh4Q9aRw0zWDFo-prRznD4p-Z9q_VIke/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}
.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVJ51mpU4n3Rh_6OLGDipoowCNodDve_U-gN-VHBq5w1tvO_8noIP7OnSvReDOsoVOwTuzFjA29lOpj8aDeCsVosfSIv17Kvcrx8tgSSFx7XpyZhxnO_kAV1AoMs2ryUryqMk6Mfv0SsO/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}
.theme-pascal .nivo-directionNav a {
display: none;
}
.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}
.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .ribbon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFkXKl1Qm8whRfQ-qIlz1pyCYgGqVWP4SFNoIkwY_dSV7idCZWm6ugTtbAVQfSwuwkBHmOgVj4eUuk4vtbytJCkbBgKUG22Dnhzg8AOAVl01j5JfIwFIvdbzjpB1ddOIonZ1fugNkWu12/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css helperblogger.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - Rahul Ippar @ helperblogger.com
*
* March 2010
*/
/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* Caption styles */
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
/* Overridden by captionOpacity setting */
width: 100%;
z-index: 8;
}
.nivo-caption p {
padding: 5px;
margin: 0;
}
.nivo-caption a {
display: inline !important;
}
.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}
.nivo-prevNav {
left: 0px;
}
.nivo-nextNav {
right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 9;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/
.theme-pascal.slider-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sdoULrtY-A5alBpkWhpFHnuk_Hn2B4dzzpshkDrQaqY-q3FyotzPua_Pk7RL7LyKrs1ND4OYM4CFOafbHHMZYlcNWUdrJlmv3rY9RxUtGiN3xQJGga9NLSnG4AL4xgQ2EyDwK0S1Egas/s1600/helperblogger-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}
.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPty3Awrp5FGxtFI9LlBBkrAqGnaw7PzcQFFiaQXSHIGGVTGHHF_30gXk4kjuV7r0hCN_mWoaNlHCaVPQywxfbqskW8G3rZNInxuMdiGprFwO_dmd0gKpXDL_nIpXkAX1YeiiMEZjQupv/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border: 0;
display: block;
}
.theme-pascal .nivo-controlNav {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQyN334rx_0DmRI0cQ3uLQQDSk7JGy9MG2mAgsQNXj4VDUAyC_iYCvRyipzQPC_k61Ycg8Bi3ktWK5RHHFqEXaEBCT5kh8fklSFGaeE0eWezdqh4Q9aRw0zWDFo-prRznD4p-Z9q_VIke/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}
.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVJ51mpU4n3Rh_6OLGDipoowCNodDve_U-gN-VHBq5w1tvO_8noIP7OnSvReDOsoVOwTuzFjA29lOpj8aDeCsVosfSIv17Kvcrx8tgSSFx7XpyZhxnO_kAV1AoMs2ryUryqMk6Mfv0SsO/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}
.theme-pascal .nivo-directionNav a {
display: none;
}
.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}
.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .ribbon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFkXKl1Qm8whRfQ-qIlz1pyCYgGqVWP4SFNoIkwY_dSV7idCZWm6ugTtbAVQfSwuwkBHmOgVj4eUuk4vtbytJCkbBgKUG22Dnhzg8AOAVl01j5JfIwFIvdbzjpB1ddOIonZ1fugNkWu12/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css helperblogger.com*/
Ahora encuentra el código a continuación en tu plantilla
</head>
Agrega el código de abajo justo encima.
<!-- Nivo Slider Scripts Starts-->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://helperblogger.ucoz.com/code/jquery.nivo.slider.pack.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Nivo Slider Script Ends-->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://helperblogger.ucoz.com/code/jquery.nivo.slider.pack.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Nivo Slider Script Ends-->
Ahora hemos implementado el script y CSS de Nivo Slider en nuestro blog. Agreguemos las diapositivas.
Vaya al diseño añade un Gadget y añade el código debajo de la sección del encabezado
<div class="slider-wrapper theme-pascal">
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
<a href="TU ENLACE AQUÍ"><img src="IMAGE URL AQUÍ" alt="" title=" AGREGAR SUBTÍTULO AQUÍ HERE"/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>
Ahora reemplaza TU ENLACE AQUÍ con tu enlace.
Reemplaza la URL de IMAGEN AQUÍ con tu URL de imagen.
Reemplazar AGREGAR SUBTÍTULO AQUÍ con tu propio título
18-11-2018
Fuente:
Publicado por:
0 comentarios: