Ocultar,eliminar o personalizar mensaje "Mostrando entradas con la etiqueta..."


Hace unos días Squirrel consultaba lo siguiente:

Hola YK:
Muy bueno; voy a probarlo el menú.
Sabes, tengo una pregunta, cómo puedo hacer para eliminar el mensaje de "Mostrando entradas con la etiqueta ..." que aparece cuando hago clic en una etiqueta de mi blog?
Un saludo


Bien, a decir verdad si hay una forma para eliminar el mensaje y también de ocultarlo; pero pensé que quizás habrían personas que no se atreverían a eliminarlo porque "extrañarían" ese mensajito. Así que pensé, ¿sólo queda eliminarlo?¿no se podría usar para algo o personalizarlo?.
Bueno, aquí les doy tres opciones para tratar este mensaje: ocultarlo, eliminarlo y personalizarlo.

OCULTAR EL MENSAJE:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Con ayuda de CTRL+F buscamos lo siguiente ]]></b:skin> y antes de éste pegamos:

.status-msg-wrap {visibility:hidden;display:none;}


♠ Click en Guardar plantilla.

ELIMINAR EL MENSAJE:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Nuevamente con ayuda de CTRL+F buscamos lo siguiente:
<!-- posts -->
<div class='blog-posts'>

Línaes más abajo encontraremos éste código y procederemos a eliminarlo:

<b:include data='top' name='status-message'/>

De modo que el código nos quede así:

<!-- posts -->
<div class='blog-posts'>
<data:adStart/>

♠ Click en Guardar plantilla.

PERSONALIZAR EL MENSAJE:

Finalmente, veremos esta interesante opción con la que podremos personalizar este cartelito para que ya no muestre el mensaje de : Mostrando entradas con la etiqueta....... Mostrar todas las entradas.; sino que podemos usarlo para sugerir que nos dejen mensajes en los post, que se suscriban a nuestro feed o dar un mensaje invitando a seguir visitando el blog...Ya dependerá de nosotros.

Bueno, vamos a personalizarlo:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Previamente ya deberemos de haber ocultado el mensaje como lo indiqué líneas más arriba.
♠ Con ayuda de CTRL+F buscamos lo siguiente ]]></b:skin> y antes de éste pegamos:

.mensaje_personal {
border: 1px solid #4DAC27;
padding: 3px;
margin: 0 3px;
font-size: 90%;
background: #fff url(URL_FONDO);}

.mensaje_personal a {
text-decoration: none;}

.mensaje_personal a:hover {
text-decoration: underline;}


Explicación:

» border: 1px solid #4DAC27; color de borde del mensaje.
» padding: y margin: nos permitirá regular los márgenes o distancias.
» font-size: 100%;, es el tamaño de texto.
» background: #fff url(URL_FONDO); es el color de fondo del mensaje; también podemos colocar una imagen de fondo.

♠ Damos click en Guardar plantilla.
♠ Ahora vamos a Diseño/ Elementos de la página/ Añadir un gadget y escogemos HTML/Javascript.
♠ En el nuevo gadget pegamos lo siguiente:

<div class="mensaje_personal">Aquí va texto, imagen o enlaces o una combinación de estos elementos.</div>


♠ Antes de guardar el nuevo gadget, le damos un nombre para que nos sea fácil localizarlo en el siguiente paso.Damos click en guardar y lo arrastramos por encima de donde dice Entradas del blog del editor de Elementos de Página. Si vemos nuestro blog, veremos que el mensaje se muestra en la página principal; para que sólo se muestre cuando estamos en un post individual, seguiremos los siguientes pasos.
♠ Nuevamente nos dirigimos a Diseño/ Edición de HTML y Expandir plantillas de artilugios y localizamos el widget que agregamos en el paso anterior (por éso nos sirve ponerle título, para poder localizarlo fácilmente). El código del widget localizar en la plantilla debe tener más o menos esta estructura:

<b:widget id="HTML3" locked="false" title="AQUÍ VA EL NOMBRE QUE LE PUSISTE AL WIDGET" type="HTML">


Con CTRL+F y el nombre del gadget te será fácil localizarlo.
♠ Una línea más abajo encontrarás el siguiente código: <b:includable id='main'> y debajo de ésta pegas lo siguiente: <b:if cond='data:blog.pageType == "item"'> Un poco más abajo buscaremos el primer </b:includable> que encontremos y encima de éste pegamos: </b:if> Damos click en Guardar plantilla y borramos el título del gadget que pusimos en pasos anteriores, en Elementos de página no de la plantilla.

El resultado es éste:
» Antes del cambio:



» Después del cambio:



Las imágenes son capturas de mi blog de pruebas.

48 opinaron:

squirrel

Ohh me encanta; lo voy a aplicar es lo que buscaba

Responder
Jéssica YK

squirrel: bien, ya tienes la respuesta a tu problema. Espero que te sirva.

Saludos

Responder
El Software "STAFF"

gracias =D es justo lo q staba buskando... te lo agradsco mucho jeje ai podes pasate x mi blog y comenta en el chat q tal lo ves en diseño xD weno asta pronto n_n

Responder
Jéssica YK

Necros Giovanni : qué bueno te te haya servido el post :)

