Cómo ocultar elementos de plantilla dinámica de Blogger

24 mayo 2014 § Deja un comentario

BubbleObjetivo: Ocultar elementos de una plantilla dinámica de Blogger que no se quieren mostrar.

En ocasiones podemos utilizar los recursos de Blogger para mostrar páginas dinámicas como páginas estáticas. La idea es poder ocultar elementos que no deseamos mostrar  en el caso de querer utilizar una plantilla de vista dinámica que nos guste. ¿Cómo hacerlo? En este tutorial se demuestra cómo “remover” elementos de este tipo de plantilla. La comprobación se ha realizado sobre los navegadores: Chrome, Internet Explorer y Firefox.

Vamos a partir de crear un Blog en Blogger. Con tu cuenta de correos en Gmail, puedes pulsar el botón de aplicaciones e ir directamente a tu panel de blogs: Ir a Blogger Para crear un nuevo blog, pulsa sobre el botón “Nuevo blog”: Crear nuevo Blog   Se abrirá el panel de creación del  blog para ingresar los datos que se requieren: Crear nuevo blog En el cuadro anterior ingresarás el título del blog, la dirección URL que identificará a tu blog como un subdominio de “blogspot.com”,  y podrás elegir como plantilla la de “Vistas dinámicas”. Trabajamos sobre un blog nuevo en la siguiente dirección: http://inicial-ocultarelementos.blogspot.com.es/ al cual queremos hacer algunas modificaciones para ocultar elementos que no nos interesan. En la siguiente imagen se destacan  los elementos que queremos ocultar. Elementos a Ocultar de la Plantilla Dinámica de Blogger   En otras palabras, queremos que la página del blog se muestre como en la siguiente imagen: Cambios finales Ahora, es necesario tener una herramienta para localizar los elementos  en el código de la página del blog y poder manipular su presentación.  En mi caso, voy a utilizar la función de “Inspeccionar elemento” de Google Chrome: Inspeccionar elementos de la plantilla dinámica de Blogger   Para usarlo, colocar el puntero del ratón sobre el elemento y con el botón derecho seleccionar “Inspeccionar elemento”. Al pulsar sobre esta opción, se muestra en pantalla el tablero con los sectores HTML (a la izquierda)  y CSS (a la derecha)  para manejar el código de la página: Inspeccionar elemento con Chrome   Para manipular los elementos, desde el panel de Blogger del blog en cuestión,  vamos a Plantilla > El blog ahora > Personalizar > Diseñador de plantillas de Blogger > Avanzado > Añadir CSS, y en el cuadro que aparece a la derecha podemos escribir nuestras propias reglas CSS que ocultarán los elementos que no queremos mostrar. Diseñador de plantillas de Blogger   Las ideas que vamos a manejar para ocultar elementos en una plantilla dinámica de Blogger consisten en: 1)      Ubicaremos el elemento a ocultar en el panel HTML de “Inspeccionar elemento”. 2)      Usaremos reglas de estilos CSS en el Diseñador de plantillas de Blogger. 3)      Construiremos la regla CSS  con el elemento a ocultar como selector y “display: none;” como declaración de la regla CSS así: selector  { declaración; } 4) Daremos prioridad a nuestra regla para que su efecto no sea anulado por otra. Por lo tanto usaremos en la declaración la expresion: “!important”. 5)      Comprobaremos la vista del blog en el navegador. Vamos a comenzar. CAJA DEL BUSCADOR Para ocultar la caja del buscador que está en el encabezado de la página, ubicamos el puntero del ratón sobre el elemento, botón derecho y pulsamos  sobre “Inspeccionar elemento” para que Chrome nos muestre el panel HTML y CSS: Inspeccionar caja del buscador de la página   Observar que la caja del buscador tiene un identificador (id) llamado “search” (id=”search”) dentro de su línea <input>.  Entonces se construye la regla CSS para ocultarlo de la siguiente forma: #search { display: none !important; } Como es un identificador utilizo en la regla el símbolo “almohadilla” para el selector “search”, abro llaves para iniciar la declaración, escribo mi declaración con prioridad (¡important) y mayor jerarquía de ejecución,  y cierro llaves. En la siguiente imagen he insertado esta regla en una misma línea en el Diseñador de plantillas de Blogger para aprovechar el espacio: Regla CSS para ocultar la caja el buscador En otras palabras, con nuestra regla le estamos diciendo a Blogger que no nos muestre en pantalla la caja del buscador y que esta regla es de primera prioridad sobre cualquier otra que afecte a la caja del buscador. Ahora, aceptamos los cambios pulsando sobre el botón “Aplicar al blog”, parte superior derecha: Aplicar regla CSS para ocultar buscador Comprobamos los cambios en la vista de la página. Ya no vemos la caja del buscador en el encabezado a la derecha: Buscador oculto por regla CSS MENÚ DE VISTAS DINÁMICAS Vamos a inspeccionar el elemento de la barra del menú con Chrome: Inspeccion del menú de vistas dinámicas de la plantilla Blogger Si queremos desaparecer todo el menú de vistas, primero comprobamos  el  identificador del menú (id=”views”) en la pantalla del Inspector. Luego, evitaremos mostrar la barra con el menú de vistas dinámicas con la siguiente  regla: #views{ display: none !important; } (En Nuevo Blogger 2011 http://nuevoblogger2011.blogspot.com.es/2011/11/como-desactivar-el-menu-de-vistas.html se propone una segunda regla para corregir el resultado del diseño). Seguidamente insertamos nuestra  nueva regla en el Diseñador de plantillas de Blogger: Regla CSS para ocultar el menú de vistas dinámicas Y pulsamos el botón “Aplicar al blog” para que tengan lugar los cambios. Ahora nuestro blog no muestra la barra con el menú de vistas dinámicas: Menú de vistas dinámicas oculto También podemos seleccionar el tipo de vista al desplegar con el puntero (punta de flecha en gris) en las líneas de código y aparecen las clases que corresponden a cada opción del menú vistas dinámicas: Tipos de vistas dinámicas de la plantilla Si solo nos interesa ocultar las vistas “Flipcard” y “Magazine” nuestra regla puede ser: #Flipcard.ss, #views ul li:nth-child(2), #Magazine.ss, #views ul li:nth-child(3){display: none !important;} (Para otras combinaciones, podéis consultar las indicaciones del Nuevo Blogger 2011 antes referido). Inserto mis reglas en el Diseñador de plantillas de Blogger: Regla CSS para ocultar Flipcard y Magazine Vistas Dinámicas Aplicamos los cambios al blog y comprobamos que ahora no aparecen las vistas dinámicas Flipcard ni Magazine: Ocultas vistas dinámicas Flipcard y Magazine   GADGET-DOCK Vamos a ocultar el Gadget-Dock, que es el menú de fichas que se despliega a la derecha de la página. Menú Gadget-Dock de plantilla dinámica Miramos en el Inspector del  elemento su identificación: Inspeccionar Gadget-Dock Construimos nuestra regla así: #gadget-dock {display:none !important; } Añadimos  la regla en el Diseñador de plantillas de Blogger: Regla para ocultar el Gadget-Dock Comprobamos en la visualización de la página que ya no aparece el menú de pestañas lateral: Gadget-Dock oculto en la página dinámica   RIBBON-DATE CINTA CON FECHA Vamos a construir una regla CSS para que se oculte el detalle de la fecha de la entrada en la cinta que aparece en el lado izquierdo: Ribbon-Date en plantilla dinámica Inspeccionamos el elemento Ribbon-Date en Chrome: Inspeccionar Ribbon-Date Vemos que son dos clases “ribbon” y “date”, por lo tanto en nuestra regla CSS es oportuno utilizar el punto “.” así: .ribbon, .date {display:none !important;} En el Diseñador de plantillas de Blogger añadimos la nueva regla CSS: Relga CSS para ocultar el Ribbon-Date Aplicamos los cambios al blog y comprobamos  los resultados en el navegador: Ribbon-Date oculto de la plantilla dinámica de Blogger   OTROS ELEMENTOS Para ocultar los elementos en el pie de página sobre publicación y redes sociales podemos utilizar las siguientes reglas CSS: Datos de publicación: .publish-info {display:none !important;} Iconos y datos de redes sociales: .share-controls,  . delay {display:none !important;} Así queda el Diseñador de plantillas de Blogger en su sección de “Añadir código CSS personalizado” con todas nuestras reglas: Reglas CSS para ocultar elementos de la plantilla dinámica ETIQUETAS Para ocultar las etiquetas no utilizaremos reglas CSS sino que  en cada entrada dejaremos en blanco el cuadro de “Etiquetas”. Si hay alguna etiqueta, la borramos. Luego pulsamos “Listo” y después “Actualizar” para que se vean los cambios en el navegador. Evitar etiquetas en las entradas del blog COMENTARIOS Para ocultar los comentarios vamos a “Opciones” (barra a la derecha) de cada “Entrada” (o página del blog) y desactivamos los comentarios: Ocultar los comentarios de las entradas   Pulsamos “Listo” y luego “Actualizar” el blog  para aceptar los cambios. Después de hacer todos nuestros cambios, nos queda en el navegador la siguiente pantalla final: Resultados de aplicar las reglas CSS La dirección de los resultados de los cambios en el blog por medio de reglas CSS está en: http://final-ocultarelementos.blogspot.com.es/ Preguntas y Respuestas 1)      ¿Por qué no veo los cambios en el navegador? Revisar el código CSS, tanto espacios como símbolos. También, no olvidar dar prioridad a las reglas con “!important” de lo contrario podría sobreescribirse la regla por otra y no funcionar. 2)      ¿En cuáles navegadores se han probado estas reglas? Las reglas CSS de este tutorial se probaron sobre Internet Explorer, Google Chrome y Filezilla Firefox. 3)      ¿Cómo puedo ocultar la frase de pie de página “Con la tecnología de Blogger.”? ; ) Ya lo sabemos … construir la regla CSS y eso queda para ti  ; )  

Anuncios

Etiquetado:, , , ,

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

¿Qué es esto?

Actualmente estás leyendo Cómo ocultar elementos de plantilla dinámica de Blogger en Instalar en el PC. Tutoriales paso a paso..

Meta