Como insertar un Menú desplegable y un Slideshow para blogger


Estaban buscando un tutorial de blogger de como insertar un Menú desplegable y un slideshow al mismo tiempo con unos pasos simples y sin complicaciones! Has llegado al sitio adecuado, el día de hoy aprenderías a como insertar una caja completa de menú desplegable y un slideshow debajo de la cabecera principal de tu blog de blogger. La inserción del código es muy fácil, solo tendrán que seguir mis instrucciones y no confundir ninguna de ellas. Esta nueva caja de Menú desplegable y Slideshow se mostrara debajo de la cabecera principal de su blog, el slideshow mostrara sus últimas publicaciones de su blog. La caja de menú desplegable y el slideshow funciona perfectamente en todos los navegadores web.

Además si necesitan más trucos para blogger no se olviden de visitar los siguientes enlaces

  1. Caja de suscripciones caja de seguidores de Facebook y redes sociales para blogger
  2. Cambiar de estilos al Archivo del blog Widget para Blogger
  3. Cambiar mis etiquetas por un menú desplegable
  4. Como agregar un menú para mi blog de blogger con un solo widget
  5. Como añadir un Drop Shadows para imágenes y ampliarlo al momento que pase el ratón en blogger.
  6. Como eliminar con la tecnología de Blogger
  7. Como hacer un Menú vertical desplegable para mi blog de blogger
  8. Como insertar un Headline de Noticias con un solo widget en blogger
  9. Como insertar una Galería de imágenes en Blogger o Wordpress
  10. Como personalizar la cabecera de cada barra lateral de otro color
  11. Crear un FanBox de Google plus en Blogger
  12. Mostrar un Slideshow con mis entradas populares para blogger
  13. Mostrar un widget desplegable de categorías para blogger
  14. Necesito un Slider para mi blog de blogger
  15. Nuevo estilo de etiquetas con menu desplegable para blogger
  16. Personalizar la caja de comentarios de blogger
  17. Publicar un Widget por etiquetas con imágenes en blogger
  18. Slider para blogger en 3D
  19. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  20. Slideshow vertical para usarlo en blogger
  21. Trucos para blogger Noticias en movimiento
  22. Trucos para blogger Widget de imágenes para blogger
  23. Trucos para blogger texto en movimiento
  24. Trucos para blogger widget de Twitter nuevo estilo
  25. Widget de comentarios en mi blog de blogger
  26. Widget de post recientes con imágenes para mi blog de blogger
  27. Widget de redes sociales para blogger
  28. Widget para blogger, Slideshow con Entradas Populares
Como insertar un Menú desplegable y un Slideshow para blogger
 
A continuación mire su demostración en mi blog de demos


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla

Como insertar un Menú desplegable y un Slideshow para blogger

3 Un clic en “Editar HTML

Como insertar un Menú desplegable y un Slideshow para blogger
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como insertar un Menú desplegable y un Slideshow para blogger

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.

Como insertar un Menú desplegable y un Slideshow para blogger

4 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código arriba del código que encontraste

