1
00:00:01,130 --> 00:00:05,420
Eso es lo más grande aquí podemos cerrar esto puede ser que se ve muy bien.

2
00:00:05,420 --> 00:00:12,170
En realidad ahora lo más probable es que en un blog real este código HTML.

3
00:00:12,170 --> 00:00:16,970
Lo más seguro es que tengas un botón o que el texto o el título sea un enlace.

4
00:00:16,970 --> 00:00:23,360
Por lo tanto volvemos a quien trava blog de la CH4 vamos a colocar un enlace.

5
00:00:23,420 --> 00:00:30,670
Ah y si recuerdas para simular un enlace se utiliza el signo numeral o gato o hashtag y lo rodeamos

6
00:00:32,180 --> 00:00:39,590
y arriba también a signo de gato numeran y rodeamos el H4.

7
00:00:39,820 --> 00:00:41,670
Eso por ejemplo a la hora de guardar.

8
00:00:41,670 --> 00:00:43,490
Puedes ver que nos cambia los colores.

9
00:00:43,490 --> 00:00:53,550
Por lo tanto ponemos aquí texto entrada nueva cuenta y ponemos a todos los enlaces ponemos color y el

10
00:00:53,550 --> 00:00:59,190
color va a ser negro puedes ponerle aquí Black solamente hay un color negro o también en hexadecimal

11
00:00:59,220 --> 00:01:04,590
que serían los ceros que aparecen en el color y se ve bien.

12
00:01:04,800 --> 00:01:09,390
Ahora le agrega a esa línea abajo que a mí no me gusta pero bueno si te gusta la puedes dejar si se

13
00:01:09,390 --> 00:01:11,220
le quieres quitar pues poner el texto.

14
00:01:11,330 --> 00:01:15,720
Y eso lo van a eliminar entonces puedes ver que se va viendo bastante bien las entradas del blog.

15
00:01:15,750 --> 00:01:19,440
Ahora por ejemplo si abrimos el diseño hay dos cosas que nos hacen falta.

16
00:01:19,440 --> 00:01:21,170
Primero esta línea que está aquí.

17
00:01:21,720 --> 00:01:26,460
Y segundo el color que está en esta parte vamos a empezar con la línea y para ello estaremos utilizando

18
00:01:26,460 --> 00:01:32,790
de nueva cuenta lo que se conoce como pseudo pero si recuerdas anteriormente vimos Jover dije que estos

19
00:01:32,790 --> 00:01:34,330
eran pseudo selectores.

20
00:01:34,440 --> 00:01:41,550
Ahora veremos lo que son pseudo elementos de scroll y voy a copiar este selector porque puedes ver que

21
00:01:41,550 --> 00:01:51,290
está después de este Gdeim de este CH4 aparece esta línea aquí con H4 y aquí vamos a poner dos puntos

22
00:01:51,300 --> 00:01:52,920
y luego dos puntos after.

23
00:01:53,160 --> 00:02:00,290
Eso quiere decir creame un elemento que se conoce como pseudo elemento después de la H4.

24
00:02:00,600 --> 00:02:06,980
Aquí vamos a poner contenta a suponerle Hola entonces esto es lo que hace un solo elemento puedes ver

25
00:02:06,980 --> 00:02:10,270
que aparece o no la y aquí abajo también os mola.

26
00:02:10,450 --> 00:02:16,720
Ahora puedes ver que se llaman pseudo elementos porque no se pueden seleccionar es decir se intenta

27
00:02:16,720 --> 00:02:22,570
seleccionar desde aquí puedes ver que se pasa desde aquí hasta abajo no se pueden seleccionar incluso

28
00:02:22,570 --> 00:02:28,750
si los inspeccionan con HTML no es visible este HD2 es el que dice Aquí terraza en el techo de tu casa

29
00:02:29,350 --> 00:02:35,020
y el hola no aparece por ningún lado solamente aparece este after son pseudo elementos porque son elementos

30
00:02:35,020 --> 00:02:43,030
que no existen solamente son creados digamos de forma virtual por así decirlo ahora no queremos que

31
00:02:43,030 --> 00:02:48,100
diga ola de hecho no queremos que diga nada no vamos a dejar vacío pero vamos a utilizar un poco de

32
00:02:48,100 --> 00:02:58,280
CSS para definirlo ahora un pseudo elemento no tiene un display definido por lo tanto aquí display Block

33
00:02:58,780 --> 00:03:05,450
si recuerdas display Block nos permite agregar un widget digamos 150 pixeles que sería 15 RAM y una

