Cómo quitar slider de imágenes de plantilla

  • Autor Autor Luzka
  • Fecha de inicio Fecha de inicio
Luzka

Luzka

Iota
Verificación en dos pasos activada
Buenas tardes a todos! (Bueno, tardes en México jeje).

Bueno resulta que estoy con un blog que traigo en planes, pero, luego de algo de ausencia en el mundo del internet, y encima alguna falta de conocimientos, resulta que no encuentro qué parte del código html tengo que eliminar para quitar el slider de imágenes del blog.

el sitio es este: ExtraSensual

La plantilla es esta: Gracia Blogger template - BTemplates

Gracias por su atención, y disculpen la ignorancia 🙄
 
La mayoría de las plantilla para blogger, se descargan con 2 archivos, uno con el Slider y otro sin el Slider, fíjate si tienes esos 2 archivos .xml
 
De hecho fue mi primera opción pero sólo viene el que trae slider :/
 
Entra a editar el html, busca la linea que empiece con
#s3slider {



  • width: 610px;
  • height: 320px;
  • position: relative;
  • overflow: hidden;
}

y agrega:

display:none;

Antes de terminar la llave de cierre 😉
 
bueno el slider te da bastante vida al blog pero si lo quieres eliminar primero elimina esto

/* CONTENT */
#slider-holder{width: 610px;height: 320px;overflow: hidden;
margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;}
#s3slider { width: 610px; /* important to be same as image width */
height: 320px; /* important to be same as image height */position: relative; /* important */overflow: hidden; /* important */}
#s3sliderContent {width: 610px; /* important to be same as image width or wider */
position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */}
.s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */}
.s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: Enlace eliminado padding: 20px 15px 50px 13px; height: 73px; width: 610px; background-color: Enlace eliminado
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
display: none; /* important */bottom: 0;/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image*/}
.s3sliderImage span a.featured-title:link,
.s3sliderImage span a.featured-title:visited{color: Enlace eliminadopadding: 0px 0px 2px 0px;font-size: 1.167em;}
.s3sliderImage span a.featured-title:hover{color: Enlace eliminado}
.s3sliderImage span a:link,
.s3sliderImage span a:visited{color: Enlace eliminado}
.s3sliderImage span a:hover{color: Enlace eliminado}


luego de ya haber eliminado eso ahora eliminas esta otra parte

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'></script>
<script type='text/javascript'><!--//--><![CDATA[//><!--
/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> Boban Kari?ik - php programmer/developer
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items).mouseover(function() {
mOver = true;
});

$(items).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

y por ultimo eliminas esta otra parte

<!-- Content -->
<div class='span-24' id='contentwrap'>
<div class='span-16'>
<div class='black-bg' id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 1' src='http://2.bp.blogspot.com/_JUg9QsmKp5s/TNH5KPOSd3I/AAAAAAAAAxo/xn8Yn3rXXMM/s000/1.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 2' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5Ku8QtoI/AAAAAAAAAxs/XtnwdHCO0fU/s000/2.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>

SOME DESCRIPTION OF YOUR POST HERE
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 3' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5LP9C04I/AAAAAAAAAxw/fNWMkCHUxvE/s000/3.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 5' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5LoBw0KI/AAAAAAAAAx0/w5OsAauhOKY/s000/4.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 5' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5L1C1BJI/AAAAAAAAAx4/y7YuxYUdxGI/s000/5.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>
</li>
<li class='clear s3sliderImage'></li>
</ul>
</div>
</div>

y listo ahy lo has eliminado espero haberte ayudado, aproposito que slider mas largo :s
 
Gracias!!! Esto me funcionó perfecto, sólo ahora una duda, el espacio en blanco que me quedó donde iba el slider, lo puedo quitar? cómo?


Entra a editar el html, busca la linea que empiece con
#s3slider {



  • width: 610px;
  • height: 320px;
  • position: relative;
  • overflow: hidden;
}

y agrega:

display:none;

Antes de terminar la llave de cierre 😉
 
bueno el slider te da bastante vida al blog pero si lo quieres eliminar primero elimina esto
y listo ahy lo has eliminado espero haberte ayudado, aproposito que slider mas largo :s


Gracias ahora intento eso jeje. Por cierto, les he de confesar que opté por eliminarlo por evitarme el poner las imágenes de su respectivo tamaño. Pretende ser un blog para promocionar junto con la fanpage de facebook la venta de ropa, por lo que sería más complicado.

