Como crear un Slideshow para Web


La pregunta es ¿Cómo crear un Slideshow para web? La respuesta es ¡fácil!, con Blogger tendrás la oportunidad de crear espectaculares Slideshow y ponerlos a trabajar de inmediato en tu página web o blog de Blogger, la simplicidad con que se manejan los códigos es lo que no pueden dejar de perderse al momento de utilizar un Slideshow gratis para Blogger y así obtener una página web profesional. El siguiente código que va aprender a insertar en su blog no le causara ningún daño a la estructura de su plantilla, además este Slideshow funciona perfectamente en todos los navegadores web.

Como crear un Slideshow para Web

Si aún necesitan más tutoriales de Slideshow, les dejo algunos post que publique


A continuación mire su demostración en mi blog de demos


Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

crear slideshow para web

3 Luego da un clic en “Editar HTML

crear slideshow para web

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

crear slideshow para web

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.

crear slideshow para web

4 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, inserta las siguientes líneas de código justo arriba del código que encontraste

/*--------------------------------------------*/
/* Slider */
/*--------------------------------------------*/
#slider-wrap {
position: relative;
width: 930px;
height: 340px;
overflow: hidden;
margin: 20px auto 25px;
}
#slider {
}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:930px;
height:340px;
overflow:hidden;
}
.slider-entry {
float: left;
width: 200px;
height: 290px;
background: #000;
padding: 25px;
color: #555555;
}
.slider-entry-title {
font-size: 19px;
line-height: 25px;
text-transform: uppercase;
margin-bottom: 13px;
}
.slider-entry-title a {
color: #fff;
}
.slider-byline {
color: #444444;
border-bottom: 1px solid #232323;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 15px;
}
.slider-byline a {
color: #444444;
}
.slider-byline .author, .slide-comments {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqwNjVdjlebvoLO1E7Jn2wDS8z7kFjt2Ovv3GsNzW87ZRad55TUJGkPILd62LhgSsZnmwoK8ZeoZDV4apuWUnIoBSOY_lvtDq7UfyMDya8wg_Z34y902nbc3njFTmVsdnwQEdRseuDAUd/s1600/sicons.png) no-repeat scroll 0 0;
padding-left: 24px;
text-transform: capitalize;
}
.slide-comments {
background-position: 1px -19px;
margin-left: 14px;
}
.slider-entry p {
font-size: 14px;
}
.slider-entry .more-link {
background: #222222;
color: #fff;
font-weight: bold;
padding: 7px 13px;
}
#prevBtn, #nextBtn {
display:block;
width:39px;
height:35px;
position:absolute;
top:305px;
left: 171px;
z-index:930;
}
#nextBtn {
left: 211px;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:39px;
height:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0xXiIPPB4Fba7MHuk49rGA-po4iRywzZOnzeviXdtXEMF3yWTAaGBGxMs3PXm2Jy3YSb9yONrAok-6uBvkpuOUu9JCKOgczClPz3r6yJrNDfgKK45l_apBvUa2zGODgCyTh5w9AGmoGb/s1600/nav.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0xXiIPPB4Fba7MHuk49rGA-po4iRywzZOnzeviXdtXEMF3yWTAaGBGxMs3PXm2Jy3YSb9yONrAok-6uBvkpuOUu9JCKOgczClPz3r6yJrNDfgKK45l_apBvUa2zGODgCyTh5w9AGmoGb/s1600/nav.png) no-repeat -40px 0;
}
#prevBtn a:hover {
background-position: 0 -35px;
}
#nextBtn a:hover {
background-position: -40px -35px;
}

5 Busca este código

</head>

