Cómo agregar CSS en Blogger-Entender CSS en Blogger

Desea agregar algunos efectos geniales a su blog, como caída de nieve, fuentes 3D, textos de neón, sombras de caja o desea llevar el diseño de su blog al siguiente nivel, entonces todo lo que necesita es insertar algunas líneas de CSS personalizado en su blog. CSS, ¿qué es? CSS se conoce como Hoja de estilo en cascada, que en simple se usa para describir el aspecto de su blog o, en otras palabras, se usa para definir cómo se deben mostrar los elementos HTML. Antes de aprender sobre CSS, es mejor saber sobre HTML. Hay un montón de recursos en CSS e incluso un principiante puede entender fácilmente los elementos básicos de CSS, pero dominarlo tomará mucho tiempo y conocimiento práctico.

CSS juega un papel muy importante en el embellecimiento de elementos y todas las plantillas de Blogger por defecto tendrán su propio código CSS. En cualquier momento, si desea embellecer aún más el diseño de su blog, puede agregar un poco de CSS personalizado. En algunos de nuestros tutoriales de blogger hemos mencionado a nuestros visitantes para agregar códigos CSS, por ejemplo, eche un vistazo a este artículo, pero la mayoría de los principiantes no saben dónde agregar el CSS. La mayoría de ellos simplemente abre sus archivos de plantilla, descubre las etiquetas de piel b:y, de alguna manera, finalmente arruina sus códigos de plantilla. Blogger le permite agregar su propio CSS personalizado en el diseñador de plantillas que anula el código CSS predeterminado para lograr el aspecto atractivo de su blog. Aquí le mostraremos cómo insertar / agregar CSS en Blogger.

Cómo insertar / agregar CSS en Blogger-Comprender CSS en Blogger

Antes de agregar CSS, debe escribir CSS y antes de escribir el código de estilo CSS, debe encontrar los selectores para los que desea cambiar el estilo. Puede hacer uso de las herramientas de desarrollador de su navegador para inspeccionar el elemento, aquí no vamos a detallarlo. Por ejemplo, conoce las etiquetas h1, h2, h3, h4, h5 y h6 en general y para modificar esas fuentes puede agregar CSS como este a continuación.

h1 {font-family: "Times New Roman", Times, serif;font-size: 15px;font-weight: bold;color: rgb(56, 77, 187)}

Pero, ¿qué hará para cambiar el diseño de página, el estilo de pestaña del menú, los enlaces, la familia de fuentes, la alineación, el fondo o el color del texto cuando no conozca la clase de elemento? Aquí es donde tienes que hacer uso de la herramienta de desarrolladores de tu navegador. Simplemente haga clic derecho en un elemento y luego haga clic en inspeccionar elemento, donde verá los elementos a su izquierda y CSS a su derecha. Altere el código CSS y vea cómo resultan los cambios, por ejemplo, aquí está el código CSS para la pestaña de menú que encontrará diferente en su plantilla.

.tabs-inner .widget li a:hover {color: #fff;background-color: #FF9900;text-decoration: underline;display: inline-block;padding: .6em 1em;font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;border-left: 1px solid #ffffff;border-right: 1px solid #dddddd;}

Mediante el uso de la herramienta inspeccionar elemento, puede previsualizar los cambios de CSS para cualquier elemento y cuando obtenga el aspecto deseado, tome el código CSS y ejecútelo en su blog.

Aplicar CSS en Blogger

Hay dos formas de implementar CSS en Blogger, una es editando los archivos de plantilla directamente y el otro método más fácil es usar la opción agregar CSS en el diseñador de plantillas de Blogger.

Añadir CSS usando diseñador de plantillas Blogger

Añadir CSS aquí es la forma más fácil y segura, ya que no afecta a los archivos de plantilla principales. Aparte de agregar CSS personalizado, el diseñador de plantillas de Blogger le permite cambiar fácilmente el fondo de su blog, ajustando el ancho, el diseño, los estilos de fuente, los colores, el área del gadget, el contenido del pie de página, etc.

• Inicie sesión en su blog de Blogger, vaya a Plantillas y luego haga clic en Personalizar
• Ahora verá la página Diseñador de plantillas de blogger con 5 opciones
• Haga clic en la opción Avanzada, desplácese hacia abajo por los sub ítems y luego elija Agregar CSS.
• A continuación, verá un campo a su lado derecho y aquí es donde debe agregar su CSS personalizado.

Agregue el código CSS personalizado de arriba, vea los cambios a continuación y cuando todo haya terminado, haga clic en” Aplicar al blog ” en la parte superior.

Agregar CSS editando tu plantilla de Blogger

La otra forma de aplicar CSS es editando directamente el CSS principal o agregando un CSS personalizado a tu archivo de plantilla. No sugerimos este método para principiantes porque el uso inadecuado puede llevar a romper su plantilla. Por lo tanto, antes de agregar CSS con este método, asegúrese de hacer una copia de seguridad; he aquí cómo hacer una copia de seguridad y restaurar la plantilla de Blogger.

• En su panel de Blogger, vaya a Plantilla y luego haga clic en editar HTML
• Ahora verá los códigos de su plantilla, simplemente presione CTRL + F para buscar y luego busque < b:skin>
• Expanda < b:skin> y verá que aparece el CSS para su plantilla de blog.

También lea: Cómo hacer una copia de seguridad completa de Blogger blog

Comience a editar el CSS existente o puede agregar su CSS personalizado, pero aquí no obtiene la opción de vista previa que obtiene en diseñador de plantillas de Blogger. Finalmente guarde su plantilla cuando termine.

Espero que este artículo te guíe a agregar CSS en Blogger. Comience a embellecer su blog y para obtener más actualizaciones, suscríbase a nuestros canales RSS.