Y por otro lado, tampoco encontré como poner los post destacados en ese condenado slider jajaja (porfa no se rían de mí jajaja)

mejor haz esto: http://forobeta.com/blogger/99344-eliminar-slider-de-plantilla.html#post972834
así eliminas el slide pro completo, ya que con lo otro, solo estas "ocultandolo"

gracias :d
 
Realiza los mismo que indicó Satanarchist pero en el div.

#slider-holder {



  • width: 610px;
  • height: 320px;
  • overflow: hidden;
  • margin-bottom: -10px;
  • margin-left: 17px;
  • margin-top: -20px;
  • padding: 15px 0 0 0;
  • display: none;
}
 
Busca y elimina las siguientes partes del codigo:


En el css:

PHP:
#slider-holder{width: 610px;height: 320px;overflow: hidden;
margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;}


#s3slider { width: 610px; /* important to be same as image width */
height: 320px; /* important to be same as image height */position: relative; /* important */overflow: hidden; /* important */}
#s3sliderContent {width: 610px; /* important to be same as image width or wider */
position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */}
.s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */}
.s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: [B]Enlace eliminado[/B]  padding: 20px 15px 50px 13px;  height: 73px;  width: 610px;  background-color: [B]Enlace eliminado[/B]
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
display: none; /* important */bottom: 0;/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image*/}
.s3sliderImage span a.featured-title:link,
.s3sliderImage span a.featured-title:visited{color: [B]Enlace eliminado[/B]padding: 0px 0px 2px 0px;font-size: 1.167em;}
.s3sliderImage span a.featured-title:hover{color: [B]Enlace eliminado[/B]}
.s3sliderImage span a:link,
.s3sliderImage span a:visited{color: [B]Enlace eliminado[/B]}
.s3sliderImage span a:hover{color: [B]Enlace eliminado[/B]}


Antes de la etiqueta de cierre </head>:

PHP:
<script type='text/javascript'><!--//--><![CDATA[//><!--
/* ------------------------------------------------------------------------
	s3Slider
	
	Developped By: Boban Karišik -> http://www.serie3.info/
        CSS Help: Mészáros Róbert -> http://www.perspectived.com/
	Version: 1.0
	
	Copyright: Feel free to redistribute the script/modify it, as
			   long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){  

    $.fn.s3Slider = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            
        items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
            
        });
        
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        
        makeSlider();

    };  

})(jQuery);  
//--><!]]></script>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>



En el body:

PHP:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='black-bg' id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 1' src='http://2.bp.blogspot.com/_JUg9QsmKp5s/TNH5KPOSd3I/AAAAAAAAAxo/xn8Yn3rXXMM/s000/1.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>

</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 2' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5Ku8QtoI/AAAAAAAAAxs/XtnwdHCO0fU/s000/2.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>

SOME DESCRIPTION OF YOUR POST HERE
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 3' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5LP9C04I/AAAAAAAAAxw/fNWMkCHUxvE/s000/3.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>

</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 5' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5LoBw0KI/AAAAAAAAAx0/w5OsAauhOKY/s000/4.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>

</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#YOUR LINKS TO THE POSTS HERE'><img alt='Imagen 5' src='http://3.bp.blogspot.com/_JUg9QsmKp5s/TNH5L1C1BJI/AAAAAAAAAx4/y7YuxYUdxGI/s000/5.jpg' style='width: 610px; height: 320px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#YOUR LINKS TO THE POSTS HERE' rel='bookmark' title='YOUR POST TITLE HERE'>YOUR POST TITLE HERE</a><br/>
SOME DESCRIPTION OF YOUR POST HERE
</span>

</li>
<li class='clear s3sliderImage'/>
</ul>

</div> 
</div>
</b:if></b:if>

con eso ya te debe de quedar asi: Enlace eliminado

Saludos!!


Edito: Me parece que ya te habian comentado esto mismo, pero como bien te dijeron, te fuiste por la de ocultarlo.

Aunque al ocultarlo, no deberia de quedar ese espacio, lo que pasa es que no es ese el que se debe de ocultar.

En lugar de agregarle el display: none; a :



PHP:
#s3slider {
}


hazlo a este:


PHP:
#slider-holder{
}

Con eso te deberia de quedar algo como esto: Enlace eliminado

Aunque yo recomendaria la primera (de eliminar los codigos) ya que si no lo vas a utilizar es recomendable que elimines ese codigo.

Saludos!!
 
Última edición:
Atrás
Arriba