Inserta el siguiente código, arriba del código que encontraste

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*! jQuery Migrate v1.2.1 | (c) 2005, 2013 jQuery Foundation, Inc. and other contributors | jquery.org/license */
jQuery.migrateMute===void 0&&(jQuery.migrateMute=!0),function(e,t,n){function r(n){var r=t.console;i[n]||(i[n]=!0,e.migrateWarnings.push(n),r&&r.warn&&!e.migrateMute&&(r.warn("JQMIGRATE: "+n),e.migrateTrace&&r.trace&&r.trace()))}function a(t,a,i,o){if(Object.defineProperty)try{return Object.defineProperty(t,a,{configurable:!0,enumerable:!0,get:function(){return r(o),i},set:function(e){r(o),i=e}}),n}catch(s){}e._definePropertyBroken=!0,t[a]=i}var i={};e.migrateWarnings=[],!e.migrateMute&&t.console&&t.console.log&&t.console.log("JQMIGRATE: Logging is active"),e.migrateTrace===n&&(e.migrateTrace=!0),e.migrateReset=function(){i={},e.migrateWarnings.length=0},"BackCompat"===document.compatMode&&r("jQuery is not compatible with Quirks Mode");var o=e("<input/>",{size:1}).attr("size")&&e.attrFn,s=e.attr,u=e.attrHooks.value&&e.attrHooks.value.get||function(){return null},c=e.attrHooks.value&&e.attrHooks.value.set||function(){return n},l=/^(?:input|button)$/i,d=/^[238]$/,p=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,f=/^(?:checked|selected)$/i;a(e,"attrFn",o||{},"jQuery.attrFn is deprecated"),e.attr=function(t,a,i,u){var c=a.toLowerCase(),g=t&&t.nodeType;return u&&(4>s.length&&r("jQuery.fn.attr( props, pass ) is deprecated"),t&&!d.test(g)&&(o?a in o:e.isFunction(e.fn[a])))?e(t)[a](i):("type"===a&&i!==n&&l.test(t.nodeName)&&t.parentNode&&r("Can't change the 'type' of an input or button in IE 6/7/8"),!e.attrHooks[c]&&p.test(c)&&(e.attrHooks[c]={get:function(t,r){var a,i=e.prop(t,r);return i===!0||"boolean"!=typeof i&&(a=t.getAttributeNode(r))&&a.nodeValue!==!1?r.toLowerCase():n},set:function(t,n,r){var a;return n===!1?e.removeAttr(t,r):(a=e.propFix[r]||r,a in t&&(t[a]=!0),t.setAttribute(r,r.toLowerCase())),r}},f.test(c)&&r("jQuery.fn.attr('"+c+"') may use property instead of attribute")),s.call(e,t,a,i))},e.attrHooks.value={get:function(e,t){var n=(e.nodeName||"").toLowerCase();return"button"===n?u.apply(this,arguments):("input"!==n&&"option"!==n&&r("jQuery.fn.attr('value') no longer gets properties"),t in e?e.value:null)},set:function(e,t){var a=(e.nodeName||"").toLowerCase();return"button"===a?c.apply(this,arguments):("input"!==a&&"option"!==a&&r("jQuery.fn.attr('value', val) no longer sets properties"),e.value=t,n)}};var g,h,v=e.fn.init,m=e.parseJSON,y=/^([^<]*)(<[\w\W]+>)([^>]*)$/;e.fn.init=function(t,n,a){var i;return t&&"string"==typeof t&&!e.isPlainObject(n)&&(i=y.exec(e.trim(t)))&&i[0]&&("<"!==t.charAt(0)&&r("$(html) HTML strings must start with '<' character"),i[3]&&r("$(html) HTML text after last tag is ignored"),"#"===i[0].charAt(0)&&(r("HTML string cannot start with a '#' character"),e.error("JQMIGRATE: Invalid selector string (XSS)")),n&&n.context&&(n=n.context),e.parseHTML)?v.call(this,e.parseHTML(i[2],n,!0),n,a):v.apply(this,arguments)},e.fn.init.prototype=e.fn,e.parseJSON=function(e){return e||null===e?m.apply(this,arguments):(r("jQuery.parseJSON requires a valid JSON string"),null)},e.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||0>e.indexOf("compatible")&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e.browser||(g=e.uaMatch(navigator.userAgent),h={},g.browser&&(h[g.browser]=!0,h.version=g.version),h.chrome?h.webkit=!0:h.webkit&&(h.safari=!0),e.browser=h),a(e,"browser",e.browser,"jQuery.browser is deprecated"),e.sub=function(){function t(e,n){return new t.fn.init(e,n)}e.extend(!0,t,this),t.superclass=this,t.fn=t.prototype=this(),t.fn.constructor=t,t.sub=this.sub,t.fn.init=function(r,a){return a&&a instanceof e&&!(a instanceof t)&&(a=t(a)),e.fn.init.call(this,r,a,n)},t.fn.init.prototype=t.fn;var n=t(document);return r("jQuery.sub() is deprecated"),t},e.ajaxSetup({converters:{"text json":e.parseJSON}});var b=e.fn.data;e.fn.data=function(t){var a,i,o=this[0];return!o||"events"!==t||1!==arguments.length||(a=e.data(o,t),i=e._data(o,t),a!==n&&a!==i||i===n)?b.apply(this,arguments):(r("Use of jQuery.fn.data('events') is deprecated"),i)};var j=/\/(java|ecma)script/i,w=e.fn.andSelf||e.fn.addBack;e.fn.andSelf=function(){return r("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()"),w.apply(this,arguments)},e.clean||(e.clean=function(t,a,i,o){a=a||document,a=!a.nodeType&&a[0]||a,a=a.ownerDocument||a,r("jQuery.clean() is deprecated");var s,u,c,l,d=[];if(e.merge(d,e.buildFragment(t,a).childNodes),i)for(c=function(e){return!e.type||j.test(e.type)?o?o.push(e.parentNode?e.parentNode.removeChild(e):e):i.appendChild(e):n},s=0;null!=(u=d[s]);s++)e.nodeName(u,"script")&&c(u)||(i.appendChild(u),u.getElementsByTagName!==n&&(l=e.grep(e.merge([],u.getElementsByTagName("script")),c),d.splice.apply(d,[s+1,0].concat(l)),s+=l.length));return d});var Q=e.event.add,x=e.event.remove,k=e.event.trigger,N=e.fn.toggle,T=e.fn.live,M=e.fn.die,S="ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",C=RegExp("\\b(?:"+S+")\\b"),H=/(?:^|\s)hover(\.\S+|)\b/,A=function(t){return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))};e.event.props&&"attrChange"!==e.event.props[0]&&e.event.props.unshift("attrChange","attrName","relatedNode","srcElement"),e.event.dispatch&&a(e.event,"handle",e.event.dispatch,"jQuery.event.handle is undocumented and deprecated"),e.event.add=function(e,t,n,a,i){e!==document&&C.test(t)&&r("AJAX events should be attached to document: "+t),Q.call(this,e,A(t||""),n,a,i)},e.event.remove=function(e,t,n,r,a){x.call(this,e,A(t)||"",n,r,a)},e.fn.error=function(){var e=Array.prototype.slice.call(arguments,0);return r("jQuery.fn.error() is deprecated"),e.splice(0,0,"error"),arguments.length?this.bind.apply(this,e):(this.triggerHandler.apply(this,e),this)},e.fn.toggle=function(t,n){if(!e.isFunction(t)||!e.isFunction(n))return N.apply(this,arguments);r("jQuery.fn.toggle(handler, handler...) is deprecated");var a=arguments,i=t.guid||e.guid++,o=0,s=function(n){var r=(e._data(this,"lastToggle"+t.guid)||0)%o;return e._data(this,"lastToggle"+t.guid,r+1),n.preventDefault(),a[r].apply(this,arguments)||!1};for(s.guid=i;a.length>o;)a[o++].guid=i;return this.click(s)},e.fn.live=function(t,n,a){return r("jQuery.fn.live() is deprecated"),T?T.apply(this,arguments):(e(this.context).on(t,this.selector,n,a),this)},e.fn.die=function(t,n){return r("jQuery.fn.die() is deprecated"),M?M.apply(this,arguments):(e(this.context).off(t,this.selector||"**",n),this)},e.event.trigger=function(e,t,n,a){return n||C.test(e)||r("Global events are undocumented and deprecated"),k.call(this,e,t,n||document,a)},e.each(S.split("|"),function(t,n){e.event.special[n]={setup:function(){var t=this;return t!==document&&(e.event.add(document,n+"."+e.guid,function(){e.event.trigger(n,null,t,!0)}),e._data(this,n,e.guid++)),!1},teardown:function(){return this!==document&&e.event.remove(document,n+"."+e._data(this,n)),!1}}})}(jQuery,window);

//]]>
</script>

6 Busca este código

</body>

Inserta el siguiente código, justo arriba del código que encontraste

<script type='text/javascript'>
//<![CDATA[

/*
 *         Easy Slider 1.7 - jQuery plugin
 *         Built for jQuery library
 *         http://jquery.com
 *
 */

/*
 *         markup ejmplo por $("#slider").easySlider();
 *        
 *         <div id="slider">
 *                     <ul>
 *                                <li><img src="images/01.jpg" alt="" /></li>
 *                                <li><img src="images/02.jpg" alt="" /></li>
 *                                <li><img src="images/03.jpg" alt="" /></li>
 *                                <li><img src="images/04.jpg" alt="" /></li>
 *                                <li><img src="images/05.jpg" alt="" /></li>
 *                     </ul>
 *         </div>
 *
 */

(function($) {

            $.fn.easySlider = function(options){
             
                        // default configuration properties
                        var defaults = {                                 
                                   prevId:                        'prevBtn',
                                   prevText:                    '',
                                   nextId:                        'nextBtn',       
                                   nextText:                    '',
                                   controlsShow: true,
                                   controlsBefore:           '',
                                   controlsAfter: '',        
                                   controlsFade:  true,
                                   firstId:                        'firstBtn',
                                   firstText:                     'First',
                                   firstShow:                   false,
                                   lastId:             'lastBtn',         
                                   lastText:                      'Last',
                                   lastShow:                    false,                                      
                                   vertical:                       false,
                                   speed:                         800,
                                   auto:                           false,
                                   pause:                         2000,
                                   continuous:                 false,
                                   numeric:                      false,
                                   numericId:                  'controls'
                        };
                       
                        var options = $.extend(defaults, options); 
                                              
                        this.each(function() { 
                                   var obj = $(this);                                           
                                   var s = $("li", obj).length;
                                   var w = $("li", obj).width();
                                   var h = $("li", obj).height();
                                   var clickable = true;
                                   obj.width(w);
                                   obj.height(h);
                                   obj.css("overflow","hidden");
                                   var ts = s-1;
                                   var t = 0;
                                   $("ul", obj).css('width',s*w);                        
                                  
                                   if(options.continuous){
                                               $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
                                               $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
                                               $("ul", obj).css('width',(s+1)*w);
                                   };                                           
                                  
                                   if(!options.vertical) $("li", obj).css('float','left');
                                                                                             
                                   if(options.controlsShow){
                                               var html = options.controlsBefore;                                      
                                               if(options.numeric){
                                                           html += '<ol id="'+ options.numericId +'"></ol>';
                                               } else {
                                                           if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                                                           html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                                                           html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                                                           if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';                                        
                                               };
                                              
                                               html += options.controlsAfter;                                                                    
                                               $(obj).after(html);                                                                                                               
                                   };
                                  
                                   if(options.numeric){                                                                                                
                                               for(var i=0;i<s;i++){                                                            
                                                           $(document.createElement("li"))
                                                                       .attr('id',options.numericId + (i+1))
                                                                       .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
                                                                       .appendTo($("#"+ options.numericId))
                                                                       .click(function(){                                                                             
                                                                                  animate($("a",$(this)).attr('rel'),true);
                                                                       });                                                                                                                                        
                                               };                                                                              
                                   } else {
                                               $("a","#"+options.nextId).click(function(){             
                                                           animate("next",true);
                                                });
                                               $("a","#"+options.prevId).click(function(){             
                                                           animate("prev",true);                                    
                                               });       
                                               $("a","#"+options.firstId).click(function(){             
                                                           animate("first",true);
                                               });                                          
                                               $("a","#"+options.lastId).click(function(){              
                                                           animate("last",true);                                      
                                               });                                          
                                   };
                                  
                                   function setCurrent(i){
                                               i = parseInt(i)+1;
                                               $("li", "#" + options.numericId).removeClass("current");
                                               $("li#" + options.numericId + i).addClass("current");
                                   };
                                  
                                   function adjust(){
                                               if(t>ts) t=0;                
                                               if(t<0) t=ts;    
                                               if(!options.vertical) {
                                                           $("ul",obj).css("margin-left",(t*w*-1));
                                               } else {
                                                           $("ul",obj).css("margin-left",(t*h*-1));
                                               }
                                               clickable = true;
                                               if(options.numeric) setCurrent(t);
                                   };
                                  
                                   function animate(dir,clicked){
                                               if (clickable){
                                                           clickable = false;
                                                           var ot = t;                                          
                                                           switch(dir){
                                                                       case "next":
                                                                                  t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                                                                  
                                                                                  break;
                                                                       case "prev":
                                                                                  t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                                                                                  break;
                                                                       case "first":
                                                                                  t = 0;
                                                                                  break;
                                                                       case "last":
                                                                                  t = ts;
                                                                                  break;
                                                                       default:
                                                                                  t = dir;
                                                                                  break;
                                                           };        
                                                           var diff = Math.abs(ot-t);
                                                           var speed = diff*options.speed;                                                                  
                                                           if(!options.vertical) {
                                                                       p = (t*w*-1);
                                                                       $("ul",obj).animate(
                                                                                  { marginLeft: p },
                                                                                  { queue:false, duration:speed, complete:adjust }
                                                                       );                                            
                                                           } else {
                                                                       p = (t*h*-1);
                                                                       $("ul",obj).animate(
                                                                                  { marginTop: p },
                                                                                  { queue:false, duration:speed, complete:adjust }
                                                                       );                                                        
                                                           };
                                                          
                                                           if(!options.continuous && options.controlsFade){                                                
                                                                       if(t==ts){
                                                                                  $("a","#"+options.nextId).hide();
                                                                                  $("a","#"+options.lastId).hide();
                                                                       } else {
                                                                                  $("a","#"+options.nextId).show();
                                                                                  $("a","#"+options.lastId).show();                                                    
                                                                       };
                                                                       if(t==0){
                                                                                  $("a","#"+options.prevId).hide();
                                                                                  $("a","#"+options.firstId).hide();
                                                                       } else {
                                                                                  $("a","#"+options.prevId).show();
                                                                                  $("a","#"+options.firstId).show();
                                                                       };                                                       
                                                           };                                           
                                                          
                                                           if(clicked) clearTimeout(timeout);
                                                           if(options.auto && dir=="next" && !clicked){;
                                                                       timeout = setTimeout(function(){
                                                                                  animate("next",false);
                                                                       },diff*options.speed+options.pause);
                                                           };
                                  
                                               };
                                              
                                   };
                                   // init
                                   var timeout;
                                   if(options.auto){;
                                               timeout = setTimeout(function(){
                                                           animate("next",false);
                                               },options.pause);
                                   };                    
                                  
                                   if(options.numeric) setCurrent(0);
                       
                                    if(!options.continuous && options.controlsFade){                                                 
                                               $("a","#"+options.prevId).hide();
                                               $("a","#"+options.firstId).hide();                                         
                                   };                                           
                                  
                        });
             
            };

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function(){           
        jQuery("#slider").easySlider({
                auto: true,
                continuous: true,
            pause: 4000
        });
});

//]]>
</script>

Has terminado de insertar los códigos en el “Editor HTML” de tu plantilla, y es momento de dar un clic en “Guardar plantilla

7 Ahora vamos a insertar nuestro último código en un widget

Da un clic en “Diseño

crear slideshow para web

Abre un gadget “Añadir un gadget

crear slideshow para web

Busca el widget que dice “HTML/Javascript” ábrelo

crear slideshow para web

Inserta el siguiente código en su interior

<div id='slider-wrap'>
<div id='slider'>
<ul>

<!-- slide 1 start -->
<li>
   <div class='slider-entry'>
      <h2 class='slider-entry-title'><a href='INGRESE LA DIRECCION URL SE SU POST AQUÍ 1'>El Titulo de su post aquí 1</a></h2>
      <p> Descripción 1 Blogger la mejor plataforma web para crear grandes contenidos de calidad y ganar dinero por internet gracias a Adsense...</p>
      <a class='more-link' href=' INGRESE LA DIRECCION URL SE SU POST AQUI 1'>Leer más</a>                                                       
   </div>
   <a href=' INGRESE LA DIRECCION URL SE SU POST AQUI 1'><img height='340' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTuyCzOdYPInHApkSz4xeU8HCcn_4AhoaqB35Prs0W3uTgnZM9JzQkov4OtD21gxsFOhh6PNhMQ6sDUDCT4isH7PpKnjLofChZa79bujUWaqL2UnCQXB5nGMh_agAHT574SL-JdUJB3to/s1600/slide-image-1.jpg' width='680'/></a>
</li>
<!-- slide 1 fin del código -->

<!-- slide 2 start -->
<li>
   <div class='slider-entry'>
      <h2 class='slider-entry-title'><a href=' INGRESE LA DIRECCION URL SE SU POST AQUÍ 2 '> El Titulo de su post aquí 2</a></h2>
      <p> Descripción 2 Blogger la mejor plataforma web para crear grandes contenidos de calidad y ganar dinero por internet gracias a Adsense...</p>
      <a class='more-link' href=' INGRESE LA DIRECCION URL SE SU POST AQUI 2'>Leer más</a>                                                       
   </div>
   <a href=' INGRESE LA DIRECCION URL SE SU POST AQUI 2'><img height='340' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPGoQO76m3ndmZBHKuWi-r8GqxV6DAzFC1fSbuBRzSEyM7BpnFYuEbvVzbwFVg4WsZeCrUtVl6RIYRBQmUiHIsQAQH7vLojOZakGPc8Wh-NIfM601g4u6JNn-3oF46UmO1zqeHcg-WiIR/s1600/slide-image-2.jpg' width='680'/></a>
</li>
<!-- slide 2 fin del código -->

<!-- slide 3 start -->
<li>
   <div class='slider-entry'>
      <h2 class='slider-entry-title'><a href=' INGRESE LA DIRECCION URL SE SU POST AQUI 3'> El Titulo de su post aquí 3</a></h2>
      <p> Descripción 3 Blogger la mejor plataforma web para crear grandes contenidos de calidad y ganar dinero por internet gracias a Adsense...</p>
      <a class='more-link' href=' INGRESE LA DIRECCION URL SE SU POST AQUI 3'>Leer más</a>                                                       
   </div>
   <a href=' INGRESE LA DIRECCION URL SE SU POST AQUI 3'><img height='340' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz92TdgFg2XMclSgayAsMZreiJoRl4gQwiiO2p4tlvL-qt011mX6NwvuKZFSXSC40aFqq6ZCAJDEdhf2TD4wXJxC9f3g7EgYUamXSwkQz5yRe3CLrGx2M5W2uHl1rJDrlcqKNJDK-IhcU/s1600/slide-image-3.jpg' width='680'/></a>
</li>
<!-- slide 3 fin del código -->

</ul>              
</div><!--#slider-->
</div><!--#slider-wrap-->

He marcado de diferentes colores en los lugares que tendrán que realizar sus diferentes cambios

Cambia las palabras que están marcadas de color azul, por las direcciones URLs de sus artículos

Las URLs responsables de mostrar las imágenes en el Slideshow, están marcadas de color rojo, cambia cada una de ellas, recuerda que cada imagen debe tener una dimensión de 750x340

Pueden cambiar el texto que está marcado de color verde, en el cual se describe algún artículo en particular.

Una vez realizado estos cambios, da un clic en “Guardar” y ubica tu nuevo Slideshow debajo de la cabecera principal de tu blog

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Related post

Comentarios

6 comentarios: