Nuevo estilo de Slideshow para blogger
Obtener un buen estilo de Slideshow para blogger es la mejor opción al momento de implementarlo en su blog de blogger. Ayudadeblogger.com te ayudara con la configuración de un Slideshow para blogger con unos simples códigos. Existen cientos de estilos de Slideshow para blogger, nosotros nos destacamos en presentarles siempre estilos nuevos y que realmente funcione en su blog de blogger y que no cause ningún daño en la estructura de su blog. Deberán seguir las instrucción tal y cual lo publico en este post y lo podrán utilizar en su blog de blogger
A continuación mire su demostración en mi blog de demos
1 Un clic en Tema
2 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
4 Busca este código
</head>
Luego de que hayas encontrado el código, tendrás que insertar las siguientes líneas de código justo abajo del código que encontraste
<script src='https://cdn.rawgit.com/grupodelecluse/slideshow-b/ad120409/jquery-1-7-min.js'/>
<script src='https://cdn.rawgit.com/grupodelecluse/slideshow-b/06702e52/jquery-feature-Carousel.js'/>
<script src='https://cdn.rawgit.com/grupodelecluse/slideshow-b/e962dcdc/jquery-feature-Carousel-min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<style type='text/css'>
/********************
* FEATURE CAROUSEL by Ayudadeblogger.com stard*
********************/
#carousel-container {
position:relative;
padding:7px;
background-color:#CCC;
}
#carousel {
border:2px solid #fff;
height:300px;
background-color:#CCC;
position:relative;
font-size:12px;
font-family: Arial;
}
#carousel .carousel-image {
height:230px;
width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
border:0;
display:block;
}
#carousel .carousel-feature {
position:absolute;
top:-1000px;
left:-1000px;
border:2px solid #5d5d5d;
cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
position:absolute;
bottom:0;
width:100%;
background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
margin:0;
padding:5px;
font-weight:bold;
font-size:12px;
color:white;
}
#carousel .tracker-summation-container {
position:absolute;
color:white;
right:50px;
top:212px;
padding:3px;
margin:3px;
background-color:#000;
}
#carousel .tracker-individual-container {
position:absolute;
color:white;
right:95px;
top:218px;
padding:0;
margin:0;
}
#carousel .tracker-individual-container li {
list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
margin:0 3px;
padding:0 3px;
color:#000;
text-align:center;
border:1px solid #5d5d5d;
background-color:#DDD;
}
#carousel .tracker-individual-container .tracker-individual-blip-selected {
color:#FFC600;
font-weight:bold;
border:1px solid #fff;
background-color:#000;
}
#carousel-left {
position:absolute;
bottom:33px;
left:200px;
cursor:pointer;
}
#carousel-right {
position:absolute;
bottom:33px;
right:200px;
cursor:pointer;
}
</style>
Nota: Si ya utilizas un script jQquery en tu plantilla, no pongas el script jQuery que se encuentra dentro de este código https://cdn.rawgit.com/grupodelecluse/slideshow-b/ad120409/jquery-1-7-min.js, ya que ocasionará problemas y no se mostrara el Slideshow, y si no utilizas ningún jQuery copia todo el código tal como esta.
Ahora un clic en “Guardar Tema”
5 Un clic en “Diseño”
6 Abre un gadget “Añadir un gadget”
7 Busca el widget que dice “HTML/Javascritp” e inserta el siguiente código
<div id="carousel-container"> <div id="carousel"> <div class="carousel-feature"> <a href=" URL DE SU POST "> <img class="carousel-image" alt="Image Caption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTupRxoFH8L8vCzlM2eok9ZMjY7g0RjHL9Gn4Qrwp4u6Gw-rTkhyphenhyphens0p0oTG9FEQYhLzSmqRbETWAwUct8CqjJenoRYOXAl9uq6Ukelg2kubF-IHiAJ_4AcnGodvE0sDQxxYOd_aOd5gph/s1600/laptops+1.JPG" /></a> <div class="carousel-caption"> <p>DESCRIPCION DE SU POST </p> </div> </div> <div class="carousel-feature"> <a href="URL DE SU POST"> <img class="carousel-image" alt="Image Caption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkLW0w9B3YA2pd4m0DdZVaaIcfehAmIzdxCPPJujXTx3nMdN5zzML2tzv2V4XtT-iHlttYnZDVomgnbkmOp7c4z1KDS9uuh3lWTx-pgEJw8gO388Z5LhDkT59NdRCVHN0SpLl-m7JLCbH/s1600/laptops+2.JPG" /></a> <div class="carousel-caption"> <p>DESCRIPCION DE SU POST </p> </div> </div> <div class="carousel-feature"> <a href="URL DE SU POST"> <img class="carousel-image" alt="Image Caption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzytMgX1R8vqec-IAw06fz7hhSKZ369ibS-8Rxn8k8bw7miujSPLEyCW8B3mPSoryhVeX5q0kvCZDHD6xd5PNtuXmSf-Kecm2pPdycAarNI5rX_Mboj7qgfYZy1aJCSN4rFRkDeSbGJtk/s1600/iphone+1.JPG" /></a> <div class="carousel-caption"> <p>DESCRIPCION DE SU POST </p> </div> </div> <div class="carousel-feature"> <a href="URL DE SU POST"> <img class="carousel-image" alt="Image Caption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk4ctFCtlqaLLmMC0a8Vib8PeSKXoMrhdXN9wpBndNZe2ZRT9_Gvo0aLnEbYFqWCPqQSfXVs__jyZH0t93d5UPCiLx1YAMBnRYVwunW1yB_UZJZ967daIMICBy6I4WZnSpZBsHEFq-R28U/s1600/laptops+4.JPG" /></a> <div class="carousel-caption"> <p>DESCRIPCION DE SU POST </p> </div> </div> <div class="carousel-feature"> <a href="URL DE SU POST"> <img class="carousel-image" alt="Image Caption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmwn3vozRasPlQUik0YtquKTwHBCq_mWyq0jUpU-LPFE94Z0bCXBztDxG-puPOXcPQCyBb00sunDJGv3_sgYIsj_wFzen94Y4I9EY0oWtTIn2UzM0hTack8ucucvJakZ1lU6DtjcGpHDI/s1600/laptops+5.JPG" /></a> <div class="carousel-caption"> <p> DESCRIPCION DE SU POST</p> </div> </div> </div> <div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div> <div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div> </div>
Realiza estos cambios de configuración:
He marcado de tres diferentes colores en los cuales tendrás que cambiarlos.
Donde dice URL DE SU POST tienes que poner la dirección URL del artículo de tu blog
Tienes que cambiar los links que están marcados de color rojo https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTupRxoFH8L8vCzlM2eok9ZMjY7g0RjHL9Gn4Qrwp4u6Gw-rTkhyphenhyphens0p0oTG9FEQYhLzSmqRbETWAwUct8CqjJenoRYOXAl9uq6Ukelg2kubF-IHiAJ_4AcnGodvE0sDQxxYOd_aOd5gph/s1600/laptops+1.JPG, por los links de las imágenes de tu blog
Y por ultimo las letras que están marcadas de color verde DESCRIPCION DE SU POST, cámbialas por una pequeña descripción del articulo que quieras dar a conocer en tu nuevo Slideshow para blogger
Eso es todo, ahora dale un clic en “Guardar” y ubícalo luego de la cabecera principal de tu blog o al final de tu blog.
Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario