Hace poco veíamos una manera de poner debajo de los títulos botones para compartir en las redes sociales, de forma flotante, es decir, que éstos permanecían visibles aun cuando se bajara el scroll de la página.
En esta ocasión veremos algo similar, digo similar porque aunque también se mantienen flotantes, éstos botones para compartir las entradas del blog bajan junto con el scroll de la página pero con un ligero efecto deslizante, además, éstos botones se encontrarán del lado izquierdo de las entradas. Incluiremos sólo los botones básicos: Facebook, Google+ y Twitter, sin embargo se pueden agregar más o cambiarlos por otros.
Puedes ver el ejemplo aquí mismo en esta entrada, al bajar la página verás que los botones también bajan, y al subir de nuevo los botones regresarán a su lugar.
En esta ocasión veremos algo similar, digo similar porque aunque también se mantienen flotantes, éstos botones para compartir las entradas del blog bajan junto con el scroll de la página pero con un ligero efecto deslizante, además, éstos botones se encontrarán del lado izquierdo de las entradas. Incluiremos sólo los botones básicos: Facebook, Google+ y Twitter, sin embargo se pueden agregar más o cambiarlos por otros.
Puedes ver el ejemplo aquí mismo en esta entrada, al bajar la página verás que los botones también bajan, y al subir de nuevo los botones regresarán a su lugar.
Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
Lo primero es ingresar a Plantilla | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>Luego buscamos esta línea:
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: -100px; /* Distancia desde la izquierda */
border: 1px solid #FB5F55; /* Borde del contenedor */
border-right: 0px;
padding: 10px;
background-color: #FFF; /* Color de fondo del contenedor */
z-index:9;
}
#BotonesFlotantes div {
margin: 10px 0;
}
</style>
<div class='post-header'>Y debajo de ella pega lo siguiente:
<b:if cond='data:blog.pageType == "item"'>Guarda los cambios y listo.
<div id='BotonesFlotantes'>
<div><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>
<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>
</div>
</b:if>
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.
Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>
Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.
Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>
GENIAL!!!
ResponderEliminarMuchos estábamos a la espera de este truco, se ve mejor que los botones flotantes anteriores.
Por cierto, si tienes tiempo de entrar a Wevoluciona.com, haber si me puedes decir porque el menú que tengo no se ve en las entradas.. No ubico la condicional.
Gracias viejo, un abrazo.
Gracias Valentín. Tienes una condicional que oculta el gadget donde está el menú, por eso no se ve ahí.
Eliminar#HTML2
{
display: none;
}
Quitando eso se mostrará en todas partes.
Un abrazo.
Je es verdad.. Gracias viejo :D
EliminarHola acabo de pegar los codigos en mi blog de blogger pero no aparecen aun; sin embargo sale un cartel que dice que la maquina esta sieno protegida de posibles ataques etc...este es mi blog http://hacerdinerored.blogspot.com.ar/ me gustaria que le den un vistazo por favor gracias.
ResponderEliminarNo veo los códigos en ese blog, pero cualquier mensaje de ese estilo nada tiene que ver con estos botones, no se usa ningún sitio para alojar códigos, y los botones son los oficiales que provee cada sitio.
EliminarNo Me Salee Porfavor Quien Me Puede Ayudar
ResponderEliminarCon gusto te ayudamos pero sin saber en cuál blog lo has puesto será imposible poder ayudarte.
EliminarQue tal POTRO un gusto saludarte y aunque lo que preguntare no tiene relacion con esta entrada te comento que estoy decidiendome comprar el dominio en BLOGGER, ya lei que no es directamente con ellos la compra del dominio y lei lo de DNS y los subdominios, el correo y ya me enredé... Que me recomiendas hacer antes, durante y después de la compra del dominio. GRACIAS
ResponderEliminarNo tienes de qué preocuparte VDesing, aun cuando lo compres desde Blogger puedes acceder a los DNS (como se explica en una entrada por ahí) para agregar subdominios o añadir otro tipo de registros.
EliminarAntes de que te decidas mira esta entrada:
http://ciudadblogger.com/2009/10/todo-lo-que-hay-que-saber-antes-de.html
Muchisimas gracias, excelente informacion como siempre, saludazos compa! Dios te bendiga.
EliminarHola...!! en faktores no lo veo (ya puse los codigos de arriba).. :/ se supone que debe tener jquery (es nuevo el blog)??? aun no le entiendo del todo a eso del jquery - Scriptaculous. será que en f. México hay algo de eso y por eso no funcionan bien los trucos?? saludos Potro sensei.. :)
ResponderEliminarNo veo que tengas puesto el segundo código, si ya lo has puesto y no se ve prueba con la otra ubicación que se menciona en la entrada, pero además de eso como usas Scriptaculous deberás hacer lo que se indica en el enlace que está al final.
EliminarSaludos.
hola :( tuve que hacer faktores como una extension de los otros blogs por que no funcionaban varios trucos en ellos , como ponerte un ejemplo lo de arrastrar las imágenes lo puse en faktores por que dejó de funcionar en f. México pero ahora que metí el codigo de los botones flotantes ya dejó de funcionar..!!! los eliminé para ver si funcionaban de nuevo pero noooo ya no funciona el arrastrarlos .. entonces no sé que hacer !! cada que meto algo nuevo deja de funcionar algo ya estoy desesperada entonces de nada sirvió que hiciera faktores, se puede solucionar? ayudame pls y tambien quiero saber que trucos no son "compatibles" con otros trucos o efectos ??para ya no estar molestandote tanto de verdad me apeno mucho por hacerlo ..:( saludos
Eliminarp.d. ya confirmadisimo este script no dejaba que funcionara lo de las imagenes q se arrastran, el sript de esta entrada ya lo eliminé completamente es que dejé una linea que no borré ..ahor mi duda es cómo le hago para que se puedan los dos?
EliminarNo te apenes que no es ninguna molestia. Supongo que el script que usas para que las imágenes se arrastren es Scriptaculous, el cual no es compatible con jQuery, es por eso que al final de la entrada menciono el tema de esos dos scripts así como el enlace que te llevará a la entrada que explica cómo hacer funcionar ambos.
EliminarGracias ;)
Eliminartengo que aplicarme en este tema.. :$
mira : dices, Para aplicar esta variable necesitamos hacer uso del comando jQuery.noConflict();
En dónde veo, busco en toda la plantilla? no entiendo.. :&
Mira esa entrada, ahí verás un ejemplo de dónde se tiene que poner.
EliminarSaludos!
este como quedaria??
Eliminarquedaria bien asi?? :$
< !-- Prototype y Scriptaculous-->
<----
-------
P.d le tuve que quitar lo de en medio ya que no me dejaba publicarlo completo, ese codigo es el que puse para arrastrar las imágenes.. saludos
EliminarNo he podido ver el código que dejaste. Para que un código pueda verse en los comentarios primero tienes que convertirlo a texto plano:
Eliminarhttp://ciudadblogger.com/p/conversor-de-html-texto-plano.html
Ya que lo conviertas a texto plano deja el comentario en la otra entrada, pues allá es donde tenemos que darle el seguimiento a ese tema ;)
Saludos.
es que aqui es el problema.. mira quise poner el script de esta entrada publicada(botones para compartir flotantes que se deslizan),pero no es compatible con este script:
Eliminar<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
la pregunta de arriba que no se ve es, que tengo que hacer con este script para poder poner el de esta entrada(botones para compartir flotantes que se deslizan)..?? :)
En realidad el problema es allá, porque ya no es asunto de la instalación sino de la compatibilidad. Si te fijas en esa entrada verás que dice que los cambios se aplican al script de jQuery, NO al de Scriptaculous. Así que a ese código que has dejado no tienes que modificarle nada, es al script de jQuery donde tienes que hacer las modificaciones. Ahí mismo en la entrada hay un código de ejemplo para que te guíes.
EliminarGracias potro y me referia a el "problema es aqui" al codigo, no a la entrada jeje ..
Eliminarya checo eso,mil gracias
Hey Potro! No se ven los botones, hice el cambio que dijiste y todo pero no me funciona...
ResponderEliminarnadamaspersonal.com.ar
Sino dejas puesto el código no puedo saber porqué no se ve :/
EliminarCuando lo pongas, pon el segundo código arriba de <div class='postmeta-primary'>
Potro! Ahi deje puesto los codigos, hice lo que me sugeris pero nada.
EliminarYa te he respondido más abajo, en el otro comentario ;)
Eliminarmuy bonito!!!! potro me encanto!!!...
ResponderEliminarQué gusto que así haya sido :)
Eliminargenial me quedaron super bien, justo lo que estaba buscando
ResponderEliminarya te extrañabamos, crei que ya no ibas a postear mas :(
Yo también lo creí, jaja, no es cierto, es sólo la falta de tiempo, pero aquí estamos.
EliminarUn abrazo!
Muchas gracias Potro, como siempre, unos aportes fantásticos, pero antes de poner más cositas en el blog, debo solucionar un problema que tengo desde hace varios días, y que creo está relacionado con Scriptaculous y Prototype, quizá me puedas ayudar.
ResponderEliminarDe repente dejó de funcionar el efecto “mostrar/ocultar” de los elementos en la sidebar. Tampoco funciona el efecto deslizante “subir”. Cuando se clica en todo eso, directamente se desplaza a la cabecera del blog.
No sé si esto pasa sólo en mi blog o es a nivel general, aunque he visto algún otro blog con el mismo problema.
Algo parecido sucedió en abril pasado y, gracias a ti, lo solucioné cambiando el script.
Agradecería muchísimo tu ayuda, también en esta ocasión.
Salud:)s
Hola MariLecce, parece que Scriptaculous y Prototipe nuevamente han actualizado su versión y por eso se dan esos problemas.
EliminarCambia esto:
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
Por esto:
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>
Con eso deberá funcionar de nuevo y ya no te deberá dar problemas en adelante.
Saludos.
Hola Potro (me encanta), hice el cambio como indicaste, pero no funcionó.
EliminarEstoy un poco desesperadilla :D
Gracias de nuevo por tu atención ;)
No sé con cuál navegador lo hayas probado pero al menos con Chrome y Firefox el botón de Subir me funcionan bien (con el efecto deslizante) en ambos navegadores.
EliminarCon todos! bueno: Chrome (el que utilizo normalmente), Firefox y Explorer.
EliminarNo "sube", ni todo lo demás. No entiendo, pasó de repente, sin tocar nada (eso decimos todos, pero es cierto).
De repente: ¿puedo tener algún otro conflicto en la plantilla?. Nunca tuve otro problema (excepto en abril).
¿Puedo "abusar" un poco más de ti? jaja, muchas gracias, de verdad :)
No sé decirte, te repito que a mí tu blog me funciona bien ese botón con su efecto con los navegadores que lo he probado, Chrome y Firefox. Quizá debas limpiar el navegador (eliminar cookies, caché e historial), y/o ver tu blog desde otro ordenador.
EliminarDiariamente hago "limpieza general" con CCleaner. Lo he visto desde otros ordenadores, y nada...
Eliminar¿Tú lo ves bien? pues mira lo que me pasa a mí en tu blog: http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html#footer-wrapper (esa es la dirección que pone al darle a los botoncitos, en este caso bajar, y se coloca en el footer del blog sin efecto deslizante) exactamente lo mismo que en mi blog, pero con subir (...#outer-wrapper). Y en los elementos de la sidebar pasa igual (aquí añade # a la dirección del blog).
En fin, creo que ya te estoy molestando demasiado. Muchas gracias :)
En esta entrada no se ve el efecto deslizante, pero es porque para poner el demo de los botones tuve que mover códigos aquí y allá de jQuery, pero si ingresas a otra entrada, por ejemplo a esta:
Eliminarhttp://ciudadblogger.com/2010/04/como-usar-dropbox.html
Verás que el efecto deslizante funciona sin problema.
Sí, eso lo entendí :)
EliminarBueno, no sé como, pero de repente ahora está funcionando.
No sé si tendrá que ver, que lo último que hice fue limpiar el Registro de Windows.
La verdad es que no tengo ni idea, pero la realidad es que funciona.
Muchas gracias, Potro por darme una solución, por tu atención y por tu paciencia :)
Saludos Potro:
ResponderEliminarYa instalé los botones y me quedaron fenomenal pero mi pregunta es una muy, muy simple (eso creo), jaja.
Cuando le doy clic a tu botón de twitter (de esta entrada) me sale esto:
Botones para compartir flotantes que se deslizan y flotan al bajar http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html vía @ciudad_blogger
PEROOOOO, cuando yo le doy clic en mi blog sale algo asi:
¡EXCLUSIVA! Jullye Giliberti ¡en ¨11:11 En mi cuadra nada cuadra¨! | TVboricuaUSA http://www.tvboricuausa.com/2012/07/exclusiva-jullye-giliberti-en-1111-en.html
Mi pregunta es: Que puedo hacer para que en vez de que salga ( TVboricuaUSA ) sin la arroba, me salga asi como lo tienes tu de... via @TVboricuaUSA?????
Hola TVboricua.USA, localiza el código de tu botón de Twitter, y después de esta parte:
Eliminarhttps://twitter.com/share"
Agrega esto:
data-via="TVboricuaUSA"
Excelente, hace días lo estuve buscando!!
ResponderEliminarMe alegro que lo hayas encontrado :)
EliminarBravo!, Coolerisisisisisimo el post Potro, ya me extrañaba que no hubiera post, pero la espera valio, se ve muy bueno el artículo.
ResponderEliminarAunque el los otros botones flotantes me gustan más, no llevan ningún script!
Ah Potro por cierto, el efecto arriba/abajo con scriptaculous no funciona!
ResponderEliminarMuchas gracias Sergio. Los botones ahora no funcionan porque tuve que poner el script en esta entrada para el ejemplo :)
EliminarBuen inicio de semana!
Hola @potro! Disculpa que te escribo esto en la entrada equivocada. Búsco unir dos templetes para blogger. O sea, a uno que es el que más me gusta, aplicarle algunas cosas como el slideshow en el front que tiene el otro. Entre otras cositas en la entrada. ¿Crees poder ayudarme? Podemos hablar privado? Estoy dispuesta a pagarte por este servicio, pues sé que tienes el tiempo muy limitado.
ResponderEliminarGracias antemano por tu respuesta. ¡Abrazos desde Quisqueya!
Hola Amandysha, todo depende de qué tanto quieras hacerle a la plantilla, si bien hay cosas que se pueden integrar hay otras que se tienen que crear desde que la plantilla se diseña.
EliminarSi prefieres que sea en privado puedes enviar un mensaje desde la página de Facebook.
Un abrazo.
Dejé un comentario y aún no lo veo ¿por qué?
ResponderEliminarPorque se están moderando, por eso no los ves de forma inmediata ;)
EliminarHola! ya instalé los botones, y al parecer funcionan pero solo cuando veo los post individuales, me gustaría poder activar los botones en la página de inicio, en dónde debo ubicar el código? o solo funciona para los post?
ResponderEliminarSólo funciona en los posts, se menciona eso en la entrada ;)
Eliminarups, perdón, no me fijé en eso, de todas formas me parece genial y lo estoy usando. Gracias de igual manera.
Eliminarpotro alguna manera de añadir alguna linea para que el anterior se convierta en este sin tener que buscar cada parte del codigo borrarla y pegar esta?
ResponderEliminarNada es magia, si quieres estos botones tendrás que quitar los otros y poner estos, no te quitará ni 5 minutos ;)
EliminarOK me gusta... pero eso de moderar comentarios no me gusta!!
ResponderEliminarA mí tampoco, pero he tenido que tomar esa decisión dado que hay un par de usuarios que dejan enlaces a páginas con contenido malicioso en todas las entradas. Si no tomo esa decisión, nos cierran el changarro :(
Eliminar¡Hola Potro! Llevaba tiempo esperando este recurso sin embargo no me funciona:
ResponderEliminar- He comprobado mi versión de jquery y la tengo actualizada.
- No uso Scriptaculous.
- He probado poniendo a 0px la distancia por la izquierda.
- He probado a ponerlo debajo de div class='post-header'
- He probado a ponerlo arriba de data:post.body
¿Qué estoy haciendo mal?
Habría que ver en cuál blog lo has puesto para saber qué puede estar yendo mal.
EliminarEn mi principal:
Eliminarwww.elultimoduelo.com
Gracias potro.
Ponlo arriba de <div id='Fecha'> ahí puede funcionar.
EliminarNada. Tampoco funciona :S
EliminarNo lo veo puesto ahí. Si no te funciona en otro lugar ponlo en otra área cercana, tienes que probar varios lugares hasta que aparezca. Y recuerda entrar al post para ver si ya aparecen.
EliminarEs lo malo de usar una plantilla muy personalizada :/
Como se menciona en la entrada, si no aparecen pon la /* Distancia desde la izquierda */ en 0px, si lo haces verás que aparecen, ya sólo tendrás que jugar con ese valor hasta que quede a la distancia deseada, posiblemente con un 20px se vea bien.
ResponderEliminarY yo sin saber de ti :)
ResponderEliminarOtro abrazo!
He escrito esta entrada: http://www.vvalcoi.com/2012/07/desde-el-polideportivo-otra-vez-oscuras.html
ResponderEliminarBasándome en esta de otra web: http://www.diarioinformacion.com/alcoy/2012/07/07/robo-cables-inutiliza-tuneles-via-verde/1272426.html
¿Es ilegal? ¿Debería borrarla?
Gracias.
Pues no, no la has copiado, sólo te has basado en ella, no hay nada de malo en eso ;)
EliminarPotro! ahi puse el codigo realice otras modificaciones y nada. Deje los codigos como estan en tu post. Saludos
ResponderEliminarNo veo el segundo código, el que te mencioné que debías ponerlo arriba de:
Eliminar<div class='postmeta-primary'>
Ahi apareció pero no queda como lo tenes vos
Eliminar<------ Queda en el borde separado del post. Como lo puedo solucionar??? Gracias potro!
Juega con la /* Distancia desde la izquierda */ como se menciona en la entrada, posiblemente con un 20px se vea bien.
EliminarSaludos!
Hola potro. Gracias por el aporte, es lo que estaba buscando pero hay un problema, ¡No se ven!.☹
ResponderEliminarNo se por qué puede ser. Yo seguí todo paso a paso.
Te dejo mi blog:
www.elblogdelclarinete.blogspot.com
Gracias potro.
Muy bueno tu blog.
Hasta pronto y gracias.
Pon el último código arriba de <div class='post-body'>
EliminarOtra cosa. ¿Que es jQuery?
ResponderEliminarGracias de nuevo y hasta pronto
Es una librería de scripts para conseguir efectos, como el efecto de estos botones.
EliminarTienes en tus entradas unas imágenes de ese sitio el cual ha sido detectado como un sitio que puede alojar contenido malicioso. Siempre que tomes una imagen súbela a tu propio alojamiento, así te evitarás ese problema, entre muchos otros.
ResponderEliminarHola , no encuentro ( class='post-header'> ) en mi templates y asi no puedo hacer mas trucos de lo que quiero hacer.
ResponderEliminarpodrias ayudarme a encontrar otro symblo que vale este symblo
aqui te dejo mi blog andaluciashop.blogspot.com
Hola , no ncuentro el class='post-header'>
ResponderEliminarmi blog se llama ( andaluciashop) podrias ayudarme a encontrarlo
graciass
Hola, pega el código arriba de:
Eliminar<div class='postmeta-primary'>
Hola potro, perdona por la molestia, pro tampoco encuentro el codigo class='postmeta-primary'>
Eliminar¿Has recordado marcar la casilla "Expandir plantillas de artilugios"?
EliminarClaro que si me he recardado expandirlas y buscar el codigo por (crtl + f) y tampoco encuentro nada, se pido k busca en el template de mi blog donde puedo copiarlo, porfavor.
Eliminargraciass
De tu plantilla es que lo he visto, por eso te he mencionado esa etiqueta, porque según tu plantilla ahí aparece:
Eliminarhttp://i46.tinypic.com/2z7mxkw.png
Estimado amigo Potro, espero que te encuentres bien, hace bastante tiempo que no visitaba tu página, hoy me veo en la obligacion de pedirte ayuda en un pequeño problema, se que lo que te pedire no tiene ninguna relevancia con este post y ante eso te pido perdon, bueno, resulta que hace poco volvi a cambiar plantilla en mi pagina y la verdad que me gusto mucho en como se ve, pero como nada es completamente perfecto tengo una pequeña disconformidad, agregue un gadget como menu pero me deja mucho espacio de margen entre cada una de las opciones y ocupa mucho espacio, quisiera saber como reducir esos margenes para que me queden un poco mas juntas las opciones, hechale un vistazo al menu de mi blog y veras a que me refiero... hasta pronto mi buen amigo, cuidece y gracias de ante mano...
ResponderEliminarHola cesar1976, gracias por tu comentario.
EliminarAgrega antes de ]]></b:skin> esto:
.tabs-inner .widget li a {
padding: .6em 1.0em;
}
Lo que está en negrita es el espacio de izquierda y derecha de cada elemento de la lista.
Saludos.
Estimado amigo Potro, quedo excelente, muchisimas gracias...
EliminarHola, buenas noches Potro.
ResponderEliminarTe envío un enorme saludo.
Preciosos están estos botones, muy útiles para quienes deseamos que nos compartan ;)
Hoy quisiera preguntarte algo puesto que generosamente siempre me sacas de los enredos en los que me meto... Descubrí que los contenidos de las páginas de mi blog se duplican y no sé por qué :( supongo que de tanto jugar con el código terminé duplicando algo...
La verdad no lo sé, ¿qué puedo hacer? ¿podrías ayudarme por favor?
Te envío una lluvia de éxito. Amablemente,
Lluvia
Hola Lluvia, con los artilugios expandidos revisa si esta etiqueta la tienes dos veces cerca del mismo lugar:
Eliminar<data:post.body/>
Si es así elimina una de ellas, da Vista Previa y mira si todo está bien.
Saludos.
Hola, buenas tardes.
EliminarComo siempre, tu ayuda es muy oportuna :) ¡Muchisisisisismas Graias! Ha quedado genial, ya no se duplican los contenidos.
Te envío una lluvia de éxitos. Amablemente,
Lluvia
Me alegra que se haya resuelto, que tengas un lindo fin de semana.
Eliminar¿Crees que este truco se puede aplicar a pantallas pequeñas? Lo que pasa es que no se ve entero, sino que se ve entrecortado, ya que la pantalla que tengo es pequeña....
ResponderEliminarSi se hace entonces... ¿Cómo se haría?
Me temo que no Abraham, en resoluciones pequeñas siempre los elementos que están "fuera" son los que o no se ven, o se ven incompletos :/
EliminarQué mal :(
EliminarHola amigo. oye una pregunta como puedo dividir la cabezera de una plantilla en dos, osea lo que quiero hacer es que quede un gatget para añadir un banner con publicidad u otra cosa ya intente con tu post de dividir cabezera pero no me sale.
ResponderEliminarMira aqui te dejo la plantilla para ver si tu puedes dividirla en dos asi como te digo. Porfavor. http://dl.dropbox.com/u/44776682/templatedownload2.xml
Muchas gracias
Hola PontePlayMx, deja en esa entrada que mencionas el blog donde lo estás haciendo para no desviarnos del tema de esta entrada.
EliminarSaludos.
se que lo que te dire no es nada relacionado con este tema pero perdon la molestia voz os podia decir si hay alguna forma de redireccionar un blog es decir que no termine en blogspot.com sino que termine en simplemente en .com o algo similar gracias y pos perdone por referirme a lo que no tiene que ver nada con este tema :)
ResponderEliminarHola mundogotic, sí se puede, tienes que comprar un dominio y así tendrás la extensión que desees.
EliminarSaludos.
a listos gracias
EliminarEstán geniales amigo.
ResponderEliminarQué bueno que te gustaron :)
EliminarGracias por tu comentario Angel. Las plantillas originales de Blogger no tienen ninguna presentación, quizá las que has visto son personalizadas y les han añadido un slider. Mira en la categoría "Slideshows" ahí verás algunas opciones.
ResponderEliminarSaludos.
Hola admin, no veo los códigos puestos en ese blog.
ResponderEliminarOIGAN, SABEN COMO PONER UN BOTON DE ME GUSTA EN LA IZQUINA INFERIOE DERECHA DE MI BLOG ? ALGO ASI COMO LO QUE ESTA AQUI QUE DICE ¿Te gusta Ciudad Blogger? ASI O SOLO EL BOTONSITO, PERO SABEN COMO ?
ResponderEliminarAquí está la entrada sobre esos botones:
Eliminarhttp://ciudadblogger.com/2012/01/botones-flotantes-para-recomendar-el.html
Muchisimas gracias, tengo un blog es dominio .com y recive entre 5,000 y 7,000 visitas al dia, les interesaria una afiliacion ?
Eliminarhttp://www.modsmexicanosfull.com/
Gracias, pero no participamos en esos programas de intercambio :)
EliminarPotro, tengo un problema menor y no sé en qué entrada dejarlo. Resulta que el buscador de mi blog no me deja eliminar el título y darle a guardar, me obliga a ponerle un título y quisiera quitarlo de alguna forma. Probé borrándolo de la plantilla directamente y los cambios se guardaron pero volvieron a aparecer...
ResponderEliminarGracias.
Hola Jorge, expande los artilugios de tu plantilla, localiza el título de tu gadget, verás un poco abajo esto:
Eliminar<h2 class='title'><data:title/></h2>
Elimínalo y desaparecerá el título del gadget.
Saludos.
Muchas gracias.
EliminarPotro mi problema no tiene nada que ver con este pots, mita tenia una plantilla y la cambia por otro pero la antigua me dejo 3 gadgets que quiero eliminar pero no ti tienen la opcion de eliminar.
ResponderEliminarmi blog es: http://videospacion.blogspot.com/
los gadgets que quiero eliminar son unos que tienen imagen y se pone la url de la entrada. uno se llama, videos amateur, videos de famosas, peliculas porno y revistas esos son los que quieron quitarlos pero no me da la opcion.
Hola videosxxx, elimínalos directo de la plantilla. Sin expandir los artilugios busca el título de cada gadget, verás que cada título está en una línea que comienza con <b:widget
EliminarElimina esa línea y se irá el gadget.
:/ ya intente todo y no me sale nada de nada T________T si pudiera ayudarme se lo agradeceria T_______T
ResponderEliminarmi blog es :http://anime-renders.blogspot.com.es/
Mira el comentario #26.1
EliminarSige sin funcionarme :(
EliminarNo veo que hayas puesto ese último código, revisa si lo tienes dos veces, si fuera así ponlo también en el otro, en el repetido.
Eliminarhola potrillo acabo de poner los codigos como mencionas en este post pero no me sale incluso intente lo que aclaras al final poner la /* Distancia desde la izquierda */ en 0px pero no me saleee..!
ResponderEliminarno se k hacer potrillo ayudame
este es mi blog : http://studiosjadesign.blogspot.com
Gracias de antemano potrillo .. Soy tu fan !
Gracias Jean Philipe, el segundo código ponlo arriba de:
Eliminar<div class='postmeta-primary'>
Saludos.
Saludos Potro:
ResponderEliminarSé que no es del tema, pero no sabía donde preguntarte... No puedo ver los vídeos que tengo en la sidebar izquierda de mi blog. Me sale una imagen negra. ¿Sabes porqué es? Me falta un plugin, o es un error de la plantilla? Please, help me.
:) http://TVboricuaUSA.com
Ah, y se me olvido comentarte que no es sólo en mi blog Potro, sino, en todas las páginas que entro. ¡Sólo puedo ver vídeos en YouTube! ¿Porqué será?
ResponderEliminar¡Saludos!
Si no los ves en ningún blog es tu navegador, quizá necesites actualizar la versión de Flash.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola Julio Cesar, mira el comentario #42.1
Eliminarpotro encontro esa linea pero cuando la elimino me da esto error
ResponderEliminarbX-jah6mb
Prueba con la interfaz antigua.
Eliminarhola ptoro soy completamente nuevo aqui me encanta tu trabajo me ayuda demasiado ... pero u problma tengo una plantilla instalada una que tu hiciste y no puedo encontrar : div class='post-header' que hago ??
ResponderEliminarHola Oscar, ¿cuál es el blog donde no lo encuentras?
Eliminarperdona es www.vinevolando.blogspot.mx si me pudieras auxiliar seria de mucha ayuda :)
EliminarHola de nuevo Oscar, pon el código debajo de:
Eliminar<div class='post-header-line-1'/>
Si no funcionara busca otra línea igual a esa y aplica el cambio también ahí.
Saludos.
si ese es el problema que no encuentro esa linea .. que puedo hacer.. no aparece en el codigo html
EliminarSí está, pero recuerda que tienes que marcar la casilla "Expandir plantillas de artilugios".
EliminarHola Potro...
ResponderEliminarintente usar el código, pero no hay caso para que funcione.
Intente con las aclaraciones que pusiste al final, pero nada..
que podrá ser?
Mi blog: http://www.fmsentimientos.com.ar/
Saludos
No veo los códigos puestos, pero además en el caso de tu plantilla el segundo código debes ponerlo donde se indica en el comentario #25.1
EliminarSaliendo del tema, ¿conoces de la técnica llamada Scroll Parallax? Me ha gustado mucho, pero no sé si se pueda aplicar a un blog.
ResponderEliminarMira >> http://www.zonaw.com/scroll-parallax/
Conozco el concepto pero dudo que se pueda aplicar a un blog tradicional.
EliminarEso me imaginé.
EliminarNO PUEDO CREER QUE RESPONDAS TODOS LOS COMENTARIOS XD DEBE SER DIFICIL .-.,COMO SEA EH ESTADO BUSCANDO ALGO, ENTRA A ESTE BLOG
ResponderEliminarhttp://www.altogta.net/
AL PASAR EL CURSOR POR UNA IMAGEN TIENE UN EFECTO COMO DE SOMBRA, O AUMENTA LA LUZ O NO SE QUE SEA, TIENES ALGUN TUTORIAL DE ESO? YA EH BUSCADO Y ENCUENTRO OTRO TIPO DE EFECTOS PERO NO ESE QUE QUIERO
Sólo le han agregado un poco de opacidad a las imágenes, añade esto en los estilos de la plantilla para tener el mismo resultado:
Eliminara:hover img {
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}
Wow, si funciono :P, pero solo se le agrego el efecto a las imagenes con enlace :P, como se podria hacer para ponerlo a imagenes sin enlace ?
EliminarCambia esto:
Eliminara:hover img {
Por esto:
a:hover img, img:hover {
Hola potro :)
ResponderEliminarhace mucho que no me paso por aqui pero quiero cambiar el estilo de mi blog, y tengo un problemita, queria saber si me podias ayudar
quisiera poder usar el estilo completo del simstema de comentarios y las entradas de esta template en esta template y no puedo D:
me sale el mismo sistema de lock heart pero rarito asi que elimine todo del blog de pruebas. espero que respondas
Hola simsinspring., exactamente como está no quedará ya que la estructura en ambos es completamente distinta, sin embargo se puede ver un poco similar si agregas estos estilos:
Eliminar#comments-block .comment-author {
background: white;
border: 1px solid #CCC;
border-bottom: none;
}
#comments-block .comment-body {
background: white;
border: 1px solid #CCC;
border-top: none;
}
.comment-form {
max-width: 850px !important;
_width: 810px;
clear: both;
}
hola :) gracias, pero entonces el estilo magazine de la primer template para las entradas no se puede poner en la otra?
EliminarPues las entradas tiene el mismo formato en la portada, o al menos es muy similar, si te refieres que tenga tres columnas en lugar de dos entonces reduce el width que está dentro de .box{ hasta que quepan tres columnas.
EliminarEse mismo ancho también tendrás que cambiarlo donde dice var image_size=330;
Buenas tardes!
ResponderEliminarEs posible ponerlos en el lado contrario? Es decir ponerlos a la derecha de la página?
Gracias de antemano por todos los aportes.
Buenas tardes, para ponerlos a la derecha cambia:
Eliminarleft: -100px;
Por:
right: -100px;
Hola de nuevo.. como andas? espero que bien, te queria consultar si hay alguna forma de saber que codigos y estilos que añadimos al blog estamos usando y cuales no??
ResponderEliminarYo ahora entiendo bastante, pero cuando empece con esto agregaba cosas a mi blog y muchas no funcionaban, ahora creo que debo tener varias cosas de mas.. :/
Gracias
Hola Lucas, eso es difícil que yo te lo diga pues sólo tú sabes qué tanto has agregado.
EliminarLo que puedes hacer es tomar la clase o ID que tiene el estilo y buscarla en un contenedor (dentro del BODY). Por ejemplo, si tuvieras esto:
#cajaRoja {
...
...
}
Entonces buscarías si en tu plantilla tienes algún elemento que tenga como ID "cajaRoja", sino fuera así entonces es probable que ese estilo ya no lo estés usando.
De cualquier manera procura hacer un respaldo de la plantilla por si vieras que eliminaste algo que sí necesitabas.
Claro claro.. bueno voy a probar con eso! como siempre muchas gracias!
EliminarGracias potro todo me salio de maravilla
ResponderEliminarey potro una pregunta. ya instale los botones pero al twittear me sale asi
ResponderEliminarPasala Rebien: ¡Escándalo! Uniformes olímpicos de EEUU son “made in China” (FOTO) http://pasalarebien.blogspot.com/2012/07/escandalo-uniformes-olimpicos-de-eeuu.html
y ati te sale asi
Botones para compartir flotantes que se deslizan y flotan al bajar http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html vía @ciudad_blogger
quiero que tweet salga como el tuyo sin el nombre de la pagina y que salga via @PasalaRebien
Mira el comentario #10.1
EliminarHola, hace poco me comentaste sobre el tema del calendario (que había un espacio)
ResponderEliminarAhora vengo a comentarte si me podrias ayudar con los botones, ya que cuando abro un hilo, los botones tapan la mitad del calendario...
http://lasalainformatica.blogspot.com/
Salu2
Hola Valentin, debajo de:
Eliminarleft: -100px; /* Distancia desde la izquierda */
Agrega:
top: 50px;
ESPERO Y ESTA SEA MI ULTIMA DUDA JEJE,
ResponderEliminarEN MI BLOG LA MAYORIA DE MIS VISITANTES SON CHAVALES DE 8 A 15 AÑOS Y A MUCHOS LES GUSTA COMENTAR TONTERIAS CON OBSCENIDADES, QUIERO SABER SI HAY FORMA DE EDITAR LOS COMENTARIOS DE MI BLOG :P
Editarlos no, sólo puedes eliminarlos.
EliminarHola! Mira Potro me gustaria saber, como hacer que los bordes superiores del blog se vean redondeados y no sean cuadrados. Mira le dejo este blog para que lo entienda http://warinmyheart.blogspot.com.es/
ResponderEliminarSi pudiera responderme o hacer un post sobre esto,se lo agradeceria seguro que le interesa a mucha gente
Un saludo.
Hola Drea, ¿en cuál blog lo quieres hacer? ya que el código depende del tipo de plantilla.
EliminarSaludos.
Buenas potro, te escribo para felicitarte por tu trabajo y para pedirte ayuda sobre una petición que tengo, querría colocar al final de la plantiya de mi blog una barra en la que pudiera poner 6(por ejemplo) imágenes, para así enlazar los blogs de mis amigos con sus banners. ¿Como podría hacer eso?
ResponderEliminarDepende dónde quieras ponerlo exactamente. La parte más al final de una plantilla es </body> así que antes de ese código podrías ponerlos.
EliminarY, ¿cual sería el código que debería poner?, ¿src=imagen y la direcciono? ¿como las ajusto para el tamaño con botton?
EliminarEl código de una imagen con enlace es este:
Eliminar<a href="URL del enlace"><img src="URL de la imagen" width="125" height="125" /></a>
Ahí debes colocar donde se indica la URL de la imagen y la del enlace, también verás el width y height, ambos son el ancho y alto respectivamente.
Puedes usar una tabla HTML en caso de que quieras que las imágenes estén alineadas horizontalmente:
http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html
Este comentario ha sido eliminado por un administrador del blog.
EliminarHe tenido que eliminar el comentario por el aviso que está al final.
EliminarEl gadget de perfil no se puede cambiar mucho mas que en aspecto, pero puedes crear un gadget HTML/Javascript y ahí poner todo lo que quieras, incluyendo la info del autor así como los enlaces de suscripción que deseas.
Hola Potro! Disuclpa que te moleste, pero estuve editando mi web y y por agregarle nuevas cosas otras desaarecieron :(
ResponderEliminar-Tenia un slide en la cabecera y de la nada dejò de funcionar y solo quedò uno solo estàtico :(
-Yo soy de editar Gifs y ya no se reproducen :( estuve tratando de ver el porquè pero ya no funcionan :( estos son los gif, quedaron quietos :( > http://bit.ly/NvnkkN
-En la pàgina principal yo dejaba ver de a 10 entradas y ahora de la nada se quedò en 2 entradas :( intentè modificarlo desde la plantilla pero no funciona de la forma en la q lo hice :/
NO SÈ PORQUE TODO CAMBIÒ :( POR FAVOR AYUDAME!!
ESTE ES MI BLOG http://bit.ly/KeudFI
Hola @LaaChaamy ★, siempre que hagas cambios en la plantilla debes hacer un respaldo de la misma, verás cómo te salvará de muchos corajes.
EliminarNo veo ningún slider en la cabecera, así que no sé cómo funcionaba o a partir de qué cambio dejó de funcionar.
Los GIF animados veo varios, tanto en los fondos de los títulos de la sidebar, como de algunas entradas, no sé cuántos deberían moverse pero sí veo algunos que lo hacen.
El número de entradas tiene que ver con la velocidad de carga del blog:
http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html
Potro me gustaria hacerlo en mi blog es la plantilla Simple
ResponderEliminaranyjustme.blogspot.com
Un saludo.
Hola de nuevo Drea, en esa plantilla agrega en los estilos, es decir, antes de ]]></b:skin> esto:
Eliminar.content-inner, .content-outer {
border-radius:300px;
}
300px es el tamaño del borde y lo puedes modificar por la medida que quieras.
Saludos.
Hola potro, mi blog es talentoemocionalysocial.blogspot.com, quiero poner esto pero la verdad no me ha funcionado. a lo mejor tenga que ver con el resto de artilugios que le he puesto y ahora obstaculizan este artilugio
ResponderEliminarYo lo veo funcionando bien Daniel, recuerda que sólo se ven al ingresar al post, así que si entras a uno verás que ahí aparecen.
EliminarMuchisimas gracias!!
ResponderEliminarHola potro! gracias por todas las entradas que publicas sos la mejor ayuda que puede haber, intente poner el codigo y consegui que apareciera, pero quiero que el los botones esten un poco mas abajo. que parte tengo que modificar? mi blog es http://winterstorm-argentina.blogspot.com.ar gracias!
ResponderEliminarHola Ruu, gracias por tu comentario.
EliminarDebajo de #BotonesFlotantes { agrega:
top: 50px;
Puedes poner un valor más alto si lo deseas.
Me encanta♥
ResponderEliminarHola Potro
ResponderEliminarmuchas gracias por tu ayuda siempre y espero que sea paciente conmigo por mi inculto en este punto..
primero yo cuando buscaba el codigo ... class='postmeta-primary'>
no lo encontraba en mi template principal aqui www.andaluciashop.blogspot.com
pero lo encontre en los codigos de la pagina de una entrada aqui http://andaluciashop.blogspot.com/2012/06/samsung-galaxy-s3-only-4500-le.html
el problema ahora que los codigos de la pagina de las entradas no puedo editarlos para poner el codigo arriba de class='postmeta-prima'>
la pregunta donde puedo agregar el codigo ((class='postmeta.....)) en mi template principal??
o como puedo Expandir plantillas de artilugios de una entrada ( pagina de entrada)
muchas graciass y espero tu respuesta
sigo al contacto
Hola Andalucia mobile shop, en Blogger sólo hay una plantilla para todo, no es como WP que hay una para las entradas y otra para la portada, todo lo que ves en el HTML de Blogger es toda la plantilla del blog. Si hubiera un código que se ejecuta sólo en las entradas aun así debe aparecer en la plantilla general.
EliminarSaludos.
potro me gustaria que hicieras un post de como usar el ajax y jquery para hacer esto
ResponderEliminarhttp://dl.dropbox.com/u/90415204/Sin%20t%C3%ADtulo.png
http://dl.dropbox.com/u/90415204/esto.png
Tengo una entrada de esos tabviews sin jQuery, ya después publicaré uno con esa librería.
EliminarBuenos dias, estoy intentando poner estos botones en mi blog pero no me salen, he hecho todos los pasos pero no me salen. ¿Podrían echarme una mano por favor?
ResponderEliminarHola Desafío Cantabria, me encantaría ayudarte pero sin saber en cuál blog lo has puesto no puedo hacerlo :(
EliminarHola Potro, sos una MASA, como siempre... respondiendo todo. GROSO!
ResponderEliminarAmigo, despues de que probe 10 formas mínimo, porque el BOX no aparecía, logré que aparezca...
Pero adivina qué. No se mueve :(
No se "scrolea" para abajo (o arriba) cuando me muevo.
Eso que puede ser?
Ojala se te ocurra algo, yo de jquery cero, por eso no me animo a probar nada. :(
Un gusto viejo!
Saludos!
Hola masFB, puede ser que tengas otra versión de jQuery en la plantilla, o que estés usando Scriptaculous, ambos enlaces están al final de la entrada.
EliminarSaludos.
No, hasta donde yo se no uso Scriptaculous.
EliminarQué versión de JQuery necesita este codigo para que funcione?
Hay forma de separar el código a un archivo .js ?
La verdad es una lastima que no me ande :(
Saludos amigo y gracias por tu respuesta!
La versión de jQuery ya está incluida en el código, si ese no es el problema o Scriptaculous entonces tendría que ver dónde lo has puesto.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHe entrado a tu blog pero no veo que tengas estos botones ahí.
EliminarHola Potro, queria preguntarte si hay manera de que éstos botones se puedan ver bien en mini laptop. Ya que ingreso a mi blog y al tuyo desde una mini laptop, y en el mio los botones se ven encima de la entrada y en tu blog se ven incompletos. Habrá una manera de acomodar eso?. O si no me conformaría con tener los botones de compartir debajo de cada entrada pero con botones más grandes, y no con los que trae blogger por defecto.
ResponderEliminarHola GaMg., eso depende del ancho de tu blog y de la resolución de tu monitor. Otra opción es que pongas los botones a la derecha (ver comentario #52.1), quizá ahí los aprecies mejor.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarElimina esta línea:
ResponderEliminar<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
Como ya tienes otra versión de jQuery no hace falta repetirlo.
Les puedes poner una opacidad, pero el problema es que esa opacidad se aplicaría también a los botones, por lo que lo conveniente sería que en lugar de que uses un color de fondo pongas una imagen semi transparente.
Este comentario ha sido eliminado por el autor.
ResponderEliminarPrueba quitar los otros botones, quizá porque tienes esos no dejan que estos se muestren bien.
EliminarEntonces quizá debas poner el script de Scriptaculous en otra ubicación, podría ser justo después de <head> o justo después de </head>
ResponderEliminarCon la imagen sólo es cambiar esto:
background-color: #FFF; /* Color de fondo del contenedor */
Por esto:
background: url(URL de la imagen);
Este comentario ha sido eliminado por el autor.
ResponderEliminarHaz lo que te decía anteriormente, quita los otros botones. Es posible que por eso se vean de esa manera.
EliminarEste comentario ha sido eliminado por el autor.
EliminarQuita todos estos estilos:
Eliminar.twitter-share-button {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
margin-left: 56px;
margin-right: 23px;
padding-left: 23px;
padding-right: 10px;
width: 110px;
}
Acabo de ver que son esos los que hacen que tu botón de Twitter se vea de esa manera.
Este comentario ha sido eliminado por el autor.
ResponderEliminarPodríamos Agregar el de Pinterest? y Como lo podemos hacer que lo he intentado pero no me ha podido funcionar!
ResponderEliminarMira el enlace que está en la entrada de los otros botones, ahí viene el código del botón de Pinterest, sólo deberás agregar el código del botón antes del cierre del DIV como se indica en la entrada.
Eliminar