Un bloguero Practicando

Slideshow para Blogger

Slideshow para Blogger

Comparteme :


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.

Demostración


1- Ir a Blogger
2- Un clic en “Plantilla”
3- Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

4- Busca este código: ]]></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(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/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(http://3.bp.blogspot.com/-_RkTTrabRbs/UQWYmksVCYI/AAAAAAAABaU/3vvF1qFSAYI/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(http://4.bp.blogspot.com/-b9OEmVdL6Q4/URA_BL7OXWI/AAAAAAAAB2k/c9exOQaNu2U/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(http://4.bp.blogspot.com/-PpOJ-vHwxvc/T5mGXWpHVCI/AAAAAAAAAqQ/Y1VmLDvoeHI/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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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]='http://1.bp.blogspot.com/-QjSndGbF0No/T-Nt3HgKsDI/AAAAAAAAG9o/cN6_Oy306rc/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(http://4.bp.blogspot.com/-PE4DGGi62Rc/UAV05DVyMbI/AAAAAAAAHrQ/acf9emv3Od4/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>

6-  Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget” 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

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


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/-/Internacional?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 celeste 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



Comparteme :
Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Slideshow para Blogger .
Comparte

Artículos Relacionados

Tu mensaje sera visible tras la aprobación del administrador