/* menu - slideshow start by ayudadeblogger.com */
#kenthir-wrapper{background:#B40404}
#main-wrapper{padding-top:10px;width:630px;float:left;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper,#sidebar1-wrapper{width:300px;float:right;word-wrap:break-word;overflow:hidden;padding-top:10px}
h2{line-height:1.4em;text-transform:none;color:#333;margin:.5em 0 .25em}
h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
.post{margin:0 0 15px;padding:5px 10px 10px}
.post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#222;margin:.0em 0 0;padding:4px 0;text-shadow:1px 1px #fff, 1px 1px #ccc, 2px 2px #ddd, 3px 3px #eee}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#222;font-weight:400}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}
.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px 'Arial', serif;margin:1.0em 0 .75em;line-height:1.3em;}
.post-body blockquote{line-height:1.3em}
.post-footer{color:#666;text-transform:none;letter-spacing:.01em;font:12px Arial;line-height:1.4em;margin:.75em 0}
.comment-link{margin-left:.1em}
.post blockquote{margin: 10px 10px 10px 20px;padding: 10px 15px 10px 15px;line-height: 1.6em;color: #333;background: #eee;border-left: 20px solid #ccc}
.post blockquote p{margin:.75em 0}
.clear{clear:both}
.menu,.menu ul,.menu li,.menu a{border:none;outline:none;margin:0;padding:0;z-index:999}
.menu{height:40px;width:auto; background-color: #222;background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));background-image: -webkit-linear-gradient(top, #555, #222);background-image: -moz-linear-gradient(top, #555, #222);background-image: -ms-linear-gradient(top, #555, #222);background-image: -o-linear-gradient(top, #555, #222);background-image: linear-gradient(top, #555, #222); -moz-box-shadow: 0 5px 5px #000;-webkit-box-shadow: 0 5px 5px #000;box-shadow: 0 5px 5px #000;  }
.menu li{position:relative;list-style:none;float:left;display:block;height:40px}
.menu li a{background:url(http://4.bp.blogspot.com/-n7OkwgMuP7Q/UQs19HkuUsI/AAAAAAAABiQ/k3qWwdmqgfQ/s1600/bagi.gif) no-repeat top right;display:block;text-decoration:none;font-family:Arial;font-weight:700;font-size:14px;color:#ddd;text-shadow:1px 1px 1px #000;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;margin:0;padding:12px 14px  12px}
.menu li:first-child a{padding:10px 10px 7px}
.menu li:hover > a{color:#48d}
.menu ul{position:absolute;top:41px;left:0;opacity:0;background:#fdfdfd url(http://4.bp.blogspot.com/-mlmoMuUf48g/UQu3dezXeFI/AAAAAAAABpE/cDDiKShrEu0/s1600/menuhover.png) repeat-x top;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;border:1px solid #666;border-top:none;-webkit-transition:opacity .25s ease .1s;-moz-transition:opacity .25s ease .1s;-o-transition:opacity .25s ease .1s;-ms-transition:opacity .25s ease .1s;transition:opacity .25s ease .1s}
.menu li:hover > ul{opacity:1}
.menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}
.menu li:hover > ul li{height:36px;overflow:visible;padding:0}
.menu ul li a{color:#111;font-weight:400;width:100px;margin:0;padding:10px 0 10px 30px;text-shadow:none}
.menu ul li:first-child a{padding:10px 14px  10px 30px}
.menu ul li:last-child a{border:none}
.menu a.trigger{background:url(http://3.bp.blogspot.com/-pJAQN5knuO8/UQre-F12FjI/AAAAAAAABgs/6WarLD7FwNw/s1600/arrow.png) no-repeat 6px center}

/* Slide Content
----------------------------------------------- */
.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0;padding:0;}
.slide .widget {margin:0}

#slider{padding:13px 10px 0;margin:0;position:relative;overflow:hidden;width:920px;height:340px}
.slider-main-outer{position:relative;height:100%;width:610px;z-index:3;overflow:hidden}
ul.slider-main-wapper li h3{z-index:10;position:absolute;top:4px;width:180px;height:312px;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png);padding:10px;margin:0 4px}
ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding:5px 10px;margin:5px 0;background:#0178d3;width:150px}
ul.slider-main-wapper li h3 a{color:#ddd;font-size:20px;line-height:26px;margin:0}
ul.slider-main-wapper li h3 .title{color:#eee;font:12px Arial;margin:0;padding-top:5px}
ul.slider-main-wapper li .imgauto{width:602px;height:332px;overflow:hidden;margin:0;padding:0;border:4px double #555}
ul.slider-main-wapper{height:340px;width:610px;position:absolute;overflow:hidden;margin:0;padding:0}
ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:610px;float:left;margin:0;padding:0}
.slider-opacity li{position:absolute;top:0;left:0;float:inherit}
ul.slider-main-wapper li img{list-style:none;width:610px;height:auto;padding:0}
ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
.slider-navigator-outer{position:absolute;right:10px;top:13px;z-index:10;height:340px;width:310px;overflow:hidden;color:#333}
.slider-navigator li h5{color:#999;font:bold 12px Arial;margin:0;padding:5px 10px 0}
.slider-navigator li .title{color:#eee;font:11px Tahoma;margin:0;padding-top:5px}
.slider-navigator li div{text-shadow:1px 1px 1px #000;height:84px;position:relative;margin:0px 0px 0px 5px;padding:0 5px;border-bottom:1px dotted #444}
.slider-navigator li.active div,.slider-navigator li:hover div{color:#4ea5f9;}
.slider-navigator li img{border:#444 solid 2px;height:70px;width:90px;float:left;margin:5px 10px 5px 0}
.slider-navigator li.active img{border:#ccc solid 2px}
.slider-navigator li.active h5,.slider-navigator li h5:hover{color:#fff}

5 Busca este otro código

</head>

Inserta las siguientes líneas de código justo arriba del código que encontraste

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){  
    $(&#39;#slider&#39;).lofJSidernews({
        interval:6000,
        duration:800,
        mainWidth: 610,
        navigatorWidth: 310,
        maxItemDisplay:4,
        easing:&#39;easeOutBounce&#39;,
        auto:true,
        isPreloaded: false
    });
});  
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener )
            for ( var i=types.length; i; )
                this.addEventListener( types[--i], handler, false );
        else
            this.onmousewheel = handler;
    },
  
    teardown: function() {
        if ( this.removeEventListener )
            for ( var i=types.length; i; )
                this.removeEventListener( types[--i], handler, false );
        else
            this.onmousewheel = null;
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
  
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});


function handler(event) {
    var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
  
    event = $.event.fix(event || window.event);
    event.type = "mousewheel";
  
    if ( event.wheelDelta ) delta = event.wheelDelta/120;
    if ( event.detail     ) delta = -event.detail/3;
  
    // Add events and delta to the front of the arguments
    args.unshift(event, delta);

    return $.event.handle.apply(this, args);
}

})(jQuery);

/**
 * @version        $Id:  $Revision
 * @package        jquery
 * @subpackage    lofslidernews
 * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
 * @website     http://landofcoder.com
 * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License
 */
// JavaScript Document
(function($) {
     $.fn.lofJSidernews = function( settings ) {
         return this.each(function() {
            // get instance of the lofSiderNew.
            new  $.lofSidernews( this, settings );
        });
      }
     $.lofSidernews = function( obj, settings ){
        this.settings = {
            direction            : '',
            mainItemSelector    : 'li',
            navInnerSelector    : 'ul',
            navSelector          : 'li' ,
            navigatorEvent        : 'click',
            wapperSelector:     '.slider-main-wapper',
            interval               : 4000,
            auto                : true, // whether to automatic play the slideshow
            maxItemDisplay         : 4,
            startItem            : 0,
            navPosition            : 'vertical',
            navigatorHeight        : 85,
            navigatorWidth        : 310,
            duration            : 600,
            navItemsSelector    : '.slider-navigator li',
            navOuterSelector    : '.slider-navigator-outer' ,
            isPreloaded            : true,
            easing                : 'easeOutBounce'
        }  
        $.extend( this.settings, settings ||{} );  
        this.nextNo         = null;
        this.previousNo     = null;
        this.maxWidth  = this.settings.mainWidth || 600;
        this.wrapper = $( obj ).find( this.settings.wapperSelector );  
        this.slides = this.wrapper.find( this.settings.mainItemSelector );
        if( !this.wrapper.length || !this.slides.length ) return ;
        // set width of wapper
        if( this.settings.maxItemDisplay > this.slides.length ){
            this.settings.maxItemDisplay = this.slides.length;  
        }
        this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
        this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );  
        this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
        this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
      
        if( this.settings.navPosition == 'horizontal' ){
            this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
            this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
            this.navigatorOuter.height(    this.settings.navigatorHeight );
          
        } else {
            this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );  
          
            this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
            this.navigatorOuter.width(    this.settings.navigatorWidth );
        }      
        this.navigratorStep = this.__getPositionMode( this.settings.navPosition );      
        this.directionMode = this.__getDirectionMode();
      
      
        if( this.settings.direction == 'opacity') {
            this.wrapper.addClass( 'slider-opacity' );
            $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
        } else {
            this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
        }

      
        if( this.settings.isPreloaded ) {
            this.preLoadImage( this.onComplete );
        } else {
            this.onComplete();
        }
      
     }
     $.lofSidernews.fn =  $.lofSidernews.prototype;
     $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
  
     $.lofSidernews.fn.extend({
                            
        startUp:function( obj, wrapper ) {
            seft = this;

            this.navigatorItems.each( function(index, item ){
                $(item).click( function(){
                    seft.jumping( index, true );
                    seft.setNavActive( index, item );                  
                } );
                $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
            })
            this.registerWheelHandler( this.navigatorOuter, this );
            this.setNavActive(this.currentNo );
          
            if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                this.registerButtonsControl( 'click', this.settings.buttons, this );

            }
            if( this.settings.auto )
            this.play( this.settings.interval,'next', true );
          
            return this;
        },
        onComplete:function(){
            setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
        },
        preLoadImage:function(  callback ){
            var self = this;
            var images = this.wrapper.find( 'img' );
  
            var count = 0;
            images.each( function(index,image){
                if( !image.complete ){                
                    image.onload =function(){
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }
                    }
                    image.onerror =function(){
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }  
                    }
                }else {
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }  
                }
            } );
        },
        navivationAnimate:function( currentIndex ) {
            if (currentIndex <= this.settings.startItem
                || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                    this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                    if (this.settings.startItem < 0) this.settings.startItem = 0;
                    if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                        this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                    }
            }      
            this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
                                                {duration:500, easing:'easeInOutQuad'} );  
        },
        setNavActive:function( index, item ){
            if( (this.navigatorItems) ){
                this.navigatorItems.removeClass( 'active' );
                $(this.navigatorItems.get(index)).addClass( 'active' );  
                this.navivationAnimate( this.currentNo );  
            }
        },
        __getPositionMode:function( position ){
            if(    position  == 'horizontal' ){
                return ['left', this.settings.navigatorWidth];
            }
            return ['top', this.settings.navigatorHeight];
        },
        __getDirectionMode:function(){
            switch( this.settings.direction ){
                case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                default: this.maxSize=this.maxWidth; return ['left','width'];
            }
        },
        registerWheelHandler:function( element, obj ){
             element.bind('mousewheel', function(event, delta ) {
                var dir = delta > 0 ? 'Up' : 'Down',
                    vel = Math.abs(delta);
                if( delta > 0 ){
                    obj.previous( true );
                } else {
                    obj.next( true );
                }
                return false;
            });
        },
        registerButtonsControl:function( eventHandler, objects, self ){
            for( var action in objects ){
                switch (action.toString() ){
                    case 'next':
                        objects[action].click( function() { self.next( true) } );
                        break;
                    case 'previous':
                        objects[action].click( function() { self.previous( true) } );
                        break;
                }
            }
            return this;  
        },
        onProcessing:function( manual, start, end ){           
            this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
            this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);              
            return this;
        },
        finishFx:function( manual ){
            if( manual ) this.stop();
            if( manual && this.settings.auto ){
                this.play( this.settings.interval,'next', true );
            }      
            this.setNavActive( this.currentNo );  
        },
        getObjectDirection:function( start, end ){
            return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");  
        },
        fxStart:function( index, obj, currentObj ){
                if( this.settings.direction == 'opacity' ) {
                    $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                    $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
                }else {
                    this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                }
            return this;
        },
        jumping:function( no, manual ){
            this.stop();
            if( this.currentNo == no ) return;      
             var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
            this.onProcessing( null, manual, 0, this.maxSize )
                .fxStart( no, obj, this )
                .finishFx( manual );  
                this.currentNo  = no;
        },
        next:function( manual , item){

            this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);  
            this.onProcessing( item, manual, 0, this.maxSize )
                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                .finishFx( manual );
        },
        previous:function( manual, item ){
            this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
            this.onProcessing( item, manual )
                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                .finishFx( manual    );          
        },
        play:function( delay, direction, wait ){  
            this.stop();
            if(!wait){ this[direction](false); }
            var self  = this;
            this.isRun = setTimeout(function() { self[direction](true); }, delay);
        },
        stop:function(){
            if (this.isRun == null) return;
            clearTimeout(this.isRun);
            this.isRun = null;
        }
    })
})(jQuery)

 //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 60;
summaryPost1 = 200;
summaryTitle = 20;
numposts = 10;
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p><div class="title">'+removeHtmlTag(postcontent,summaryPost1)+'... </div></h3></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><div><img class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5><div class="title">'+removeHtmlTag(postcontent,summaryPost)+'... </div></div></li>';document.write(trtd);j++}}
 //]]>
</script>

Nota: Si ya utilizas un script jQuery, ya no tendrás que poner solo el código que está marcado de color amarillo, y si no utilizas ningún jQuery inserta todo el código tal como está.

6  Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget”, mire la imagen

Como insertar un Menú desplegable y un Slideshow para blogger

Y vamos a dar un clic en el “Header1” para que nos muestre el código directamente en donde tendremos que insertar nuestra última línea de código

Como insertar un Menú desplegable y un Slideshow para blogger

Al dar un clic en “Header1” nos mostrara un código similar al siguiente, mira la imagen

Como insertar un Menú desplegable y un Slideshow para blogger

En este punto con calma vamos a buscar la última línea del cierre que dice </div> en el cual abajo de ella vamos a insertar el siguiente código

<div id='kenthir-wrapper'>
<ul class='menu'>
<li><a href='/'><img alt='Inicio' src='' style='padding:0px;'/></a></li>
<li><a href='#'>Noticias</a>
<ul>
<li><a class='trigger' href='#'>Noticias 1</a></li>
<li><a class='trigger' href='#'>Noticias 2</a></li>
<li><a class='trigger' href='#'>Noticias 3</a></li>
</ul>
</li>
<li><a href='#'>Deportes</a>
<ul>
<li><a class='trigger' href='#'>Deportes 1</a></li>
<li><a class='trigger' href='#'>Deportes 2</a></li>
<li><a class='trigger' href='#'>Deportes 3</a></li>
</ul>
</li>
<li><a href='#'>Entretenimiento</a>
<ul>
<li><a class='trigger' href='#'>Entretenimiento 1</a></li>
<li><a class='trigger' href='#'>Entretenimiento 2</a></li>
<li><a class='trigger' href='#'>Entretenimiento 3</a></li>
</ul>
</li>
<li><a href='#'>Chat</a>
<ul>
<li><a class='trigger' href='#'>Chat 1</a></li>
<li><a class='trigger' href='#'>Chat 2</a></li>
<li><a class='trigger' href='#'>Chat 3</a></li>
</ul>
</li>
<li><a href='#'>Economía</a>
<ul>
<li><a class='trigger' href='#'>Economía 1</a></li>
<li><a class='trigger' href='#'>Economía 2</a></li>
<li><a class='trigger' href='#'>Economía 3</a></li>
</ul>
</li>
<li><a href='#'>Tiempo</a>
<ul>
<li><a class='trigger' href='#'>Tiempo 1</a></li>
<li><a class='trigger' href='#'>Tiempo 2</a></li>
<li><a class='trigger' href='#'>Tiempo 3</a></li>
</ul>
</li>
<li><a href='#'>Descargas</a>
<ul>
<li><a class='trigger' href='#'>Descargas 1</a></li>
<li><a class='trigger' href='#'>Descargas 2</a></li>
<li><a class='trigger' href='#'>Descargas 3</a></li>
</ul>
</li>
<li><a href='#'>Música</a>
<ul>
<li><a class='trigger' href='#'>Música 1</a></li>
<li><a class='trigger' href='#'>Música 2</a></li>
<li><a class='trigger' href='#'>Música 3</a></li>
</ul>
</li>
<li><a href='#'>Contactos</a></li>
</ul> <!-- end .menu -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
  <b:widget id='HTML100' locked='false' title='Slider' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

</b:includable>
  </b:widget>
</b:section>
      </div>
</b:if>
</div>

Realiza estos cambios:

He marcado de tres diferentes colores en el menú, de los cuales ustedes tendrán que realizar sus respectivos cambios

Cambia los símbolos numerales # por la URL del post que quieras mostrar

Las palabras que están marcadas de color rojo son los títulos de las pestañas principales del menú, cámbialas por los nombres que tú quieras

Las palabras que están marcadas de color verde son los submenús, bórralos y pon los nombres que se ajusten a tu blog.

Ahora si es momento de dar un clic en “Guardar plantilla

7 Nos dirigimos a “Diseño” y encontraremos un widget que tiene como nombre “Slider” vamos abrirlo y a insertar las siguientes líneas de codigo en su interior

Como insertar un Menú desplegable y un Slideshow para blogger

<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>                 
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>                 
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</div>

Una vez insertado el código vamos a dar un clic en “Guardar” y dejarlo en la ubicación que estaba y no moverlo de ahí.

Ahora visita tu blog de blogger y disfruta de esta caja de menú desplegable y un slideshow para blogger que mostrara nuestras últimas publicaciones.

Fácil verdad!

Espero haber sido lo más explicativo posible, recuerda suscribirte para que recibas mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

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

Saludos

Recuerda suscribirte:

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



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

25 comentarios:

  1. Hola Luis, un placer saludarte

    estoy instalando el Menú desplegable y un Slideshow para blogger , pero cuando termino de copiar los codigos y voy al diseño, no encuentro el widget que dice slider, es como si los codigos copiados no se estan ejecunatdo en el blog. el blog donde estoy agregando el menu despleganle y el slider es http://ligatrianguloanejo.blogspot.com/

    Saludos, espero tu ayuda y comentarios como siempre, un millon de gracias

    ResponderEliminar
  2. Hola he visto tu blog, y tu ya dispones de un menu desplegable y de un slideshow, tendrias que borrar lo que tienes en tu blog y luego insertar este truco que explico en este post.
    Saludos.

    ResponderEliminar
  3. hola luis..yo utilizo una plantilla q tiene este slider ..pero la cambie por otra mas simple que muestra las entradas recientes y funciona bien..ahora mi problema es que me sale un mensaje de google code subversion repository y me pide contraseña usuario..ya me registre y todo..ingresos los datos y sale la ventana pero el slider no aparece más..hay algo q me esta faltando porque ahora tarda en cargar la página y eso no hacia hace unos dias..pero se que tengo q cambiar los codigos de java script por los de google pero esa parte no alcanzo a entenderla ..busque por todos lados....eh leído sobre la plantilla que uso y te explican en ingles para q esto no pase..pero es complicado.. si podes contestarme a mi correo te agradeceria. georgedesign3@gmail.com esta es mi web http://www.peliculashdonline.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola, necesito que ingreses al editor html de tu plantilla y mandes a buscar este codigo ivyth.googlecode.com una vez que lo hayas encontraddo enviamelo para poder cargarlo en un hosting y asi ya no te saldra ese error.
      Saludos.

      Eliminar
  4. Hola. me gustaria saber como le cambio el color de fondo que es ROJO. favor de decirme para aplicarlo en mi blog, Gracias

    ResponderEliminar
    Respuestas
    1. Hola busca este codigo en el paso 4 background:#B40404 cambia el codigo de color B40404 por el numero de color que tu quieras.
      Saludos.

      Eliminar
  5. Hola como saco el menú? solo quiero el slider. Gracias!! :D

    ResponderEliminar
    Respuestas
    1. Para realizar ese truco, voy a publicar un tema nuevo sin el menu y solo con el slideshow, pero es facil. tendrias que copiar a partir de /* Slide Content
      ----------------------------------------------- */ bueno no te puedo publicar por este mensaje ya que se me haria largo y tedioso, mejor publicare un tema, asi que suscribete para que recibas mis nuevas actualizaciones
      Saludos.

      Eliminar
  6. Hola Luis, no me sale el widget slider, solo aparece en la pagina abajo de menu pero no en diseño, y en el menu los submenus me salen amontonados, como lo arreglo?, muchas gracias-. http://rednebu.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola, es porque los CSS estan mal ubicados y tienes un error en el codigo al no instalarlo correctamente tal como lo muestro en mi tutorial.
      Saludos.

      Eliminar
    2. Gracias ya pude corregirlo, en el menu como puedo separar los submenos pues me salen amontonados?. gracias.

      Eliminar
    3. Tienes que organizar perfectamente las palabras del menu y no poner demasiadas letras..
      Saludos.

      Eliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. Hola Luis, Cuando le doy guardar a la plantilla me sale este error:

    Lo sentimos; no hemos podido completar tu solicitud.

    Cuando informes sobre este error al servicio de asistencia de Blogger o al grupo de ayuda de Blogger, haz lo siguiente:

    describe lo que estabas haciendo cuando apareció este error, y
    proporciona el siguiente código de error.

    bX-qtjaka

    Estos datos nos ayudarán a realizar un seguimiento del problema específico para luego brindar una solución. Disculpa las molestias.

    ResponderEliminar
    Respuestas
    1. Hola, es por que tienes que actualizar tu navegador o ubo un error inesperado en tu cuenta de blogger.
      Saludos.

      Eliminar
  9. Hola, quería saber como hago para que no me ocupe el ancho de la pantalla, o sea, que deje margenes libres en los costados o quede centrado? Te dejo el link del blog donde lo coloque para que veas a lo que me refiero http://electronica-basicaa.blogspot.com.ar/
    Saludos!

    ResponderEliminar
  10. Hola LUIS, necesito ayuda con respecto al menú slideshow de mi blog de prueba, el cual cuando al final voy a “Diseño” y busco el widget que tiene como nombre “Slider” no lo encuentro para insertar lo que aquí tienes como el paso 7. Aquí te va el link de mi blog: http://prueba-1-bg.blogspot.com/

    GRACIAS, DIDIMO PABON M.

    ResponderEliminar
  11. Hola muy bueno tu slider amigo es el mejor que he visto solo un detallle, la descripción de la derecha se sale de la caja del slider a que se debe? este es el blog de pruebas http://fightslivenow.blogspot.com/

    Por cierto el código "header1" no lo encontré tal cual como en tu captura. Gracias de antemano

    ResponderEliminar
  12. Hola, estoy encantada con este dos en uno, pero me gustaría saber si es posible mover el contenido ya que me queda mucho espacio vacío (tengo la plantilla muy ancha para que pueda funcionar un Kwiks slides). También me gustaría saber si es posible incorporar un scroll para facilitar la búsqueda en este contenedor de posts. Saludos y muchas gracias

    ResponderEliminar
  13. amigo como ccambio el tamaño de la imagen ke se muestra

    ResponderEliminar
  14. El resultado de las imágenes es automático, no necesitas aumentar o disminuir una imagen

    ResponderEliminar
  15. Tengo dos consultas.

    1- Como elijo cual de las imágenes publicadas en la entrada quiero en el slide.
    2- Como edito para que no aparezca "0 comments" pegado a la fecha de publicación.

    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. 1.- El slideshow mostrara las últimas publicaciones de su blog
      2.- Donde dice: 5 Busca este otro código, estan unas líneas de código en la cual busca esta liea: comments , eliminala, eso es todo.
      Saludos.

      Eliminar
  16. Instalé el slider con su meno; pero el slider no se desplaza. ¿qué podría estar pasando?

    ResponderEliminar
  17. fantástico el menú con slider; Pero no se desplaza en mi blogspot ¿qué será?Agradezco acuse de recibo.Gracias.

    ResponderEliminar