Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

domingo, 25 de mayo de 2014

Cómo configurar Nivo Slider en blogger para que solo aparezca en el homepage (ocultar Nivo Slider)

Uno de los problemas que tenía con Nivo Slider era que se mostraba también cuando quería navegar por etiquetas, lo cual me molestaba mucho. Acá encontré una manera de ocultarlo, o dicho de otro modo, mostrarlo solamente en la página de inicio.

Los créditos son para Spice Up Your Blog

- Ir a blogger, diseño y abrir el gadget en donde pegamos el código para el Nivo Slider. Se abrirá un popup en donde se mostrará el código y una barra de direcciones (la del popup, no la del navegador que queda en segundo plano). Fijarse en la última parte de la dirección de esa barra de direcciones, para saber el nombre del gadget, en mi caso es el HTML4.

- Ya con esa información, vamos a Plantilla, Editar HTML y arriba hay varios botones, click donde dice "Ir a widget" y seleccionar el widget correspondiente al Nivo Slider que averiguamos en el punto anterior, en mi caso es el HTML4. 

- Nos llevará a la parte de la plantilla en donde está el código del Nivo Slider, que comenzará con el código <b:widget>. A la izquierda, donde están los números de línea de la plantilla, hay una flecha negra, clickear ahí para expandir el código y volver a clickear si dentro de ese código hay más flechas negras.

- Con el código ya desplegado, buscar <b:includable id='main'> Hacer un enter para crear un espacio justo debajo, y copiar el siguiente código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

- Luego buscar </b:includable> y justo arriba de él, pegar el siguiente código:

</b:if>

- Guardar.

Listo! Ahora el slider solo se mostrará en el homepage o página de inicio. 
Leer más

Cómo agregar un slider en un blog de blogger (Nivo Slider)

Vaya que mejoran los blogs con un bonito slider. Averigué mucho y luego de muchos intentos fallidos, logré dar con unas buenas instrucciones para instalar Nivo Slider en un blog de blogger. Los créditos son para bloggermentor.com

* Perdón por la desconfiguración de este post, pero el apuro no me permite arreglarlo por ahora

Los pasos son los siguientes:

- Ir a blogger, en la sección Diseño y clickear en Añadir un gadget
- Seleccionar HTML/Javascript
- Copiar el siguiente código

<div id='slider'>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDb37p1X9W7MstmFqFNaQqwVsXa6YttQn9fE7fMaTYuyLRXKcJfWx7iY4Yy9-HEj1IyoAruiYfF5X0EMBF5KPTai0Aw6Hv66tY4UWbsfkCzCjCgigckSsh39so7RJqKquEsqqBKZnvTLA/s1600/toystory.jpg'/>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1m-zdqHVauTFgyGls6_Op0-tao0U3RipFQx9jRQyn9uVFgf01osZIdlppLPSDT1NNfBHpzvGtrQVSMxh5vEtxYIxfj_88VnYtwCTsniPxlhtjhsOk3TFH4yYqmCl9VLwYAcCadkmtGmU/s1600/up.jpg' title='#htmlcaption'/></a>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jmGYbV4mIpXQLjioscf6kwkllgXxcsf1TLQTAEk3FMUFKi91zZKe1tRChNy-MSGfxqTB6VTClSk0ZpTLcL3KqWkh88JpirTFgMkrkGCeBrkNELAPFp1K5-3LqyBSlvulqs0W8iNDF6s/s1600/walle.jpg' title='This is an example of a caption'/>
<a href='http://bloggermentor.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiLJDTonokLls5zfbQf0zxr9-5RT2o8vxJMK11a-2N0vF4DLJBbe7j7DffdokLGKWUXgyERzFc6o3IVXjvAoj_-AwvhWwBhZ5_WXfO8bGHWOafNylDBqQqBcaRZq9zN5XM5FFHWEUj2fw/s1600/nemo.jpg'/>
</div>
<div class='nivo-html-caption' id='htmlcaption'>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href='#'>a link</a>.
</div>

Reemplazar el texto ROJO con tu dirección y reemplazar el texto AMARILLO con tu propio texto personalizado.

- Click en Guardar

Luego,

- Ir a la sección Plantilla, Editar HTML
- Buscar el código ]]></b:skin> (con ctrl+F se facilita la búsqueda dentro de la plantilla)
- Copiar el siguiente código justo arriba de ]]></b:skin>

/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
#slider-wrapper {
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jxOksokL_HVlQ1JwUP-_aVh94JsJaWabUAI8CJeZQdmsrzslPl69kT_Pztjz3JPT8VPQrmY1IAlnhrYz29TMGELKsbmaHuEIrd1DXGGaqd3xtfLtCc8kLOsmkyRiX1EZqiQEImNc9tI/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1vQgJLCc4djA_xqKmVAoNOoa0UVORz8jpKudsedaC8OUkKt44PZHwgIpAWkovKVYaSghHjI2oIrFlXaB2OOS6ABicxxurbxW0dLEEdhhQVfaLtHjBc-KEOibFExXetmBv_HihPE0Eqw/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5w2IzxyEkOZdNG5zusuQxwlJ_osH4wh1Vs00yd75LTKT-z_Dr-mH1oo0b6B2tY9-9O9WUHD24eJHOU6Bra_IGU2KdIomSpYZPhldWXoNa5CmnEZpfp64lEhFy8KBJrJ0wsrVc-CY2PQ/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNT055MtKwJkKYbzvAatxeSVSc49xkgJJu_LsG0Chhh1tkb18nF0usAyqSrRBto4MDgrmhsv3XD1lCYEqZdbiglgoD-UdpCJW_ofRL0UBIwahJ0hV-Mvts1QtLUVeDXWmGv8NkcgQlpc/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.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;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNT055MtKwJkKYbzvAatxeSVSc49xkgJJu_LsG0Chhh1tkb18nF0usAyqSrRBto4MDgrmhsv3XD1lCYEqZdbiglgoD-UdpCJW_ofRL0UBIwahJ0hV-Mvts1QtLUVeDXWmGv8NkcgQlpc/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* 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;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5w2IzxyEkOZdNG5zusuQxwlJ_osH4wh1Vs00yd75LTKT-z_Dr-mH1oo0b6B2tY9-9O9WUHD24eJHOU6Bra_IGU2KdIomSpYZPhldWXoNa5CmnEZpfp64lEhFy8KBJrJ0wsrVc-CY2PQ/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

Luego,

- Buscar </head>
- Copiar el siguiente código justo arriba de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
}); 
</script> 
- Guardar

Y listo! Ya tienen Nivo Slider! Ahora a configurarlo!
Leer más