34
00:03:05,450 --> 00:03:13,920
altura de digamos 5 pixeles que sería .5 RAM y un color de fondo utilizar el mismo color verde.

35
00:03:14,580 --> 00:03:19,630
Entonces si guardas cambios puedes ver que nos genera esta línea y de nueva cuenta esa línea no la puedes

36
00:03:19,630 --> 00:03:25,920
seleccionar es un pseudo elemento es decir no existe una página donde vas a encontrar mucha información

37
00:03:26,010 --> 00:03:32,940
sobre pseudo elementos es la pagina web de Firefox muchos e incluso mis profesores se utilizaban solo

38
00:03:32,980 --> 00:03:39,240
3 esculca la mejor documentación para la web lo vas a encontrar en Firefox es por mucho la mejor y qué

39
00:03:39,240 --> 00:03:46,120
vas a encontrar after CIFOR y otros pseudo elementos que puedes utilizar ahora también existen pseudo

40
00:03:46,120 --> 00:03:55,950
selectores ya se ponen de pseudo selectores pseudo clases los vas a encontrar más bien como pseudo clases.

41
00:03:55,960 --> 00:03:58,600
Aquí viene el listado completo de pseudo clases.

42
00:03:58,810 --> 00:04:04,210
Las diferencias en su sintaxis es que uno tiene dos puntos y otros tienen dos veces dos puntos pero

43
00:04:04,210 --> 00:04:09,550
por ejemplo si eliminas aquí puedes ver que sigue funcionando pero solamente es así como una recomendación

44
00:04:09,940 --> 00:04:14,140
que escribas con dos veces dos puntos y recuerda 100 espacios.

45
00:04:14,140 --> 00:04:19,150
Ahora aquí queda muy pegado a es nuestro nuestra línea pero gracias al display de Bloc Podemos ponerle

46
00:04:19,150 --> 00:04:29,580
un margen de digamos un 10 píxeles y guardar cambios desde el que se vea esta forma queda bastante bien.

47
00:04:29,720 --> 00:04:34,080
Ya para finalizar por ejemplo puedes ver que la fecha y el autor están de otro color.

48
00:04:34,190 --> 00:04:37,990
Habíamos agregado un par de etiquetas en esta parte.

49
00:04:38,240 --> 00:04:44,090
Por ejemplo puede ser que tenemos estos enm voy a seleccionar mi presionó comande o controlde para seleccionar

50
00:04:44,090 --> 00:04:51,090
todos los que selecciona a estos.

51
00:04:51,130 --> 00:04:55,870
Aquí son ocho en total lo voy a cambiar por una etiqueta de spam.

52
00:04:55,970 --> 00:05:02,900
Si guardas cambios puedes ver que el spam no cambia nada se queda se queda ahí o sea no te agregan nada

53
00:05:02,900 --> 00:05:08,150
no cambia su apariencia pero usualmente esta etiqueta se utiliza para cosas como ésta.

54
00:05:09,150 --> 00:05:16,740
Por lo tanto podemos poner aquí texto entrada y luego es spam y cambiar su color digamos color y vamos

55
00:05:16,740 --> 00:05:23,280
a ponerlo aquí que vendría siendo el color amarillo guardás cambio sí que se ve de esta forma usualmente

56
00:05:23,280 --> 00:05:28,950
muchos blogs si vienen puedes dar clic en las fechas para ver entradas publicadas en esa fecha o en

57
00:05:28,950 --> 00:05:34,500
el autor para ver entradas publicadas por el autor es algo que por ejemplo WordPress ya tiene incluido

58
00:05:35,570 --> 00:05:40,080
ya para finalizar nuestro blog y testimoniales puedes ver que estamos perdiendo no hemos puesto en nuestras

59
00:05:40,080 --> 00:05:52,800
clases de scroll y aquí vas a poner clas clas entrar texto y FOM Way 300 copiamos este bajo.

60
00:05:52,800 --> 00:05:59,730
También puede ver que tenemos nuestras clases si se ven bastante bien aquí también podremos poner lo

61
00:05:59,730 --> 00:06:07,600
que agregamos anteriormente como sección y sección para que nos agregue un poco de margen de separación

62
00:06:07,600 --> 00:06:10,670
y se vea mejor con eso está listo el blog.

63
00:06:10,800 --> 00:06:15,670
El siguiente video vamos a construir esta parte de los testimoniales si continuamos en el siguiente

64
00:06:15,680 --> 00:06:16,030
video.