Eso es lo más grande aquí podemos cerrar esto puede ser que se ve muy bien.
En realidad ahora lo más probable es que en un blog real este código HTML.
Lo más seguro es que tengas un botón o que el texto o el título sea un enlace.
Por lo tanto volvemos a quien trava blog de la CH4 vamos a colocar un enlace.
Ah y si recuerdas para simular un enlace se utiliza el signo numeral o gato o hashtag y lo rodeamos
y arriba también a signo de gato numeran y rodeamos el H4.
Eso por ejemplo a la hora de guardar.
Puedes ver que nos cambia los colores.
Por lo tanto ponemos aquí texto entrada nueva cuenta y ponemos a todos los enlaces ponemos color y el
color va a ser negro puedes ponerle aquí Black solamente hay un color negro o también en hexadecimal
que serían los ceros que aparecen en el color y se ve bien.
Ahora le agrega a esa línea abajo que a mí no me gusta pero bueno si te gusta la puedes dejar si se
le quieres quitar pues poner el texto.
Y eso lo van a eliminar entonces puedes ver que se va viendo bastante bien las entradas del blog.
Ahora por ejemplo si abrimos el diseño hay dos cosas que nos hacen falta.
Primero esta línea que está aquí.
Y segundo el color que está en esta parte vamos a empezar con la línea y para ello estaremos utilizando
de nueva cuenta lo que se conoce como pseudo pero si recuerdas anteriormente vimos Jover dije que estos
eran pseudo selectores.
Ahora veremos lo que son pseudo elementos de scroll y voy a copiar este selector porque puedes ver que
está después de este Gdeim de este CH4 aparece esta línea aquí con H4 y aquí vamos a poner dos puntos
y luego dos puntos after.
Eso quiere decir creame un elemento que se conoce como pseudo elemento después de la H4.
Aquí vamos a poner contenta a suponerle Hola entonces esto es lo que hace un solo elemento puedes ver
que aparece o no la y aquí abajo también os mola.
Ahora puedes ver que se llaman pseudo elementos porque no se pueden seleccionar es decir se intenta
seleccionar desde aquí puedes ver que se pasa desde aquí hasta abajo no se pueden seleccionar incluso
si los inspeccionan con HTML no es visible este HD2 es el que dice Aquí terraza en el techo de tu casa
y el hola no aparece por ningún lado solamente aparece este after son pseudo elementos porque son elementos
que no existen solamente son creados digamos de forma virtual por así decirlo ahora no queremos que
diga ola de hecho no queremos que diga nada no vamos a dejar vacío pero vamos a utilizar un poco de
CSS para definirlo ahora un pseudo elemento no tiene un display definido por lo tanto aquí display Block
si recuerdas display Block nos permite agregar un widget digamos 150 pixeles que sería 15 RAM y una
altura de digamos 5 pixeles que sería .5 RAM y un color de fondo utilizar el mismo color verde.
Entonces si guardas cambios puedes ver que nos genera esta línea y de nueva cuenta esa línea no la puedes
seleccionar es un pseudo elemento es decir no existe una página donde vas a encontrar mucha información
sobre pseudo elementos es la pagina web de Firefox muchos e incluso mis profesores se utilizaban solo
3 esculca la mejor documentación para la web lo vas a encontrar en Firefox es por mucho la mejor y qué
vas a encontrar after CIFOR y otros pseudo elementos que puedes utilizar ahora también existen pseudo
selectores ya se ponen de pseudo selectores pseudo clases los vas a encontrar más bien como pseudo clases.
Aquí viene el listado completo de pseudo clases.
Las diferencias en su sintaxis es que uno tiene dos puntos y otros tienen dos veces dos puntos pero
por ejemplo si eliminas aquí puedes ver que sigue funcionando pero solamente es así como una recomendación
que escribas con dos veces dos puntos y recuerda 100 espacios.
Ahora aquí queda muy pegado a es nuestro nuestra línea pero gracias al display de Bloc Podemos ponerle
un margen de digamos un 10 píxeles y guardar cambios desde el que se vea esta forma queda bastante bien.
Ya para finalizar por ejemplo puedes ver que la fecha y el autor están de otro color.
Habíamos agregado un par de etiquetas en esta parte.
Por ejemplo puede ser que tenemos estos enm voy a seleccionar mi presionó comande o controlde para seleccionar
todos los que selecciona a estos.
Aquí son ocho en total lo voy a cambiar por una etiqueta de spam.
Si guardas cambios puedes ver que el spam no cambia nada se queda se queda ahí o sea no te agregan nada
no cambia su apariencia pero usualmente esta etiqueta se utiliza para cosas como ésta.
Por lo tanto podemos poner aquí texto entrada y luego es spam y cambiar su color digamos color y vamos
a ponerlo aquí que vendría siendo el color amarillo guardás cambio sí que se ve de esta forma usualmente
muchos blogs si vienen puedes dar clic en las fechas para ver entradas publicadas en esa fecha o en
el autor para ver entradas publicadas por el autor es algo que por ejemplo WordPress ya tiene incluido
ya para finalizar nuestro blog y testimoniales puedes ver que estamos perdiendo no hemos puesto en nuestras
clases de scroll y aquí vas a poner clas clas entrar texto y FOM Way 300 copiamos este bajo.
También puede ver que tenemos nuestras clases si se ven bastante bien aquí también podremos poner lo
que agregamos anteriormente como sección y sección para que nos agregue un poco de margen de separación
y se vea mejor con eso está listo el blog.
El siguiente video vamos a construir esta parte de los testimoniales si continuamos en el siguiente
video.