Gracias por la visita y vuelve pronto

Saludos

Responder
Pucho

Muchisimas gracias. Lo oculte :)

Responder
Jéssica YK

Pucho: gracias por el comentario y por la visita. Me alegra que te haya servido el tutorial.

S@lu2

Responder
Manuel de la Fuente

Muchas gracias por decirme cómo personalizar el mensaje; tuve que modificar un poco el código porque lo que yo quería hacer era diferente a como lo explicas, pero funcionó al 100%. ;)

Responder
Jéssica YK

Manuel de la Fuente: gracias por la visita y me alegra que te haya servido :)

S@lu2

Responder
Flor

muchas gracias, hace tiempo que buscaba algo así

Responder
Jéssica YK

KULBRUT: me alegra que te haya sido útil y gracias por la visita.

S@lu2

Responder
Anónimo

Hola quisiera saber como es que puedp eliminar el mensaje de posted on de mi blog. La verdad es que se ve antiestetico que aparezca cada vez que publico algo.

Saludos

Responder
Lucila

Muchisimas gracias! me ha sido de mucha utilidad!

Responder
Jéssica YK

» Gogo: no puedo ver tu blog porque tu perfil no está disponible; si me dejas la URL de tu blog, sería de mucha ayuda para ver tu blog y solucionar el problema.

» Lucila: gracias a ti por la visita:)

S@lu2

Responder
Anónimo

Exelente, es lo que estaba buscando...
pero tengo un problema, bueno pues elegi "personalizar el mensaje", hice todos los pasos, pero al momento de probarlo, "no sale nada".
Ojala me puedas ayudar. Gracias...

Responder
Anónimo

Ya vi el problema...
bueno pues es lo que esperaba :$
creo q mi plantilla no esta adaptaba para esto.

Gracias de todos modos..

Responder
Jéssica YK

Kuston:
Ojalá puedas solucionar el problema pronto.

S@lu2

Responder
Chris LA

Es posible que en vez de eliminarlo o sustituirlo como dices, nos muestre una imagen que caracterice cada label o tag, de tal mado que muestre una imagen diferente por cada etiqueta? como en word press, como ejemplo puedo poner a wired.com

Responder
Jéssica YK

» @christopher_on3:
Sí, se puede hacer. En vez de ocultar o eliminarlo, podrías usar la tercera alternativa que indica el post: personalizar el mensaje.

En vez de un color de fondo, pondrías una imagen de fondo, y en letras grandes, el nombre de la etiqueta.

S@lu2

Responder
Anónimo

pero como se hace eso?

Responder
Jéssica YK

» Anónimo:
Sólo debes de seguir las indicaciones de la àrte que dice PERSONALIZAR EL MENSAJE.

Verás el código que dice :
background: #fff url(URL_FONDO);

Entonces, ya no usarías un color de fondo,sino una imagen, de modo que sería así:
background:url(URL_FONDO);

Sigue los pasos de esa parte del post y si tienes alguna duda, me avisas.

S@lu2

Responder
4lquimis7

Gracias por compartir tu hack, me a sido de mucha utilidad.

Saludos Jéssica.

Responder
Jéssica YK

» 4lquimis7:
Me alegra que la entrada te haya sido de ayuda. Gracias por la visita.

S@lu2

Responder
JhonnySan

muy bueno me sirvió de mucha ayuda mil gracias

Responder
Jéssica YK

» Jhonnysan:
Qué bueno que te haya servido. Gracias a ti por la visita.

S@lu2

Responder
Nancy

Muy buen post :)

Responder
Bricolaje Informatico

Hola Jessica . . . Saludos Desde Galicia
Me ha Enviado El Potro de Ciudad Blogger
Lo que Quiero Conseguir es Poner una Imagen
Cuando no Encuentres una Entrada en una Busqueda
He Seguido los Pasos tal y Como Indicas en la Opcion Personalizar el Mensaje
Pero no Sale Nada. . . Todo Sigue Igual
Algo que ya no va Bien es que al Poner Este Codigo
.status-msg-wrap {visibility:hidden;display:none;}
El Mensaje no se Oculta
Espero Puedas Ayudarme
Un Saludo . . . Gracias

Responder
Jéssica YK

» Bricolaje Informatico:
Si no te funciona el
.status-msg-wrap{visibility:hidden;display:none;}

prueba con eliminar ese mensaje.
Luego, cuando lo elimines, realiza los pasos indicados en el apartado de "Personalizar mensaje".

Me avisas qué tal te va. Si todavía persiste el problema, me avisas para revisar tu plantilla.

S@lu2

Responder
Bricolaje Informatico
Este comentario ha sido eliminado por el autor.
Responder
Bricolaje Informatico

Hola Jessica . . . Seguimos Igual
Asi es Como Aparece en mi Plantilla
http://www.sharkgalicia.com/search?q=jessica
Lo que Quiero Conseguir es Algo Como Esto
http://wallbase.cc/search/jesssss
Que Aparezca una Imagen Diciendo
Que no se Encuetra ese Articulo
Espero que Entiendas lo que Quiero Decirte
Un Saludo . . . Gracias

Responder
Jéssica YK

» Bricolaje Informatico:
Descarga tu plantilla y envíamela para revisarla.
Para descargar tu plantilla, te pueden servir los pasos de esta entrada.
Debes enviarla a la dirección de contacto que puedes ver en la parte superior izquierda.

S@lu2

Responder
Bricolaje Informatico

Ya te la he Enviado. . .
Espero que Puedas Resolver el Enigma
Un Saludo . . . Gracias

Bricolaje Informatico

No Te Olvides de mi . . .
Haz un Hueco en tu Apretada Ajenda
Gracias

Jéssica YK

Bricolaje Informatico:
No me he olvidado de ti, pero estuve algo ocupada. Bueno, revisé tu plantilla y para eliminar el mensaje debes hacer lo siguiente :

- Lo primero que debes hacer es buscar este código en tu plantilla (clic en Expandir plantillas de artilugios) :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
Debes borrar la tercera línea: <b:include data='top' name='status-message'/>

- Luego buscas este código y lo eliminas totalmente:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div id='status-message'>
<div class='message-box' id='comment-1'>
<div class='message-lbc'/><div class='message-ltc'/>
<div class='message-entry'>
<data:navMessage/>
</div>
</div>
</div>
</b:if>
</b:includable>

- Finalmente, buscas ]]></b:skin> y encima pegarás este código:

.status-msg-wrap {visibility:hidden;display:none;}

Le das click a guardar y listo. Ahora cuando busques ya no te aparecerá ese mensaje.

Si necesitas más ayuda, no dudes en consultar.
S@lu2

Bricolaje Informatico

Hola Jessica . . . Saludos Desde Galicia

No Tienes que Pedir Disculpas por Nada

Faltaria Mas . . . Aun por Encima de Ayudarnos

Yo si que Tengo que Disculparme por ser tan Pesado

Realizare los Pasos que me Indicas y ya te Comento el Resultado

Pero Sigo Necesitando tu Ayuda Para que en Lugar de ese Cartelito

Aparezca una Foto con un Cartelito que Ponga

Algo asi Como no Tenemos este Articulo

Y Que la Foto Tenga un Enlace que al Pincharlo te Envie a Otra Parte del Blog

Espero que Entiendas lo que Quiero Conseguir

Solo una Cosa Mas si no es Mucho Pedir

En tu Blog Cuando Resaltas Algo Apartece en Color Morado

Me Encanta ese Resalte y Efecto

Como Puedo Aplicarlo a mi Olantilla en Color Naranja

Agradezco tu Estimada Ayuda

No Tengo Prisa . . . no son Buenas Para Nada

Cuando Tengas un Huecoen tu Apretada Ajenda

Acuerdate de Mi . . .

Un Saludo . . . Gracias

Responder
Bricolaje Informatico

Hola Jessica . . . Saludos Desde Galicia
He Seguido tus Pasos al pie de la Letra
Tal Como Indicabas el Mensaje ha Desaparecido
Ahora Necesito Personalizarlo tal y Como Explicas en Esta Entrada . . . Que
Aparezca una Imagen en su lugar con un Enlace
Como Consigo el Efecto de Resaltado Como el de Color Morado de tu Blog Pero en Naranja
Agradecido por tu Ayuda y tus Consejos

Jéssica YK

» Bricolaje Informático:
Ahora que no está el mensaje que aparecía anteriormente, puedes realizar los pasos que se indican en "Personalizar el mensaje".
Si tienes alguna duda mientras lo implementeas, me dejas un comentario.

S@lu2

Bricolaje Informatico

Hola Jessica . . . Saludos desde Galicia

He Seguido Todos los Pasos al Pie de la Letra
Pero no Consigo que Salga la Imagen . . .
Si Escribo Algo si Aparece . . .
Pero Tenemos un Problema
Aparece en Todas las Entradas Individuales
No en las Busquedas que es Donde Deberia
Creo que Hago Esto Mal . . .

"Aquí va texto, imagen o enlaces o una combinación de estos elementos."

Yo Pongo la URL de la Imagen Asi . . .

http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg

Espero Puedas Resolver el Enigma

Dejaré la Plantilla Con Todos los Cambios
Para que Puedas Ver lo que Sucede

Un Saludo . . . Gracias

Jéssica YK

» Bricolaje Informático:
Pues este tutorial es para que el mensaje se muestre en todas las entradas.
El mensaje estaría orientado a pedir a los lectores que se suscriban, darle un mensaje de bienvenida o pedirles que dejen un comentario.

Lo que quieres hacer es que aparezca un mensaje en una búsqueda, pero para conseguir ello se tendría que hacer de otro forma, no de la forma que indica este tutorial que, como te expliqué, está orientado hacia otra cosa.

En un siguiente comentario de diré cómo implementar lo que deseas o puede que haga un tutorial.

S@lu2

Jéssica YK

» Bricolaje Informático:
Ahora que tuve un poco de tiempo, revisé nuevamente la plantilla que me enviaste. Para que se muestre esa imagen que me mostraste al momento de hacer una búsqueda, debes hacer lo siguiente:

- Entras a tu plantilla y le das expandir plantilla de artilugios.
- Ahora buscas este código y lo borras:

.status-msg-wrap {visibility:hidden;display:none;}

- Ahora, buscas :
.message-box {

Borras el contenido y lo reemplazarás por el siguiente:

.message-box {position:relative; background:url(http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg); padding:7px 0; height: 300px; width: 400px; margin: 0 auto; }

- Ahora, buscas ésta línea de código:

<b:includable id='comment-form' var='post'>

- Encima de ese código pegarás el siguiente:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div id='status-message'>
<div class='message-box' id='comment-1'>
<div class='message-lbc'/><div class='message-ltc'/>
</div>
</div>
</b:if>
</b:includable>

- Le das click a guardar y con eso se mostrará la imagen.
Si tienes dudas, no dudes en consultar.

S@lu2

Bricolaje Informatico

Hola Jessica . . . Saludos desde Galicia

Ante Todo Agradecerte tu Ayuda y la Paciencia que Tienes con los Aprendices Comon yo . . .

El Potro Tenia Razón al Enviarme a tu Blog
Eres la Unica Persona que Podia Ayudarme

He Seguido tus Pasos al Pie de la Letra
Ha quedado Todo Genial . . .

Ahora Tengo la Imagen en las Entradas
y Tambien en las Busquedas
Salvo un Pequeño Detalle sin Importancia.

Cambiaré la Foto por una en la que Ponga
. : NO DISPONEMOS DEL ARTICULO QUE BUSCAS : .
O Algo Asi por el Estilo . . . Acepto Sugerencias o Consejos por tu Parte

Pero Necesito que me Expliques como Ponerle
un Enlace a esa Imagen Para que Vuelva al Inicio del Blog

Recuerda que si Visitas Galicia
Tienes una Casa y un Amigo Para lo que Necesites

Espero tu Respuesta

Un Saludo . . . Gracias

Jéssica YK

» Bricolaje Informático:
Para agregarle el enlace que quieres, busca estas líneas y agrega lo que está en negrita:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div id='status-message'>
<div class='message-box' id='comment-1'>
<div class='message-lbc'/><div class='message-ltc'/>
<a expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg'/></a>
</div>
</div>
</b:if>
</b:includable>

La url de la imagen, la reemplazas por la nueva imagen que quieres agregar. Para que los cambios se efectúen, deberás pegar la misma url de la imagen en esta parte:

.message-box {position:relative; background:url(http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg); padding:7px 0; height: 300px; width: 400px; margin: 0 auto; }

Si queda un espacio muy grande, cambia los valores alto ( height: 300px;) y ancho( width: 400px;) de la imagen.

La imagen que me mandaste medía 300px de alto y 400px de ancho. Ahora deberás de poner los valores de ancho y alto de tu nueva imagen.

Y eso sería todo, al darle click a la imagen, volverá a la página principal del blog.
Si tienes alguna duda, no dudes en escribirme.

S@lu2

Bricolaje Informatico

Hola Jessica . . . Saludos Desde Galicia

Cuando Todo Parecia que Estaba Perfecto
Ha Surgido un Problemilla . . .

Solo en las Entradas que Tienen Comentarios

Aparece la Imagen Intercalada entre los Mensajes , 1 Imagen por Cada Comentario
Distorsionando todo el Contenido . . .
Si Hay 4 Comentarios Aparecen 5 Imagenes

Se te Ocurre Alguna Solución

Un Saludo . . . Gracias

Jéssica YK

» Bricolaje Informático:
Para que no se muestre la imagen en los comentarios, borra lo que está en negrita:

.message-box {position:relative; background:url(http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg); padding:7px 0; height: 300px; width: 400px; margin: 0 auto; }

Este cambio no afectará a la imagen que tiene el enlace a la página principal que te indiqué cómo agregar en el comentario anterior.

S@lu2

Bricolaje Informatico

Hola Jessica ... Ya Casi Esta Listo
Solo Tenemos un Problemilla con Este Còdigo
Solo en las Busquedas . . .

.message-box {position:relative; background:url(http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg); padding:7px 0; height: 300px; width: 400px; margin: 0 auto; }

Si lo Modifico Desaparece el Color en los Comentarios Anónimos Distorsionando todo el Contenido . . .Pero la Imagen Queda Perfecta

Si lo Elimino Queda el Color Marrón de los Comentarios Anónimos Mezclado con la Imagen que Queda Distorsionada y a la Derecha

Te Agradeceria le Echases un Vistazo

Para que Veas lo que Quiero Decirte

Espero que Descifres el Misterio

Un Saludo . . . Gracias

Jéssica YK

» Bricolaje Informático:
Pues no me había fijado que los comentarios tenían un fondo.
Pues mira, la plantilla original aplica los mismos estilos al fondo de los comentarios y al mensaje. Entonces, al cambiar uno se cambia también el otro.

Para que eso ya no pase y para que la imagen en la búsqueda quede centrada, haremos lo siguiente:

- Buscas esta línea:

<b:includable id='comment-form' var='post'>

- Encima verás el siguiente código. Lo eliminas:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div id='status-message'>
<div class='message-box' id='comment-1'>
<div class='message-lbc'/><div class='message-ltc'/>
<a expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg'/></a>
</div>
</div>
</b:if>
</b:includable>

- En el lugar de ese código, y encima de <b:includable id='comment-form' var='post'> pegarás el siguiente código:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div id='status-message'>
<a expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/-lN3BdhQs5GM/TqBmhThw2VI/AAAAAAAABc0/znZpBkt_N1g/s400/SharkGalicia.jpg' style='display:block; margin: 0 auto; background: transparent; text-align:center; width: 400px; height: 300px;'/></a>
</div>
</b:if>
</b:includable>

Con eso ya no debería haber problema, pero si surge otro, me avisas.

S@lu2

Bricolaje Informatico

Hola Jessica . . . Saludos Desde Galicia
Ha Quedado Genial . . . Una Chulada
No se Como lo Haces Pero Siempre Solucionas
Todos los Retos que te Planteo . . .
La Proxima Vez Intentaré Ponertelo + Dificil
Un Saludo . . . Gracias

Jéssica YK

» Bricolaje Informatico:
Me alegra haberte podido ayuda con tu blog!
Si en el futuro tienes algún problema con el blog, no dudes en escribirme.

S@lu2

Responder
PokeGBANDS

Hola quiero saber como quitar No Hay Ningun Entrada

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio