Slideshow para Blogger versión 4


El día de hoy en este tutorial aprenderán a instalar en su blog de blogger un nuevo y sorprendente slideshow para blogger, el cual es totalmente diferente de los demás slideshow para blogger que he dado a conocer. Este nuevo slideshow funciona de forma manual, ya que deberán insertar el nombre de cada etiqueta que queramos mostrar en una categoría diferente del slideshow. Vamos a disponer de 5 diferentes categorías y en cada una de ellas tendremos que insertar el nombre de la etiqueta que vamos a mostrar en cada una de nuestras categorías del Slideshow para blogger. La instalación del código es muy fácil de realizarlo, tienen que seguir todas las instrucciones tal como lo muestro en este tutorial de blogger para que pueda funcionar perfectamente este nuevo slideshow para blogger. Lo que vamos hacer es instalar todo el código en el Editor HTML de nuestra plantilla.

Slideshow para blogger

Si aún necesitan ver diferentes tipos de Slideshow para blogger les dejo algunos tutoriales

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Como insertar un Menú desplegable y un Slideshow para blogger
  6. Como insertar un Slider Carrusel en blogger
  7. Como insertar un Slideshow en Blogger simples pasos
  8. Galería de imágenes para blogger
  9. Galería de imágenes para blogger V3
  10. Instalar un Slideshow para blogger con un solo widget
  11. Mostrar un Slideshow con mis entradas populares para blogger
  12. Necesito un Slider para mi blog de blogger
  13. Nuevo estilo de Slideshow para blogger
  14. SlideShow con control deslizante para blogger
  15. Slider carrusel para blogger
  16. Slider para blogger en 3D
  17. Slideshow con Entradas Populares Nuevo estilo
  18. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  19. Slideshow para Blogger
  20. Slideshow para blogger blogspot con etiquetas
  21. Slideshow para blogger con un solo widget
  22. Slideshow para blogger manual nuevo estilo
  23. Slideshow para blogger nuevo estilo
  24. Slideshow vertical para usarlo en blogger
  25. Widget Galería de Imágenes para blogger V2
  26. Widget Slider galería de imágenes acordeón para blogger
  27. Widget Slideshow para blogger
  28. Widget para blogger, Slideshow con Entradas Populares
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

Blogger

3 Un clic en “Editar HTML

Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Blogger

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.

 Blogger

4 Busca este código

]]></b:skin>

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

#sliderTimer-wrapper{width:970px;padding:0 10px 10px 0}
#sliderTimer-header li a.active{background:#2F2F2E;text-shadow:0 1px 0 rgba(0,0,0,.2);color:#fff}
#sliderTimer-header li a.active div.carouselProgress{display:block;background:#298A08}
.sliderTimer-item{position:absolute;top:0;left:0;height:300px;width:970px;display:none;padding:0}
#sliderTimer h2 a{font:normal 20px Oswald;color:#fff;line-height:1.1em}
#sliderTimer a.carousel_link span{background:#d10110;display:block;color:#fff;float:right;padding:7px 10px}
#sliderTimer{position:relative;height:300px;overflow:hidden}
#sliderTimer-header{height:32px;border-bottom:4px solid #878773;border-top:1px solid #878773;padding:0}
#sliderTimer-header li{display:inline;list-style:none}
#sliderTimer-header li a{display:block;text-shadow:1px 1px 1px #fff;height:32px;float:left;line-height:32px;text-decoration:none;color:#333;font-size:14px;font-style:tahoma;position:relative;padding:0}
#sliderTimer-header li a div.carouselProgress{display:none;height:4px;background:transparent;width:0;position:absolute;bottom:-4px;left:0;margin:0}
#sliderTimer-header li a .carouselHeaderContent{padding:0 15px}
.sliderTimer-item .infos{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMpyTNO29VEIKsUdhxmpliSCuFGMnOzmXL06Wzsgk2LAz8K0Qan9fzeaj4WxgQwKi4mVv17CyImKdLyIoqaTQr26v09OJP4Y50i5PZioH0ZWW376GuU1x1ef9qP-ARM9-mXQhwFz4nbRT/s1600/transparant.png);width:200px;height:300px;z-index:9;position:absolute;padding:10px 10px 0}
.sliderTimer-item h3{font-size:20px;line-height:20px;color:#1b1b1b;font-weight:700;margin-bottom:10px}
.sliderTimer-item p{font-size:12px;color:#fff;line-height:16px;width:200px}
.sliderTimer-item ul{margin-top:0;position:absolute;bottom:10px;width:970px}
.sliderTimer-item ul li{display:inline}
.sliderTimer-item ul li a{line-height:1.3em;display:block;font-size:15px;font-weight:700;color:#fff;float:left;text-decoration:none;margin-bottom:10px;padding:0 10px}
.sliderTimer-item .attachment-post-thumbnail,.sliderTimer-item .attachment-full{position:absolute;right:0;top:0;z-index:-1}
.sliderTimer-item .attachment-full img{width:970px;height:auto;overflow:hidden;margin-top:-20%}
#sliderTimer-header li a.active span.carouselHeaderDecorator,#sliderTimer .active{display:block}

/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhleQbENrZDINeye6dMSPLFZTUlWPLuSJrJgqRs7HtVgwdLt66h11am1VgFptdDHLwZl08OknORFyOMCau3RF1lu7SaO8WtB_Ho45NES5Tu9ppDqBcI54lYI7IcyBNEdFwh7_iVnPIpRRk/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnyJ-1L4zKMxkTpEbEjjY46WtHRkJvTG85uVDuAFg2A-3NJy8qafnl5RCjipfne2QNjj5o17_HtKS3hyphenhyphengrWRVKrGAbqsWQCKbqaJv-Mp2JLxt8rCPDAiqThIv4WRaTjGxNpwz6bolmjo/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPyQx3Rcfmk7qZPPf_bj4tutA2n8CLXwhDztN3jr4NMMVYi0TvZa96K7K8AZ-XfQ-S7DyZ-78bh7u8RGxD4_0x8VHQsO4coikxG4TDUQ_B2yqU_trF6zM3ZuQf60DdHWtEI6b_Ip2NiVLi/s1600/uj-opacity-40.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

5 Busca este código

</head>

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

<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/511032252/jquery.cycle-metalhammer.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
            var stepInterval = 4000;
    var initialDelay = 2000;
    var fadeTime = 1000;
    var carouselID;
    var i=1;
    function myAfterCall() {
            $('.carouselProgress').width(0);
    }

    function myBeforeCall() {
            $('#sliderTimer-header .active').removeClass('active');
            startProgress();
            carouselID = $(this).attr('id').replace('mas-', '');
            startProgress(carouselID);
            $('#mas-head-'+carouselID).addClass('active');
    }
    function startProgress(carouselID){
            parentWidth = $('#mas-head-'+carouselID).width();
        $('#mas-head-'+carouselID+' .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
    }
    $('.sliderTimer-item-header').live('click', function(a){
            var clicked = $(this);
            $('.sliderTimer-item-header').each(function(e){
                        console.log(clicked.attr('id'));
                        console.log($(this).attr('id'));
                        if(clicked.attr('id')!=$(this).attr('id')){
                                   $(this).children('.carouselProgress').stop();
                        }
            });
    });
    //$('.sliderTimer-item').hover(function(){}, function(){});

            $('#sliderTimer').cycle({
                        delay: initialDelay,
                        timeout: stepInterval,
                        speed: fadeTime,
                        after: myAfterCall,
                        before: myBeforeCall,
                        pager: '#sliderTimer-header',
                        pause: true,
                        pagerAnchorBuilder: function(idx, slide) {

                                   carouselID = slide.id.replace('mas-', '');
                                   carouselTitle = $(slide).attr('ref');
                                   if(i==1) {
                                               myClass="active"

                                   } else {
                                               myClass="";
                                   }
                                   i++;
                                   return '<li> \
            <a href="#" class="sliderTimer-item-header '+myClass+'" id="mas-head-'+carouselID+'"> \
            <div class="carouselProgress"></div> \
             <span class="carouselHeaderContent">'+carouselTitle+'</span> \
                <span class="carouselHeaderDecorator"></span> \
         </a> \
      </li>';
                        }
            });
            //$('#sliderTimer-header:first-child').addClass('active');
            parentWidth = $('#sliderTimer-header .active .carouselProgress').width();
            $('#sliderTimer-header .active .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');
});
 //]]>
</script>
<script type='text/javascript'>
$(function() {$(&#39;.sompret-image&#39;).hover(function(){$(this).find(&#39;img&#39;).animate({top:&#39;260px&#39;,right:&#39;200px&#39;},{queue:false,duration:500});}, function(){$(this).find(&#39;img&#39;).animate({top:&#39;0px&#39;,right:&#39;0px&#39;},{queue:false,duration:500});});})
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {          

            //Set Default State of each portfolio piece
            $(".paging").show();
            $(".paging a:first").addClass("active");

            //Get size of images, how many there are, then determin the size of the image reel.
            var imageWidth = $(".sompret").width();
            var imageSum = $(".image_reel img").size();
            var imageReelWidth = imageWidth * imageSum;
           
            //Adjust the image reel to its new size
            $(".image_reel").css({'width' : imageReelWidth});

            //Paging + Slider Function
            rotate = function(){   
                var triggerID = $active.attr("rel") - 1; //Get number of times to slide
                var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
           
                $(".paging a").removeClass('active'); //Remove all active class
                $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
               
                        $(".crott").stop(true,true).slideUp('slow');
                       
                        $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
                       
                //Slider Animation
                $(".image_reel").animate({
                    left: -image_reelPosition
                }, 500 );
           
                       
            };

            //Rotation + Timing Event
            rotateSwitch = function(){   
            $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");       
                play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
                    $active = $('.paging a.active').next();
                    if ( $active.length === 0) { //If paging reaches the end...
                        $active = $('.paging a:first'); //go back to first
                    }
                    rotate(); //Trigger the paging and slider function
                }, 10000); //Timer speed in milliseconds (3 seconds)      
           
            };
           
            rotateSwitch(); //Run function on launch

 //On Click
    $(".paging a").click(function() {   
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });   

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 180;
summaryPost1 = 80;
summaryTitle = 20;
numposts = 1;
numposts1 = 6;

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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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='<div class="infos"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="carousel_buttons"><a class="carousel_link" href="'+posturl+'"><span>Más información</span></a></div></div><div class="attachment-full"><a class="carouselImageLink" href="'+posturl+'"><img src="'+img[i]+'"/></a></div>';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<numposts1;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=["January","February","March","April","May","June","July","August","September","October","November","December"];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=m+' '+day+' '+y;var trtd='<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';document.write(trtd);j++}}function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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='<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';document.write(trtd);j++}}
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZprzIc7zOJs9tiTZwWR3Zku4O8QvCI5jP02-Z329fKwCILIs9MU4cExrc_OpSvhYTVL9lwUvBdG9pfkaxCZgbKQHiJoDhGVQiqddEx5R1uhHGXU4lj3kUX5sqfw9z5GadvZo_d2FySeS/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h3>'+relatedpoststitle+'</h3>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 9px 10px 0;float:left;background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4BgyIjM9ys502VVjxTLtScomsYeEjdGzpq0ndYHjfZuFa39up38Sd8GxdKHWiX_GoGa56M3DaKX5SLqAu56iZ_-zbunkpYVLTfnwbBZCTTPSoJA0yGwdk7r2GkCai34tgVetrPJWUC0/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:126px;padding:0 10px;color:#222;height:38px;text-align:center;margin:0px 0px; font:12px Oswald; line-height:16px;text-shadow:0 2px 2px #fff">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
 //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
$(function() {
    resizeThumb('#PopularPosts1 img', '72', '105');
});
//]]>
</script>
<script type='text/javascript'>
$(function() {
$(&#39;#comments p&#39;).find(&#39;a&#39;).remove();
});
</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

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

Slideshow para blogger

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

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='sliderTimer-wrapper'>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='Inversiones' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Inversiones?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='Entretenimiento' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Entretenimiento?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='Deportes' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Deportes?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='Noticias' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Noticias?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-5' ref='Tecnologia' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tecnologia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
<li class='sliderTimer-item active' id='mas-6' ref='Internacional' style='background: none'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Deportes?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></li>
</ul>
</div>
</b:if>
</b:if>

Realiza estos cambios:

He marcado de color rojo a 6 tipos de categorías, esos son los nombres de los títulos del slideshow, cámbialos por los que tú quieras.

También, marque de color azul a 6 nombres de etiquetas, aquí es en donde tienen que poner el nombre de la etiqueta que quieran mostrar en cada una de ellas, borralos y pon el nombre de tu etiqueta.


Eso es todo ahora es momento de dar un clic en “Guardar plantilla” y mira los nuevos cambios en tu blog de blogger

Fácil verdad!

Recuerda suscribirte, y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿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:

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

7 comentarios:

  1. hola luis, te escribo nuevamente porque nose si salio el mensaje o no, estoy empezando a navegar un poco los blogs, ante todo felicitaciones por los trabajos y por enseñar a los demas algunos truquillos para mejorar nuestros blogs
    en cuanto a la plantilla de ayer por la cual creo que te escribi aunque no veo mi mensaje, podrias enviarmela o decirme donde la consigo? es la linea decada (la roja)
    desde ya muchas gracias y me suscribo!

    ResponderEliminar
  2. hermano como hago para que la imagen se centre automaticamente.

    ResponderEliminar
  3. hola todavía no me sale las entradas no se han cargado las estiquetas, cual seria el problema

    ResponderEliminar
    Respuestas
    1. Hola Jean, le sugiero me haga saber cual es la dirección de su blog, para así poder darle una solución.

      Saludos

      Eliminar
  4. Me ha costado dos veces instalarlo, pero al final lo conseguí.
    Funcionando a la perfección en mi blog de pruebas, a pesar de que me ha costado trabajo encontrar la forma de cambiar tamaños de fuentes y de gadget.
    Estoy deseando pasarlo al definitivo.
    Gracias y excelente trabajo.

    ResponderEliminar
    Respuestas
    1. Hola José, me da gusta saber que este tutorial le ayudo a implementar su blog de Blogger.

      Saludos

      Eliminar
  5. Luis!!! ando buscando uno como el de esta pagina http://organic-btemplates.blogspot.com.ar/ tu podrias extraerlo y compartirnos los codigos? pero no quiero que sea con las entradas populares... sino con las que yo quiera a mi gusto

    ResponderEliminar