Tabview para agrupar varios gadgets en uno solo

3 de junio de 2011 471 comentarios ,
Los tabviews son elementos que nos permiten agrupar en un solo contenedor varios gadgets y que pueden seleccionarse por medio de pestañas.
Su función principal es ahorrarnos espacio en el blog para evitar tener dispersos gadgets de la misma categoría y así poder agrupar en uno solo varios gadgets. Hay varios métodos para crear tabviews, algunos requieren jQuery, otros Mootools, o cualquier otro script.



Para agregarlo a tu blog entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega los estilos:
/* Tabview
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin:0;
padding:3px 0; /* Si usas plantilla del Diseñador cambia el 0 por 15px */
font-size:12px; /* Tamaño de la fuente en las pestañas */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#0B243B; /* Color de las pestañas */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#fff;
}
.tabviewnav li a:hover {
color:#fff;
background:#084B8A; /* Color de la pestaña al pasar el cursor */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#084B8A; /* Color de la pestaña activa */
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #ccc; /* Borde del contenedor general */
background:#fff; /* Color de fondo del gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Ahora antes de </head> pega este script:
<script type='text/javascript'>
// Tabview para agrupar gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>
Por último busca esta línea:
<div class='column-right-inner'>
O si usas una plantilla antigua de Blogger busca esta línea:
<div id='sidebar-wrapper'>
Pega debajo de cualquiera de esas dos líneas lo siguiente:
<div class='tabview'>
<b:section class='tabviewtab' id='Pestaña1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña3' maxwidgets='1'/>
</div>
Guarda los cambios, y entra en Diseño | Elementos de la página, ahí verás las nuevas áreas para agregar los gadgets, los identificarás porque tienen mayor separación que los demás.


Sólo tienes que dar click en Añadir un gadget para agregar el gadget a la pestaña que le corresponde, o bien, arrastrar un gadget que ya tengas a esa sección.

Si quieres agregar más pestañas sólo añade antes del último </div> una línea como esta:
<b:section class='tabviewtab' id='Pestaña4' maxwidgets='1'/>
Toma en cuenta que cada línea que agregues deberá tener un ID diferente, por ejemplo Pestaña5, Pestaña6, etc.

Puedes agregar varios tabviews, sólo repite el último paso y recuerda cambiar de igual forma el nombre de los IDs.

Si deseas agregarlo en una entrada para mostrar un contenido entonces el código que deberás añadir en tu post será este:
<div class='tabview'>
<div class='tabviewtab' id='Pestaña1' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
<div class='tabviewtab' id='Pestaña2' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
<div class='tabviewtab' id='Pestaña3' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
</div>

Ahí agrega el contenido que quieras donde se indica y el título de la pestaña, y de igual forma puedes añadir más pestañas antes del último </div> añadiendo un fragmento como este:
<div class='tabviewtab' id='Pestaña4' title='Título de la pestaña'>
... Aquí el contenido ...
</div>

Recuerda que, si tu sidebar es muy angosta no conviene que pongas muchas pestañas, o que los títulos de las pestañas sean muy largos, de lo contrario las pestañas se encimarán.

También debes tomar en cuenta que este gadget no acelera la velocidad de carga del blog, es únicamente para agrupar gadgets en uno solo, incluso -dependiendo de cada blog- podría tardar un poco en cargar el tabview.


471 comentarios en:

" Tabview para agrupar varios gadgets en uno solo "

  1. Genial, voy a intentar hacerlo en mi blog, me extraña que lo consiga, pero voy a ello ahora mismo!!!!!

    Gracias y buen fin de semana desde ObeBlog!!!

    ResponderEliminar
  2. Vaya genial y muy bien explicado!

    Gracias Potro

    ResponderEliminar
  3. Muy util potro par ahorrar espacio en el blog y lo mejor es muy elegante,Gracias y saludos..

    Sos el mejor bloggero

    ResponderEliminar
  4. Obe, seguro lo conseguirás, y sino entonces vemos qué se puede hacer ;) Buen fin de semana para ti también!

    Adalberto, a ti por tu visita!

    Juvinao, para ahorrar espacio nos viene de perlas :)

    ResponderEliminar
  5. interesante aporte hermano, gracias por el dato ;)

    ResponderEliminar
  6. Interesante y práctico.
    A la lista de pendientes :)
    Un saludo Potro.

    ResponderEliminar
  7. Caray que sencillez, yo probe dos metodos, 1º el de "El Escaparate" pero ese script no se porque pero me relentizaba demasiado la carga del blog, y despues el 2º y definitivo, el de otro blog de ayuda en ingles (con mis nociones de ingles playero y ayuda de google traductor) jejeje...
    Un abrazo Potro.

    ResponderEliminar
  8. Hola potrillo!!, yo de nuevo por aca... te cuento antes que nada que estoy probando tus trucos y apicaciones en joomla y me funcionan de maravillas! sobre todo lo de los reprocuctores de audio y video... segundo: estuve tratando de sacar el codigo del "tabview" de otras plantillas pero se me complicaba mucho a la hora de ubicarlos donde yo queria etc etc, ahora gracias a esta publicacion me ahorraste muchos dolores de cabeza... ahora lo que quiero es decirte que yo no pongo nombre a los gadgets, por una costumbre nada mas... y en vez de ponerlo en una entrada lo agrege desde la funcion "añadir un nuevo gadget en java" y lo ubique sobre las entradas y me funciona re bien! pero me quedan enumeradas y queda genial! (miralos) ... ahora ahorre tanto espacio en mi blogs que estoy pensando en agregarle nuevas funciones... aqui lo tienes al blogs: www.rmmusica.com.ar aun lo estoy diseñando pero ya empece a captar visitas... ah hablando de eso!: como puedo hacer que mi blogs se publique automaticamente en mi muro de face??... me han dicho que enlazando a twitter el blogs (alli se supone que se autopublica) y luego enlazar twitter a facebook (alli twitter puede autopublicar en el muro)... no es nada de otro mundo parece.. pero como se hace??? jaja... bien cambie de tema pero tambien es util!... gracias potrillo por tanto!!! NO TE VAYAS NUNCA!!

    ResponderEliminar
  9. Hola Odin KO,

    La verdad es casi todos los métodos para los tabviews suelen realentizar la carga del blog, seguro con este método te pasará lo mismo, sobre todo si tienes muchos scripts en el blog.
    De cualquier forma buscaré alguno que no sea tan lento al menos no tanto como los demás.

    Suerte con las clases de inglés playero, jajaja.

    ResponderEliminar
  10. Que que?????????? Justo lo que estaba buscando!!!!! Potro como adivinaste!!!!

    jejeje Gracias men, esto es justo lo que necesitaba para mi blog, voy a poner unos gadgets... a ver como me va!

    Potro mil gracias y felicitaciones, haces ingeniosos post!! ;)

    ResponderEliminar
  11. A mí lo que me gustaría es poder añadir varios gadgets de imagen o javascripts a un mismo "casillero" de la columna lateral. Por ejemplo, poner "Concursos" y bajo este título todas las imñagenes o javascripts que agrupo en concursos.
    No sé si me explico...
    n besote y gracias

    ResponderEliminar
  12. Funciona muy bien. Mejora mucho la apariencia del blog y acorta la cantidad de cosas que hay en la barra lateral.

    Estoy haciendo una plantilla para sustituir a la actual y estoy tomando buena nota de tus sugerencias. Por eso, muchas gracias.

    ¡Ah!una cosa, las pestañas son un tanto caóticas en el tabview que he hecho de prueba. A mí me pega por el tipo de blog que hago, pero igual en otros blogs más "seriotes" no queda tan bien. ¿Hay alguna manera de controlar el aspecto de las pestañitas?

    ResponderEliminar
  13. Potro disculpame, no se que hice mal, pongo en el tabview que hice, me salen las 3 pestañas y cuando coloco en ella los gadgets no me aparecen en el blog.

    visita mi blog y ayudame por favor.

    MHermon

    ResponderEliminar
  14. Hola, Potro:
    Porque solo puedo incluir un solo gadget en cada alojamiento. Y porque quedan en la parte superior y no en otro lugar como la parte baja. En este momento no me da resultado. Echale un vistazo.
    Gracias

    ResponderEliminar
  15. for tab, now we can used 100% with CSS3 ;)
    nice trick master...\m/

    ResponderEliminar
  16. RM Musica, te ha quedado excelente!
    Hay varias aplicaciones para que publiques en Facebook las actualizaciones de tu blog, la que yo uso y me ha funcionado muy bien es una llamada Graffiti; en Oloblogger hay un tutorial sobre ello:
    http://oloblogger.blogspot.com/2010/05/tus-entradas-en-facebook-rss-graffiti.html

    Circulo W.H., seguro te quedará muy bien :)

    ResponderEliminar
  17. Laube, no sé si entiendo bien, pero igual puedes poner un gadget de imagen que simule el título de esa sección, y debajo agregar los gadgets que quieres agrupar.

    Valentín VN, claro, ahí en las anotaciones en color verde se puede modificar su apariencia, aunque no lo mencioné igual se puede quitar el efecto redondeado y ponerlas cuadradas por si quieres que se vean más serias.

    ResponderEliminar
  18. Excelente Potrito!!! me late........estoy tratando de hacer lo de separar los gadgets, espero con más calma poder hacerlo porque no había podido, éxito!!!

    ResponderEliminar
  19. Potro no contestas mi inquietud, no me salens las pestañas, cambie el 15 por el cero a ver si era eso y nada, por favor ayudame.

    mi blog es: MHermon

    ResponderEliminar
  20. MHermon, voy respondiendo conforme van llegando los comentarios, pero todos los respondo. Acabo de probarlo en la misma plantilla (pensando que podría ser la plantilla) y ha funcionado sin problemas, quizá sea por algún otro script que tengas en el blog, o algún otro estilo, no lo sé :/


    FRANCISCO, porque al agregarlo es como añadir otra sección de la sidebar, por eso no puedes ponerlo en medio, puedes ponerlo arriba como se indica, o hasta abajo de la sidebar. Sólo se puede agregar un gadget por pestaña porque así está configurado, sin embargo, si deseas añadir más gadgets cambia maxwidgets='1' por el número de gadgets que quieres agregar a cada pestaña.

    ResponderEliminar
  21. Gracias Potro dime como ponerlo en la parte baja.
    Saludos

    ResponderEliminar
  22. Beben Koben, of course we can, we just hope that all browsers use CS3 :)

    Kary, estoy seguro que podrás ;)

    ResponderEliminar
  23. Esta genial potro hace tiempo que quiero esto, probaré a ver si es compatible con todo el jquery que tengo xD!!

    ResponderEliminar
  24. FRANCISCO, para ponerlo hasta el final de la sidebar sólo agrega el código (el tercero que se coloca) justo después de este código:

    <div class='column-right-inner'>
    <aside>
    <macro:include id='main-column-right-sections' name='sections'>
    <macro:param default='2' name='num'/>
    <macro:param default='sidebar-right' name='idPrefix'/>
    <macro:param default='sidebar' name='class'/>
    <macro:param default='true' name='includeBottom'/>
    </macro:include>
    </aside>

    Ojo, no hay que marcar los artilugios para que puedas ver ese código tal cual.

    ResponderEliminar
  25. Muy bueno, agrego esto ya, y me queda espacio para algo más

    ResponderEliminar
  26. Potro, ya lo he intentado, pero no me lo permite... al final, no sale ningún gadget bien.

    ResponderEliminar
  27. un buen dato que podrias ponerlo en el post es que hay plantillas como en la mia, que no te figura div id='sidebar-wrapper'-- sino que te figura asi: -div id='rsidebar-wrapper'- (se le agrega la letra "R" en este caso o del lado al que corresponde la sidebar . se entiende?.. y bueno... mi consejo antes de realizar algun cambio a las plantillas ademas de hacer una copia de la misma es LEER 2 VECES MINIMO CADA POST!!!... y que lo usen en vez de gadget, con el codigo ese que das al final del post y que es para poder usarlo en las entradas PERO COMO GADGET...no se si fui claro jaja... es mas prolijo y menos peligroso!... saludos y GRACIAS POTRILLO!

    ResponderEliminar
  28. Laube, entonces podrías probar con este mismo tabview, aunque está configurado para poner un gadget por pestaña puedes modificarlo para que muestres más, así al hacer click en la pestaña 'Concursos' saldrían todos los gadgets de imagen bajo ese tema.

    RM Musica, supongo que tu plantilla es personalizada, y como hay miles de plantillas no podría poner los miles de nombres que hay para esa área por eso sólo me enfoco a las plantillas originales de Blogger, pero sin duda los consejos que has dado son excelentes :)

    ResponderEliminar
  29. Muchas gracias, Potro... Probaré.
    Un besote

    ResponderEliminar
  30. Potro no me sirvio! intente mil veces, le cambie algunas cositas, acomode otras, incluso cambie o 0 por el 15px y nada, yo creo que es algo que tengo ya instalado.. quien sabe en todo caso me rendi!...
    :(
    Olle donde te puedo escribir para darte la contraseña de acceso a el blog privado que tengo para que me ayudes un poco porfa!!!

    Gracias potro!!!

    ResponderEliminar
  31. Potro no me funciona el buscador de google q tengo en mi cabecera... cual sepa el problema? si puedes probarlo seria mejor.. www.poker-maestro.blogspot.com... un abrazo

    ResponderEliminar
  32. exelente potro estaba buscando algo parecido :D, pero no se puede para ponerlo como un html/javascript

    ResponderEliminar
  33. Circulo W.H., probablemente sí es por algún otro script que tienes en el blog. Lo de la contraseña de acceso no puedo hacerlo pero en lo que pueda orientarte para que soluciones algún problema con tu blog lo haré con gusto.

    PokerPRO, parece que anda fallando no solo en tu blog pues hoy entré en algunos blog y quise usar el buscador y tampoco me anduvo así que seguro es un problema con el gadget, ya veremos si se arregla por si solo o si hay noticias sobre ello después.

    Sirius, ya que tengas puesto el tabview verás en Elementos de la página los recuadros para añadir gadgets, ahí puedes añadir cualquier tipo de gadget que quieras incluyendo los HTML/Javascript.

    ResponderEliminar
  34. potro que opinas del gadget share this, http://sharethis.com/ me parece muy completo me gustaría conocer tu opinión.
    saludos

    ResponderEliminar
  35. Potro en mi plantilla no esta div class='column-right-inner'

    ni

    div id='sidebar-wrapper'

    No tengo sidebar a la derecha y a la izquierda los Gadget lo tengo ubicado abajo, en el Footer.

    en donde es que tengo que pegar el codigo este section class='tabviewtab' id='Pestaña1' maxwidgets si no tengo columnas a la deerecha ni a la izquierda.

    Este es mi blog http://cine-desde-casa.blogspot.com/

    Potro estare aqui esperando tu ayuda.

    Saludos y gracias

    ResponderEliminar
  36. Buenas Potro.
    Respecto a la respuesta que has dado a FRANCISCO para colocarlo al final de la sidebar no entiendo muy bien lo de(el tercero que se coloca). Puedes ser un poco más explícito.
    Gracias.

    ResponderEliminar
  37. HOLA POTRO,NO SE QUE OCURRE,SEGUÍ TODOS LOS PASOS PERO NO APARECEN PESTAÑAS,SINO UN LISTADO EN EL QUE PICAS Y NADA. SIGUEN APARECIENDO LOS GADGETS DEBAJO. SI PUEDES ECHARLE UN VISTAZO Y DECIRME CUÁL PUEDE SER EL PROBLEMA...GRACIAS.
    http://iesagustindebetancourt.blogspot.com/

    ResponderEliminar
  38. OTRA COSA QUE QUERÍA SABER ERA CÓMO SE CONSIGUE QUE CUANDO PONES EL CURSOR SOBRE ALGÚN NOMBRE O UN ENLACE DEL BLOG, APAREZCA UN CUADRITO QUE INFORMA DEL CONTENIDO, LO HE VISTO EN OTROS BLOGS Y AHORA APARECE EN LAS "PESTAÑAS NUEVAS".
    UN SALUDO,GRACIAS

    ResponderEliminar
  39. Excelente Potro me gusto....potro una pregunta como hago para mostrat solo una parte de una imagen, ejemplo la imagen es un paisaje y en el medio hay un perro solo quiero que se muestre el perro y lo demás del paisaje que no se muestre

    ResponderEliminar
  40. juan david montoya, no he tenido la oportunidad de probarlo, pero mientras te funcione y cumpla su propósito siempre será aceptado :)

    Oscar, estos métodos son para plantillas originales de Blogger, sin embargo entré y vi que ya lograste ubicarlo en el footer de tu plantilla.

    ResponderEliminar
  41. Disculpa Potro por desviar el tema, pero necesito tú ayuda urgente, tengo un blog con más de 15.000 visitas... El formulario de comentarios no sé muestra, no aparece nada, agrego el sistema Disqus pero no funciona, también agrege Intense Debate y tampoco, ¿Alguna solución? Sé puede poner el sistema comentarios de facebook?

    ResponderEliminar
  42. Hola Gorbeia,

    El código que va debajo del código que le dije a FRANCISCO es este:

    <div class='tabview'>
    <b:section class='tabviewtab' id='Pestaña1' maxwidgets='1'/>
    <b:section class='tabviewtab' id='Pestaña2' maxwidgets='1'/>
    <b:section class='tabviewtab' id='Pestaña3' maxwidgets='1'/>
    </div>

    ResponderEliminar
  43. matiasascanio, muy probablemente otro script está interfiriendo con este y no deja que funcione, la plantilla no es pues lo he probado en todas las plantillas del Diseñador y en todos anduvo. En cuanto al cuadrito que mencionas se llaman tooltips, ahí en el buscador podrás encontrar dos métodos más además del que te he puesto en el enlace. Saludos.

    ResponderEliminar
  44. ciencia, la forma más sencilla es que edites la imagen con un programa de diseño.

    Usuario, estos días había un problema con los comentarios de Blogger, en algunos blogs no se podía comentar, quizá era tu problema (a menos que hayas eliminado algo de la plantilla). En Vagabundia hay una entrada que habla sobre los comentarios de Facebook, o bien, si tienes un respaldo de tu plantilla reinstálala para que se muestren de nuevo los comentarios en caso de que hayas eliminado algo.

    ResponderEliminar
  45. Ok potro muchas gracias logre ubicarlo.

    Ya me funciona genial.

    Saludos

    ResponderEliminar
  46. Hola Potro, me salio muy bien, muchas gracias. Pero quiero saber si arriba de estas pestañas puede haber otro gadget... Habría que ubicarlo de distinta forma en los div id='sidebar-wrapper
    Si sabes decime. Mi sitio es www.porvelez.com.ar
    Saludos!

    ResponderEliminar
  47. Hola!!!

    Tengo una duda:

    Si creo un tapview para, por ejemplo, redes sociales y quiero crear otro para, por ejemplo, otros blogs, la identidad de ese debe ser tapview debe ser tapview1?

    Grax por la informacion!!!

    David "El Rincón del Chiko"

    ResponderEliminar
  48. Potro, era justo lo que hace una o dos semanas te pedí, peeero...no me funciona!! He seguido todos los pasos y he logrado queme aparezcan los espacios para añadir los gadgets en Diseño de pagina. Pero cuando muevo a esos espacios los gadgets que quiero, blogger me detecta un error y no puedo guardar los cambios en el Diseño... ¿Sabes por qué puede ser??? Tanto tiempo buscando esta utilidad y no puedo ponerla :(((((
    Te dejo link a mi blog por si te es de ayuda:
    http://nosinmymakeup

    ResponderEliminar
  49. Perdona, que no te puse el link completo:
    http://nosinmymakeup.blogspot.com

    ResponderEliminar
  50. no potro no me explique bien, es decir, que en vez de que este predeterminado para ponerlo asi, que se pueda poner en forma de html/javascript y que no sea parte de elementos de la pagina, que uno lo coloque asi como uno coloca el orbit slider en cualquier sitio, que las pestañas se puedan colocar en cualquier sitio

    ResponderEliminar
  51. algo como esto http://www.cssblog.es/pestanas-simples-con-css-y-jquery/ pero no se aplicar esa guia, si tu pudieras hacerla la puedes postear porfavor :D

    ResponderEliminar
  52. gracias potro....en mi blogger no aparece el feed de mi blog como hago para encontrarlo??

    ResponderEliminar
  53. MaG@S RaDioMuSiC, probablemente sí, últimamente Blogger está con muchos problemas.

    Coloush +16, probablemente agregando arriba del tabview algo como esto:
    <div>
    <b:section class='sidebar' id='Otra-Sidebar'/>
    </div>

    ResponderEliminar
  54. El Chiko de Rojo, no, la clase sigue siendo la misma "tabview" lo único que cambiaría serían los IDs que hay dentro, Pestaña1, Pestaña2, etc. sólo a ellos se les cambiaría el nombre.

    No sin MyMakeUp, ¿qué error te arroja?

    ResponderEliminar
  55. Sirius, puedes ponerlo dentro de un HTML/Javascript, sería el código que menciono que iría en un post sólo que únicamente podrías poner texto o imágenes ahí pues no se puede poner un gadget dentro de otro gadget.

    ciencia, mira esta entrada.

    ResponderEliminar
  56. Hola Potro.. como estas? te cuento que coloque este artilugio, pero el pequeño detalle es, la coloque en la pagina principal, le cambie los nombre de las pestañas pero me salen en números 1-2-3, el otro detalle es que en la primera pestaña el fondo blanco me sale demasiado grande lo cual lo hace ver un poco feo, puesto que la pagina es negra, en cambio las pestañas 2-3 quedan bien.. www.artedigitalmcy.blogspot.com
    saludos.. gracias

    ResponderEliminar
  57. Es importante que te aclare, solo coloque el segundo código, ya que pensé en ponerlo solo en las entradas, ahora bien, pregunto se pueden poner en ambos sitios, es decir en una entrada y como gadgets laterales?

    ResponderEliminar
  58. Potro, cuando muevo los gadgets que quiero colocar a los respectivos sitios de "añadir gadget" que he creado, al ir a guardar los cambios desde Elementos de pagina, me aparece arriba, en vez de "cambios guardados", sale "SE HA PRODUCIDO ERROR. ACTUALIZA LA PAGINA E INTENTALO DE NUEVO". Lo he intentado como 10 veces y nada. ¿A qué se puede deber? ¿Hay alguna solución?
    Una petición: Como dices que hay varios métidos para instalar Tabview, ¿podrías enseñarnos otro/s? A ver si esos no me dan problemas...gRAcias!!!!

    ResponderEliminar
  59. me salio perfectamente bien , saludos y muchas gracias potro querido

    ResponderEliminar
  60. Jaja, Genioooo!!! esto es lo que nos faltaba a los bloggeros. Muchas gracias potro

    ResponderEliminar
  61. Potro si ayuda me gustaría aclarar algo. Como en mi caso La barra de navegación la tengo en la izquierda hice lo siguiente:

    En lugar de buscar div class='column-right-inner'

    Busque div class='column-left-inner'

    ResponderEliminar
  62. Potro, Una cuestion....
    Yo alojo las imagenes en Xooimage.com y me eh dado cuenta que tardan en cargar, sera porque tengo muchas imagenes? o tu que alojador me recomiendas?

    ResponderEliminar
  63. Hola Potro.
    Después de probarlo me quedo como estaba. Me ha quedado un problema. En la parte del diseño donde están los gadget están los de la parte derecha abajo de los de la entradas. He probado con cambiarle el tamaño pero persiste el problema. El blog se ve bien solo ese pequeño desajuste.

    ResponderEliminar
  64. Hola potro eh colocado este artilugio y todo perfecto, pero solo un pequeño detalle ¿porque me aparacen en forma de lista una debajo de la otra, y no en forma horizontal como en el ejemplo que das?
    Este es mi blog
    www.mundosmovies.blogspot.com

    ResponderEliminar
  65. artedigitalmcy, en el caso de cuando se pone en la entrada se debe poner el atributo title en el código, sólo que olvidé mencionarlo, ya he actualizado la entrada para que copies de nuevo el código como debería estar y así no te aparezcan los número sino el nombre que quieres para las pestañas. En cuanto a los fondos, eso va en relación al contenido del gadget, si el gadget tiene mucho espacio por defecto entonces verás el fondo más grande.

    ResponderEliminar
  66. No sin MyMakeUp, puede ser un problema de Blogger, prueba hacerlo desde otro navegador, y de igual forma borra cookies, historial y caché del navegador. Más adelante publicaré otro método, sólo que tardará un poquitín pues aun tengo pendientes otras publicaciones. Saludos!

    ResponderEliminar
  67. Por Mas Trabajo ltda., efectivamente, es que como la mayoría sólo tiene la de la derecha por eso no lo mencioné, pero es muy buena tu aclaración :)

    pixeltuxpan.com, definitivamente tendrás mejores resultados en Picasaweb, una porque es un servicio de Google, y otra porque es rápido su servidor. Puedes subirlas directo desde el blog (en una entrada) o desde la página de Picasaweb.

    ResponderEliminar
  68. hola potro, ya llevo algún tiempo con esta solución en mi blog y me encanta, porque puedo tener toda la información de los equipos de mi club en la sidebar usando muy poco espacio (http://cdginesbaloncesto.blogspot.com/).
    Aprovecho para darte la gracias por tu blog he visto un buen número de páginas de ayuda y esta es la mejor con diferencia, toda una inspiración.
    También me gustaría darte la dirección de mis otros dos blog, a ver que te parecen. Son http://presicdg.blogspot.com/ y http://jomolo.blogspot.com/ (este último es el más personal de los tres y he modificado la plantilla con algunos de tus consejos).
    Bueno, potro, muchas gracias de nuevo y un saludo desde Gines, Sevilla, España

    ResponderEliminar
  69. FRANCISCO, prueba poner justo debajo del código que pusiste en Edición de HTML (el tercero) lo siguiente:
    <div style="clear:both;"/>

    ResponderEliminar
  70. Excelente... Gracias.. mil gracias... como no lo pude colocar en el lateral (también) no me quedó sino colocarlas en el centro y me quedaron demasiado fino....

    ResponderEliminar
  71. Hola, Potro.
    Acabé de poner este truco en mi blog. Le modifiqué algo de los estilos, colores, etc. y me quedó perfectamente bien. Puse dos tabviews: uno en la parte de arriba de la sidebar y otro al final de la sidebar.
    Muchísimas gracias.
    Saludos!

    ResponderEliminar
  72. Admin MundosMovies, es por lo estilos de tu plantilla. Busca esta parte del código y añade lo que está en negrita:

    .tabviewnav li {
    list-style: none;
    margin: 0;
    display: inline !important;
    }

    ResponderEliminar
  73. Jomolo, te agradezco mucho tu amable comentario. Mucha suerte y éxito con tus blogs!

    Vicky, excelente :)

    ResponderEliminar
  74. Hola Potro:
    Lo puse y no se arreglo nada todo lo contrario paso los gadget en vista al publico a la parte baja. Me fui a diseño de ancho de pagina e intente corregir y nada.
    Saludos

    ResponderEliminar
  75. ola potro buen aporte hice todo tal cual pero no agregue el tabview en forma de gaget solo los quiero en las entradas y pues no me funciona no se que pasa acaso tengo que agregar todoo

    ResponderEliminar
  76. FRANCISCO, entonces déjalo como estaba, digo, mientras en el blog se vea todo el orden no creo que haya de qué preocuparse. Ignoro porque en tu caso se habrá puesto así, pero como te decía, mientras no afecte la apariencia del blog no hay mayor problema.

    Jorge Luis, ¿exactamente dónde lo has puesto?

    ResponderEliminar
  77. gracias `por responder Potro le hice tal cual lo que pasa es q carga lento ese era el problema muchas gracias

    ResponderEliminar
  78. Gracias Potro funciona perfecto y se ha acomodado muchas gracias :)

    ResponderEliminar
  79. Hola potro necesito una pequeña ayuda, tengo un blog de peli y puse dos paartes primero la pelicula y despues el trailer y arriba me sale un 1 y en el segundo me sale un 2 como le cambio ese uno por el nombre que yo quiera.

    Mira aqui te dejo la pagina para que te fijes en esta entrada http://cine-desde-casa.blogspot.com/2011/06/x-men-primera-generacion.html

    Saludos y muchisimas gracias por tus ayudas que me han servido mucho

    ResponderEliminar
  80. Hola Oscar,

    Supongo que lo habrás puesto antes del domingo pues no había actualizado el código de esta entrada. Copia de nuevo el código de ejemplo, y ahí verás que ya viene incluida el área donde debe ir el título de la pestaña y eso evitará que aparezca el número.

    Saludos!

    ResponderEliminar
  81. Buenas noches Potro .
    Rematando los ultimos detalles de la agrupacion de gadgets, aprecio, como veras en

    http://tabloncentral2010.blogspot.com/

    que en las dos ultimas pestañas(Ultimas Publicaciones y Summa Cum Laude) pues que deja un espacio tremendamente grande, asi como unas 10 veces... lo que necesita , solo pasa en estas dos ultimas , porque en la primeras les dedica el espacio correcto .

    Agradecido de antemano , recibe un saludo.

    ResponderEliminar
  82. Debe ser por el tipo de gadget que has incluido en esa sección. Prueba poner el gadget en la sidebar o ahí mismo en el footer pero que no esté dentro del tabview para que veas si se trata de un problema con el gadget que usas.

    ResponderEliminar
  83. Buenos dias Potro.
    He hecho las pruebas dentro y fuera, son los dos gadget oficiales de Blogger de "recent posts" , por lo que el problema esta al incluirlos dentro (fuera su comportamiento es normaal).
    Lo que voy hacer es buscar un gadget de ultimas publicaciones , que no sea oficial.
    Tambien otra prueba que hare sera eliminar todo y hacer de nuevo todas las modificaciones , ya que con tantas pruebas y cambios he podido "meter la pata".
    Muy agradecido.
    recibe un SALUDO.

    ResponderEliminar
  84. eres un crack! hace poco he descubierto ciudad blogger y le estoy sacando un partido a tus tutoriales que pa qué!!

    Es cierto lo que dicen por ahi...nos lees la mente...jojojo

    Gracias!

    ResponderEliminar
  85. por cierto potro, me gustaria saber como puedo hacer que el espacio donde va la imagen sea mas grande. Algunas imagenes se me salen del widget. puedes verlo al final de mi barra lateral

    http://keyramu.blogspot.com/

    Gracias!

    ResponderEliminar
  86. Hola Keyra,

    ¡Bienvenida a Ciudad Blogger!
    Lo que puedes hacer es agregar un parámetro que determine que las todas las imágenes de ahí tengan un ancho máximo definido, con eso ya no se saldrán, sólo que podría suceder que las imágenes muy anchas puedan distorsionarse ligeramente. Si deseas hacerlo entonces agrega antes de ]]></b:skin> lo siguiente:

    #Image1 img, #Image2 img, #Image4 img, #Image5 img, #Image6 img, #Image7 img, #Image8 img, #Image41 img, #Image42 img, #Image40 img, #Image32 img {max-width:186px;}

    ¡Saludos!

    ResponderEliminar
  87. Gracias, Potro. Está funcionando muy bien.

    Tengo dos cosillas que comentarte, para ver si me puedes dar una solución.

    La primera es que cuando meto el gadget de seguidores, se queda a cero, por lo que no puedo insertarlo en el Tabview (cosa que sería muy útil). ¿Puedo hacer algo para ver el gadget de seguidores correctamente y en el Tabview?

    Lo segundo es que me gustaría, como haces tú en tus entradas en los ejemplos, poder poner un gadget dentro de una entrada. Me gustaría poner las listas de enlaces favoritos en una entrada o en un página y quitarlas de la plantilla. He buscado en tu blog la solución y aunque en esta misma entrada del Taview das una pista, no estoy seguro de poder hacerlo bien. ¿Podrías echarme una mano?

    Muchas gracias por anticipado.

    ResponderEliminar
  88. Hola Valentín VN,

    El gadget de seguidores así como cualquier gadget debe funcionar igual de bien (o de mal, según el humor de Blogger) tanto en el Tabview como en la sidebar ya que finalmente se sigue agregando con el método tradicional para añadirlo así que ese no debería ser un problema a menos que nuevamente el gadget de Seguidores esté presentando irregularidades.

    La forma como yo pongo esos ejemplos es con iframes, o sea que en un blog distinto (de pruebas) hago el ejemplo y pongo el iframe en la entrada para mostrarlo. Pero que puedas tomar un gadget del blog y ponerlo en una entrada del mismo blog no se puede.

    Saludos.

    ResponderEliminar
  89. LuiziitO, estos métodos son para plantillas oficiales de Blogger. ¿En cuál plantilla lo deseas hacer?

    ResponderEliminar
  90. Muchas gracias por tu pronta respuesta, Potro.

    Debe ser un problema de el gadget de Seguidores. Si te fijas, tampoco sale en tu ejemplo y el de Facebook, que antes se veía, falla ahora. Deben ser gadgets muy flojuchos y con fallitos que hacen que no se vean en ciertos entornos más complejos que no sea la plantilla tal cual.

    Sería interesante que nos explicases cómo hacer un iframe (los he usado en la página de mi trabajo, pero no sé cómo van).
    Posiblemente solucione lo que quiero hacer agregándolo en una entrada mostrando una lista de enlaces tal y cómo lo cuentas aquí.

    Gracias. Me está resultando de mucha utilidad todo lo que presentas en el blog para modificar el mío.

    Un saludo.

    ResponderEliminar
  91. En el mío no aparece porque lo he puesto usando el método para mostrar los seguidores en otro blog, y con ese método algunas veces no se ve hasta que das click en Acceder o Seguir es cuando aparecen todos los seguidores.

    ResponderEliminar
  92. Hola.. gracias por el post, me sirvio de mucho pero necesitaria una ayuda mas...
    me gustaria poner varias opciones de video en un post de mi blog pero con imagen ensima con un anuncio cuando se hace click encima de la imagen se desaparece.. aca te dejo un ejemplo de este blog...
    http://www.animeytv.com/2010/11/ver-hangover-2-2011-online.html
    gracias de antemano por tu ayuda...

    ResponderEliminar
  93. naruto shippuden, en ese tipo de códigos no puedo ayudarte ya que todos los sistemas de publicidad penalizan ese tipo de acciones :/

    LuiziitO, prueba ponerlo arriba de esta línea:
    <div class='featbox'>

    ResponderEliminar
  94. potro... gracias por la ayuda.. pero yo no queria para publicidad.. simplemente para poner mi fansbook nada mas.. pero si pudieras hacerlo gracias..

    ResponderEliminar
  95. Buenos dias Potro.
    Pues nada, le he dado mil vueltas y sigue dejando un monstruoso espacio en blanco debajo, cuando los pongo dentro de la utilidad
    Ultimas Publicaciones ... o Summa Cum Laude ( son las ofiales de Blogger)
    y no soy capaz ... y me interesa eliminar este espacio.. y me gustan estas agrupaciones..

    Que hago ...?? desestimo la utilidad ???.

    Potro porfa ... echale un vistazo..

    http://tabloncentral2010.blogspot.com/

    Pues nada, muy agradecido, aunque no me lo mires, .

    Saludos Vredondof

    ResponderEliminar
  96. Buen día VRedondoF,

    Esos gadgets no son oficiales de Blogger, aunque se encuentran a disposición desde Blogger es creado por terceros. Pero aún así ese no es el problema pues acabo de probarlo con el de Recent Posts y al menos en el blog de pruebas (con plantilla del Diseñador) me ha salido perfectamente sin ningún espacio adicional, por lo que supongo debe ser algún estilo de tu plantilla.
    Hace unos minutos entré de nuevo a tu blog pero ya no veo el tabview, supongo que te decidiste a quitarlo así que ya no pude echarle una mirada de nuevo.

    Saludos.

    ResponderEliminar
  97. hola Potro, te vengo siguiendo desde hace un par de semanas y el trabajo que haces es estupendo. Dicho esto, verás que he probado el tabview en el blog http://www.return222.com , el problema que le veo (ya que me encanta lo elegante que luce) es la carga.
    Échale un vistazo y dame tu sincera opinión y si conoces algún otro código más ligero en temas de carga.
    Gracias y un saludo!

    ResponderEliminar
  98. Hola memento,

    Muchas gracias por tu comentario.
    Este, al igual que casi todos los tabviews suelen ser un tanto lentos para cargar. Si bien sí son lentos también influye la cantidad de gadgets que uses, en este caso los gadgets que has agregado son de por sí un poco lentos y luego añadir varios de ellos pues se vuelve más complicado el asunto.
    La recomendación general para todo blog siempre es que menos es más. De cualquier forma trataré de publicar otros métodos por si algún otro fuera más conveniente para ti.

    Saludos.

    ResponderEliminar
  99. Gracias por tu tiempo Potro.
    Lo que he hecho ha sido, aprovechar dos tutoriales tuyos, éste y el de últimos post por categorías y hace las tabviews.
    Quedo a la espera de algún método más rápido ya que el tiempo de carga es fundamental.
    Gracias de nuevo, un saludo

    ResponderEliminar
  100. Hola Potro!!

    Tengo un blog en el que tengo los gadgets a la derecha, pero cuando entro en mi plantilla
    busco los códigos de las columnas...
    ¡PERO NO ENCUENTRO NADA!
    Aqui te dejo mi blog para ver sipuedes ayudarme:
    www.clubnerfspain.blogspot.com

    ResponderEliminar
  101. Hola SergiFire!,

    En las plantillas hechas con Aristeer no sé decirte bien pues nunca las he usado, pero quizá quieras probar poniéndolo arriba o abajo de una línea como esta:

    <div class='art-sidebar1 section' id='sidebar1'>

    ResponderEliminar
  102. E pulsado Control F y e buscado la línea que me has dicho, expandiendo artilugios y también sin expander, pero sigo sin encontrar nada :S :S
    Si adivinas algo avísame porfavor.
    Gracias de todas formas.

    ResponderEliminar
  103. Pues como te decía, esas plantillas no las conozco (por lo problemáticas que son), así que no sabría darte una línea exacta, pero quizá buscando alguna similar (aunque no esté exactamente igual) a ella te sirva.

    ResponderEliminar
  104. Ok gracias Potro, el mejor blogger sin duda ;) ;)

    ResponderEliminar
  105. saludos potro .. como siempre dfelicitaciones por tus post siempre muy buenos ... bien solo vine a hacerte un consulta se que puede llegar a ser muy sencillo pero creeme lo e intentado y nada.. lo que quiero saber es como hacer que la parte que integramos a la plantilla ( añadir gadgets pestaña 1 , 2 y 3 ) aparezca abajo de los añadir gadget ( en la imagen ejemplo de este post tienes 2 ) para que esta seccion tabview que integremos aparezca en la parte inferior de la sidebar o columna lateral del blog .... saludos nuevamente y esperare tu respuesta con ansias .. gracias por tu atencion .. si quieres chekea mi blog

    www.jugamoscityville.blogspot.com

    veras que e integrado tres secciones ...

    hasta pronto ...

    ResponderEliminar
  106. ups... suena medio confusa la consulta espero haberme explicado bien pasa que no sabia ni encontre otra forma de consultartelo

    ResponderEliminar
  107. acabo de cambiar de plantilla pero aun asi me interesaria saber la respuesta a mi consulta

    ResponderEliminar
  108. Hola hecgabor, en el comentario #24 está la respuesta a tu pregunta, aunque sólo aplica para plantillas del Diseñador. Saludos.

    ResponderEliminar
  109. muchas grecias ... es que estaba pensando tanto en explicarme que al revisar las respuestas ni me di cuenta de ello..gracias ...

    ResponderEliminar
  110. potro he visto esta web http://www.noticiasgl.com/
    y me ha gustado mucho el tabview donde se agrupa por categorias, noticias mas vistas y comentarios, ¿podrias hacer una entrada diciendo como hacerlo? gracias
    (si no tienes tiempo, no pasa nada)

    ResponderEliminar
  111. una cosa que se me ha olvidado decirte, me refiero al diseño.

    ResponderEliminar
  112. Pues ese es un plugin de WordPress, pero si me entero de cuál es el script original lo pruebo y lo publico.
    Saludos.

    ResponderEliminar
  113. hola potro, me gusto mucho este truquito pero me parece que mi plantilla no es de las oficiales de blogger. solo logre realizar los dos primeros pasos.. me gustaria saber como puedo insertarla en mi plantilla, de preferencia al final del sidebar (ya que lei en un comentario que no se podia poner al medio de la sidebar) te agradezco tu ayuda. mi pagina es www.viajeconciertos.com (es de blogspot)

    saludos

    ResponderEliminar
  114. Hola Viaje Conciertos,

    Al final de la sidebar no sé porque no conozco esa plantilla, pero al inicio de ella puedes probar poniendo el código justo después de:
    <div id='mainright'>

    Saludos.

    ResponderEliminar
  115. hola potro, gracias por tu ayuda, logre el resultado que esperaba.. muchas felicitaciones por tu pagina y gracias por ayudar a los que no manejamos tanto este asunto del html.. sigue asi que lo haces muy bien.

    ResponderEliminar
  116. hola potro:
    estuve leyendo esta entrada y intente hacer algo y no me funciono. lo que intente hacer es colocar eso pero en mis post agrupar vídeo pero no pude no se si tu puedas un ejemplo mejor como esta entrada de este blog http://narutoshippuden-episodios.blogspot.com/2011/06/218naciones-en-movimiento.html gracias potro ansió tu respuesta. yo fiel seguidor de ciudad blogger la namber one ^^

    ResponderEliminar
  117. Hola Ero-k'rlox,

    Es el código que dice que se usaría dentro de las entradas, y donde está el texto en color rojo iría el código del video, por ejemplo:

    <div class='tabview'>
    <div class='tabviewtab' id='Pestaña1' title='Título de la pestaña'>

    <iframe width="425" height="349" src="http://www.youtube.com/embed/1rhf8ymGHHg" frameborder="0" allowfullscreen></iframe>

    </div>
    <div class='tabviewtab' id='Pestaña2' title='Título de la pestaña'>

    ... Aquí el código de otro video ...
    </div>
    <div class='tabviewtab' id='Pestaña3' title='Título de la pestaña'>

    ... Aquí el código de otro video ...

    </div>
    </div>

    ¡Saludos!

    ResponderEliminar
  118. potro:
    eres my salvador quedo perfecto gracias mil gracias buena noche xD

    ResponderEliminar
  119. hola potro yo tambien queria hacer lo mismo que Ero-k'rlox pero no me funciono mira como keda http://cinewow.blogspot.com/2010/07/naruto-shippuden-219-sub-espanol-online.html espero ke me ayudes y intente cambiar el 0 por 15 y tampoco gracias.

    ResponderEliminar
  120. El procedimiento es el mismo para todos.

    ResponderEliminar
  121. si potro: pero por alguna razon no meda y nose cual :'( nose ke tengo mal :(

    ResponderEliminar
  122. Pues en esa entrada veo funcionando perfectamente un tavbiew con videos, supongo que ya lo has solucionado.

    ResponderEliminar
  123. Perfecto Potro pero necesitaría que las cajas que contienen el titulo sean cuadradas?

    ResponderEliminar
  124. Sólo elimina esta parte del código:

    border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;

    ResponderEliminar
  125. Excelente Muy Agradecido por este post esta buenisimo :) ya lo aplique a mi blog por ejemplo ya lo hice en mi sidebar con dos pestañas, pero quiero hacerlo de nuevo lo mismo pero en distino widget no el mismo no se si me entiendes espero que si como lograria esto? :S Muchas Gracias

    ResponderEliminar
  126. Puedes agregar otro tabview si eso es a lo que te refieres, sólo tienes que cambiar el nombre de las ID para que no te cause conflicto.

    ResponderEliminar
  127. Busque la linea que dices agrege debajo del cierre del div
    ,


    Todo bien hasta cuando agrego dos widgets guardo entro al blog y no se como se ve el de mas arriva mira (http://borrador-j4.blogspot.com/) :S

    Muchas Gracias, de antemano.

    ResponderEliminar
  128. Quizá es por todas las modificaciones que le hiciste a los estilos como alterar los márgenes, ponerle un ancho grande a cada pestaña, etc.
    Prueba ponerlo con los estilos originales para ver si así se ve bien, sino ver cómo se puede corregir, pero primero debe verse bien antes de personalizarse.

    Saludos.

    ResponderEliminar
  129. NO PUEDO me puedes alludar no me aparece las dos cosa
    creo que tengo lo mismo que oscar no me aparecen

    Por último busca esta línea:O si usas una plantilla antigua de Blogger busca esta línea:
    de estas palabras estan un codigo abajo de ellas uno cada uno ninguno de los dos me aparese que hago

    ResponderEliminar
  130. Hola X.A.N.A,

    Me encantaría poder ayudarte para que encuentres las líneas adecuadas, pero sin saber en cuál blog tienes el problema me es imposible ayudarte :(

    ResponderEliminar
  131. http://tutoriales-xana.blogspot.com/

    es ese lo hise hace poco grax por tu ayuda soy medio nobato en estas cosas

    ResponderEliminar
  132. Prueba ponerlo arriba de esta línea:
    <b:section class='sidebar' id='sidebarright' preferred='yes'>

    ResponderEliminar
  133. me sirvio sos un groso amix para el que lea este comentario altamente recomendada la web ami me ayudo mucho... XD saludoos amix

    ResponderEliminar
  134. Hola Potro! primero, gracias por todo lo que nos aportas!

    Respecto al tabview te comento que no salió nada :( cambié algunos conceptos como colores y bordes, será por eso??

    salu2!

    ResponderEliminar
  135. Puede ser, prueba ponerlo primero tal como está, sino sale entonces dime dónde lo has puesto.

    ResponderEliminar
  136. Hola oie potro tengo una duda, la hize por el primero metodo y por el segundo metodo, ya que nesecitaba 2 cosas diferentes, pero el primer metodo esta como un poco bugeado en mi blog, ya que el titulo de las pestañas se corren de para un lado en mi blog http://bloggesor.blogspot.com donde dice contenido destacado y ultimas entradas, hay tengo ese problema, sabes como lo puedo solucionar porfa.
    el titulo por ejemplo donde dice ultimas entradas no se sale por que sea largo, por que si lo pongo cortico por ejemplo con un numero tambien pasa lo mismo, se sale y se descuadra :S
    lo que quisiera es tal vez poder cambiar las pestañitas de posicion correrlas un poco a la derecha o a la izquierda, o si no solo acomodarlas bien, te lo agradeceria mucho thx :)

    ResponderEliminar
  137. Hola Sirius,

    En el primer código, en las anotaciones en color verde hay un comentario que dice cómo se soluciona el problema de las pestañas en esas plantillas, donde dice:
    /* Si usas plantilla del Diseñador cambia el 0 por 15px */

    Saludos.

    ResponderEliminar
  138. a sorry no me fije en ese detalle :P

    ResponderEliminar
  139. umm lo e hecho como dijiste pero sigue igual :C

    ResponderEliminar
  140. Parece que tiene conflicto con algo, cambia esa línea por esta:
    padding: 3px 1px !important;

    Eso lo deberá solucionar.
    Saludos.

    ResponderEliminar
  141. Hola Potro genial como siempre eres el boss, tengo una pregunta acerca de este Tabview.
    Mi pregunta es sera posible que en las pestañas en vez de titulo vaya alguna imagen, o tambien imágenes con texto de antemano muchas gracias y espero tu respuesta

    ResponderEliminar
  142. Hola TH3 V1P3R,

    Puedes ponerle una imagen de fondo a las pestañas, pero sería el mismo fondo para todas, no es que el título sea reemplazado por una imagen.
    Si deseas hacerlo sólo tienes que agregar el estilo en donde dice 'color de fondo de la pestaña', quedaría así:

    background:url(URL de la imagen);

    ResponderEliminar
  143. Gracias probare y vere que tal se ve, gracias por tu contestación y te tengo otra pregunta mira mi blog es este y la plantilla ya venia con la cabecera separada en dos gadget, se puede volver a poner uno que este de lado a lado, por que con los dos widget solo queda con dos imagenes pero quisiera que quedara una sola http://cityvilleextremereloads.blogspot.com/ ese es mi blog espero tu respuesta gracias y saludos

    ResponderEliminar
  144. Busca esta parte:

    #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;}

    Cambia ese 47% por 100%

    Luego busca más abajo esto y agrega lo que está en negrita:
    #header2{display:none; float:right;width:51%;margin-right:0px;padding-right:0px;overflow:hidden;}

    Eso eliminará la cabecera derecha y expandirá la izquierda.

    ResponderEliminar
  145. Mil gracias quedo muy bien y espero no molestarte con tantas preguntas pero me surgio otra duda puse disqus en mi blog para comentarios, pero solo aparece en las entradas hay alguna forma para que tambien aparezca en las paginas estaticas y como te dije espero no molestarte mil gracias

    ResponderEliminar
  146. No tengo idea, sólo una vez probé Disqus y fue hace varios años, no sé si haya que hacerle algo aparte para que sea visible en las páginas.
    Saludos.

    ResponderEliminar
  147. se puede poner imagenes en:

    background:#0B243B; /* Color de las pestañas */
    background:#084B8A; /* Color de la pestaña al pasar el cursor */
    background:#084B8A; /* Color de la pestaña activa */

    en vez, de colores?

    ResponderEliminar
  148. Sí, se hace de esta forma:

    background: url(URL de la imagen);

    ResponderEliminar
  149. Potro, listo ya esta todo esto, pero quiero poner un gadget, como por ejemplo de entradas recientes, que aparezca su descripción con imágenes en eso si puedo! pero si deseo por categorías por pestaña, te dejo un ejemplo:

    http://goo.gl/45vzn

    ResponderEliminar
  150. ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜJosε ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜŞцgoi , cambia los color:#fff; por el del código del color que quieres.

    ResponderEliminar
  151. Hola Potro. De nuevo gracias por tus estupendos aportes :D
    Tengo una duda: No existe otro elemento con LA MISMA FUNCION del tabview? porque me esta generando errores. Muchas gracias!

    ResponderEliminar
  152. El_Panda, mira esta entrada, ahí está lo que necesitas:
    http://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html

    Jonathan Mera, pues hay algunos que circulan por la red, sería cuestión de que probaras otros para ver si te funcionan mejor.

    ResponderEliminar
  153. hola potro:

    felicidades por sus vacaciones bien merecidad.
    hoy tengo una consultica. llevo casi 2 meses con este truco y lo habia utilizado no para agrupar gadges si no videos en mis entradas y me surgio un problema que este truco ya no me funciona nose que scrip este interfiriendo o nose que error tenga, nesesito tu ayuda bro saludos y cuidate.
    Aqui le dejo my blog http://mangacolombi.blogspot.com/2011/08/naruto-manga-552el-prerrequisito-para.html

    aaa y si tienes algun scrip que pueda remplazar este truco de ante mano te agredeceria que me lo dieras. =D

    ResponderEliminar
  154. Hola Cinecolombi,

    A simple vista no encuentro un error, aunque seguro lo hay. ¿Recuerdas qué fue lo último que hiciste antes de que dejara de funcionar? ¿Algo que hayas agregado o un cambio en la plantilla?
    Tengo pendiente buscar otro método, en cuanto termine con los otros post pendientes buscaré uno que pueda ser más compatible.

    Saludos!

    ResponderEliminar
  155. Potro muchas gracias! recién veo esta respuesta, había perdido donde lo había comentado jeje! pero ahora tengo el mismo problema que Cinecolomb

    ResponderEliminar
  156. Y si recuerdo por que no puedo verlo, desde que agrege un script de publicidad en enlaces, cuando lo saco se puede apreciar en tabview, pero cuando twngo funcionando el otro script ya no se puede ver, este es desde donde comienza el otro script:

    ResponderEliminar
  157. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  158. a este es mi blog! http://www.descargatupelicula.net/

    ResponderEliminar
  159. Pues supongo que no querrás sacar el script de los anuncios. Pero igual com le decía a Cinecolombi, apenas tenga un tiempecito publico uno que no lleve scripts, si mal no recuerdo se puede hacer con sólo CSS.

    ResponderEliminar
  160. Ok Potro! estaré atento a tus post! gracias!

    ResponderEliminar
  161. Hola potro, traté de incluirlo en un blog y no se puede, resulta que el codigo que mencionas:


    Por último busca esta línea:
    div class='column-right-inner
    O si usas una plantilla antigua de Blogger busca esta línea:
    div id='sidebar-wrapper

    No lo encuentro por ningún lado :-(

    Sabes de algún lugar en que este el código con otro nombre?..trate de hablarte por msn pero ya no entras hace siglos jeje

    http://bit.ly/n73Aqo

    ResponderEliminar
  162. Puedes probar ponerlo debajo de:
    <div id="right-col">

    ResponderEliminar
  163. Hola!! La verdad genial todos tus aportes, creo que he utilizado más que nadie tus trucos..

    Te hago una consulta respecto a este post.. Como puedo hacer para poner un gadget encima de estos 3, lo quiero arrastrar pero no me deja, queda estático ahi arriba..

    Te dejo el link http://soydeprueva.blogspot.com/

    Quiero que por ejemplo me quede el "follow by email" por encima..

    Gracias de antemano!!

    ResponderEliminar
  164. Hola Marcos,

    Sólo puede colocarse arriba de todos los gadgets, o al final, la razón es que éste queda fuera de la sidebar ya que no se puede romper la estructura de la sidebar para meterlo en medio de ella.

    Saludos y gracias por tu comentario.

    ResponderEliminar
  165. Potro, saludos por acá...

    Este (ayer vi tu respuesta a mi petición) y tu sugerencia la cuál aplique perfectamente y hasta incluí una tabla.

    Pero ahora lo que quiero saber es como colocar las pestañas desde el inicio (esq. izquiera) Y no dejar el margen que me aparece como de media pulgada. Creo que si lo pongo desde el margen izquierdo tendré más espacio para poner como cuatro pestañas más.

    Te dejo el link de la página para que veas...

    http://tvboricuausa.blogspot.com/p/guia-tv.html

    Saludos.

    ResponderEliminar
  166. Quizá tengas que eliminar el padding que está dentro de:
    .main-inner .widget .post-body ul {

    ResponderEliminar
  167. Hola, Potro.

    Fíjate que hace tiempo instalé el Tabview y funcionaba correctamente, sin embargo, recientemente agregué un nuevo gadget que es como un carrusel de fotos que se desplazan de derecha a izquierda (el código sólo aparece en el gadget, no agregué nada a la plantilla) y ahora ya no se visualiza el tabview.

    No sé si estoy en lo correcto, pero imagino que ambos scripts son incompatibles y me gustaría saber si sabes de algún hack que permita que ambos funcionen al mismo tiempo.

    Gracias por tu atención, Potro. Saludos.

    ResponderEliminar
  168. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  169. Con este no, pero hay muchos carruseles por ahí, sería cuestión de que buscaras otro que no genere problemas con el tabview o cualquier otro script que tengas.

    ResponderEliminar
  170. Creo que por ahora dejaré este carrusel, mientras hallo otro que funcione con el Tabview.

    Gracias, Potro. Pasa buen día.

    ResponderEliminar
  171. Genial Potro estupendo, está de lujo, lujisimo diria yo, me encanta este blog, no sabes lo que estoy aprendiendo con el.

    He puesto en marcha este tab y queda muy bien, pero me pasa algo raro.

    Cuando lo pongo en un gadget se ve genial (saltandome el ultimo paso y añadiendolo donde quiero), pero cuando lo coloco dentro de una entrada (que es donde lo quiero utilizar) se desconfigura.

    Las pestañas se quedan muy arriba del cuadro o tabla y ademas cuando cambias de pestaña se baja dicho cuadro o tabla.

    He probado en varios blogs de pruebas que tengo y pasa lo mismo en todos.

    ¿Sabes por que puede ser?

    Gracias por la ayuda, mientras seguire mirando cositas por aqui, que hay a montones.

    Saludos.

    ResponderEliminar
  172. Perdon Potro por ser pesado, te cuento.

    He probado en insertarlo en paginas independientes y se ve mejor que en las entradas, lo unico es que las pestañas quedan un poco desplazadas hacia la derecha, por lo demas genial.

    Tambien queria comentarte algo que he hecho que a lo mejor no esta bien, pero parece funcionar.
    Como habia que cambiar la ID cada vez que insertaramos un tab, he probado a eliminar la ID y poner todas las tab sin ID, por que para lo que lo quiero necesito agregar muchas y no es comodo estar cambiando la ID y acordarse siempre por que numero te has quedado.

    El final es que de momento he probado insertando dos y parece funcionar bien sin ID.

    ¿es correcto hacerlo asi?

    Gracias Potro por la ayuda.
    Saludos

    ResponderEliminar
  173. Hola Reina,

    En las entradas siempre existe la posibilidad de que se den esos conflictos, esto es porque cada plantilla tiene estilos específicos para que los elementos se comporten y vean de determinada forma.
    Lo ideal es que cada tab tenga su propia ID para evitar conflictos entre ellas, pero si quitarlas aun ten funcionan entonces así está bien; en realidad eso de las IDs es únicamente para después no haya problemas, pero si no existe problema alguno sin ellas entonces no son necesarias (al menos no en tu caso).

    Muchas gracias por tu comentario y cualquier cosa por acá estamos ;)
    Saludos.

    ResponderEliminar
  174. Cuando has puesto el primer código has eliminado una llave de cierre del código de arriba, por eso no funciona:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  175. Potro... cómo poner la publicidad al inicio del post como aparece en esta entrada... saludos!! www.mycalidad.blogspot.com

    ResponderEliminar
  176. Hola Diego,

    ¿Te refieres a AdSense?
    En esta entrada hay un enlace con la información para poner AdSense en 10 lugares del blog, incluyendo al inicio del post.
    http://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html

    ResponderEliminar
  177. Buenos dias Potro.
    El diseño que tengo es el de 2 columnas en la parte inferior y quisiera meter el contenedor en la columna de la derecha.
    http://tabloncentral.blogspot.com/

    Me he dedicado a ir colocandolos en distintas partes para ver si lo lograba ...pues nada que llevo mas de 4 horas y no soy capaz.
    ¿ podrias indicarme que tengo que hacer ?.
    Agradecido de antemano.
    Saludos VREDONDOF
    quiero que la agrupacion me salga en el

    ResponderEliminar
  178. Buen día VRedondoF,

    He entrado a tu blog y lo veo en la parte inferior, no sé si es ahí donde lo querías pues no veo otra columna aparte de esa. Si no es ese lugar donde deseas ponerlo y tienes otra columna, pon un gadget cualquiera en la columna donde lo quieres poner y me avisas para saber de cuál columna se trata.

    Saludos.

    ResponderEliminar
  179. Ok.
    te dejo la portada en blanco para que lo veas mejor.
    y te pongo en el de la izquierda el archivo.
    El blog es
    http://tabloncentral.blogspot.com/

    en el de la derecha ( esta el anuncio de blogger )es donde quiero poner el agrupamiento.
    Saludos.

    ResponderEliminar
  180. como veras ahora tengo la agrupacion en el completo.
    Lo hago porque quiero poner una viñeta o fotografia en la parte izquierda y por ello dejar esa parte lo mas LIMPIA POSIBLE.
    Saludos

    ResponderEliminar
  181. Pues nada, estuve un rato tratando de ver cómo acomodarlo en el footer dividido, pero el problema con esas plantillas es que su estructura está dividida en distintas áreas y macros, y si bien se puede colocar arriba de los divididos o abajo de ellos no he podido incluirlos dentro de los divididos, ni en el lado izquierdo, ni en el derecho :(

    ResponderEliminar
  182. A mi me paso lo mismo.

    Probe por toda la plantilla intentando colocar la agrupacion , la consegui colocar arriba y abajo , pero no en ninguna de las dos divididas.

    Poder se debe poder, hacer ya que la original tuya se puede colocar en el lateral.

    El handicap que tenemos los que estamos aprendiendo algo es que cada vez queremos hacer las cosas mas dificiles y al final NOS LIAMOS por hacer cambios que posiblemente son imposibles.

    Lamento haberte hecho perder el tiempo.En cualquier caso muy agradecido.

    Un saludo y a tu disposicion.

    ResponderEliminar
  183. No es ninguna perdida de tiempo, siempre es bueno intentarlo para salir de la duda qué tanto es posible y qué tanto no lo es.

    En mi ejemplo se puede ahí porque el sidebar en las plantillas del Diseñador tienen limpia esa área sin macros, pero lo que es el footer está dividido por macros, ahí es donde viene el problema porque dentro de ellos no podemos meter mano.

    Saludos.

    ResponderEliminar
  184. hola potro
    Y sabes como se puede dividr un gadgets en varios gadgets pero no en forma de pestañas. Más bien, como un division local del sidebar?

    ResponderEliminar
  185. Hola Potro
    Lo hice,pero no me resulto .
    Lo que me paso es que ensanche el mail, outer y sidebar muuuucho
    Entonces en diseño->elementos de pagina
    Me salen todo ensanchado y la barra de gadgets del sidebar me sale abajo del main.
    Que sucede etnonces? Que la aplicacion del tabview me sale sobre el main y no puedo agregar ningun gadget!!!
    que puede ser?

    ResponderEliminar
  186. Posiblemente al ensanchar los contenedores de la plantilla no quedaron ajustados al 100% del ancho total. Verifica que todos y cada uno de ellos tenga el ancho que debe tener, por ejemplo, si en ancho total de tu plantilla es de 1000px entonces entre la sidebar, el main y los márgenes no debe superar los 1000px de ancho.

    ResponderEliminar
  187. Potro, ayudame! sabrás como personalizar por ejemplo en cada titulo de pestaña1, pestaña2, etc, me gustaría que salga una imagen, por ejemplo te dejo esta radio: http://www.oxigeno.com.pe/radioenvivo.html

    Ahí verás en el chat: Twittwr - Facebook

    Gracias!

    ResponderEliminar
  188. Podrías poner como título del gadget un punto, y luego ponerle una imagen de fondo al título del gadget:
    http://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html

    Tal vez eso pueda funcionar.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger