Cómo abrir rápidamente el código de la página en el navegador, incluso si está prohibida la copia. Desempaquetar y decodificar scripts de JavaScript Cómo decodificar el código de una página html

Este artículo es una adición al artículo sobre la desofuscación de scripts. Aquí se considerarán los principios básicos de encriptación y empaquetado, puntos débiles protecciones, métodos de eliminación manual, así como herramientas universales para la eliminación automática de empaquetadores y protección con bisagras de scripts de JavaScript. Más y más últimamente fuente scripts está encriptado o empaquetado. Yandex, DLE y otros proyectos populares comenzaron a involucrarse en esto, y las hermosas historias sobre "cuidar a los usuarios", "ahorrar tráfico" y otras tonterías parecen muy divertidas. Bueno, si alguien tiene algo que esconder, entonces nuestra tarea es llevarlo al agua limpia.

Comencemos con la teoría. Debido a las peculiaridades de la ejecución de JavaScript, todos los codificadores y empaquetadores, a pesar de su diversidad, tienen solo dos opciones de algoritmo: o como opción: el segundo método se usa con mayor frecuencia para proteger el código html fuente de la página, así como varios troyanos. para inyectar código malicioso en la página, como un marco oculto. Ambos algoritmos se pueden combinar, los "trucos" y la complejidad del descifrador pueden ser cualquiera, solo el principio en sí permanece sin cambios.

En ambos casos, resulta que las funciones evaluar() y documento.escribir() se transmiten datos totalmente descifrados. ¿Cómo interceptarlos? Intenta reemplazar evaluar() en alerta(), y en el cuadro de mensajes que se abre, verá inmediatamente el texto descifrado. Algunos navegadores le permiten copiar texto de los cuadros de mensajes, pero es mejor usar este decodificador semiautomático:

< html >
< head >< title >Decodificador JavaScript
< body >
< script type = "text/javascript" >
// Función para escribir los resultados del descifrado en el registro
decodificador de función(str)(
documento. getElementById("decodificado"). valor += cadena + "\n" ;
< textarea id = "decoded" style = "width:900px; height:500px;" >
< script type = "text/javascript" >

Por ejemplo, tomemos un script de Yandex, mirando el código fuente, vemos algo que no es saludable:

Eval(función(p,a,c,k,e,r)(e=función(c)(return(c c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36)));if(!
"".replace(/^/,String))(while(c--)r=k[c]||e(c);k=)];e=function()(return"\w+"); c=1);mientras(c--)si(k[c])
p=p.reemplazar(nueva RegExp("\b"+e(c)+"\b","g"),k[c]);return p)("$.1e
.18=8(j)(3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j ["6-L-17"]
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6 -9").Z("7",8(
)(3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g -4");$(5).16(
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2 ("".b-12");
[el resto de las mismas tonterías cortadas]

Debo decir de inmediato que este script es procesado por JavaScript Compressor, es fácil reconocerlo por su firma: el nombre característico de la función al comienzo del script. Copie todo el texto fuente del script, reemplace el primero evaluar en descifrador, péguelo en el decodificador y guárdelo como una página html. Ábralo en cualquier navegador y vea que el script desempaquetado apareció inmediatamente en el área de texto. Es demasiado pronto para alegrarse, eliminó todos los saltos de línea y el formato de código. Cómo lidiar con esto está escrito en el artículo sobre deofuscación.

Segundo ejemplo. Aquí hay una página html cubierta con HTML Protector. Esta es una página que demuestra las capacidades del programa, por lo que todas las opciones están involucradas: bloquear la selección y copia de texto, prohibir el botón derecho del mouse, proteger imágenes, ocultar la barra de estado, cifrar el código html, etc. Abrimos el código fuente, miramos. En la parte superior está el ya familiar document.write y script encriptado. Lo ejecutamos a través del decodificador, obtenemos la función de descifrar el contenido principal:

Código (JavaScript):

hp_ok = true;función hp_d01 (s)(... cortar... o = ar. unir ("")+ os; documento. escribir (o)

Reemplazamos el último document.write en la función con el decodificador e insertamos los tres scripts cifrados restantes después:

< script type = "text/javascript" >
// Pegue el script encriptado aquí, preliminarmente
// reemplaza todas las llamadas a eval() y document.write() con decoder().
hp_ok = true ;function hp_d01 (s )( .... o = ar . join ("" )+ os ;decoder (o );
hp_d01(unescape(">QAPKRV%22NCLEWC ....
hp_d01(unescape( ">QAPKRV%22NCLEWCEG? HctcQa...
hp_d01(unescape( ">`mf(%22`eamnmp? !DDDDDD %22v ...

Para mayor comodidad, los guiones no se proporcionan en el artículo en su totalidad, pero debe copiarlos en su totalidad. Abrimos el decodificador en el navegador y vemos los scripts de seguridad agregados por el programa y el texto fuente descifrado de la página. Para mayor comodidad, puede descifrar solo el tercer script, que contiene el código html de la página. Eso es todo protección. Como puedes ver, nada complicado. Del mismo modo, se eliminan otras protecciones de las páginas html.

Pasemos del descifrado manual al automático. Para eliminar las protecciones del primer tipo, modifiqué ligeramente el script Beautify Javascript que ya conoce y lo compilé en un archivo exe. Maneja la mayoría de las protecciones y contenedores de JavaScript que he visto sin problemas.

Eval.JavaScript.Unpacker.1.1-PCL.rar (12.124 bytes)

Para casos más complejos habrá que emplear artillería pesada. Este es un proyecto gratuito diseñado para investigar troyanos y otros códigos maliciosos. Dado que todos los programas de protección de derechos de autor son inequívocamente maliciosos, Malzilla nos ayudará en la lucha contra ellos. Descargar (hoy es 1.2.0), descomprimir, ejecutar. Abra la segunda pestaña del Decodificador, pegue el código del script encriptado en la ventana superior, presione el botón ejecutar guión.

en carpeta eval_temp se resumen todos los resultados de la ejecución de las funciones eval(), incluidos los intermedios. Puedes verlos haciendo clic en el botón. Mostrar resultados de eval(), el texto se abrirá en la ventana inferior. Se puede copiar, pegar en la ventana superior y formatear inmediatamente con el clic de un botón código de formato. Además del decodificador, Malzilla tiene muchas más herramientas y configuraciones que le permiten eliminar fácilmente cualquier protección de los scripts de JavaScript.

También puede prestar atención a otra herramienta gratuita para trabajar con scripts encriptados: FreShow. Hay menos funciones en él, pero es bastante el lugar para estar. Desde fuera del sitio, puede descargar un video de demostración que muestra un ejemplo de cómo trabajar con el programa.

Como puede ver, no hay nada difícil en eliminar la protección de los scripts de JavaScript y de las páginas html. ¿Sigues defendiendo tus asquerosos "derechos de autor"? ¡Entonces vamos a ti!

Debajo de todas las bellas imágenes, la tipografía perfecta y los llamados a la acción maravillosamente ubicados, se encuentra el código fuente de su sitio.

Todos los días, su navegador convierte este código en páginas impresionantes para sus visitantes y clientes.

Google y otros motores de búsqueda "leen" este código para determinar dónde deben aparecer sus páginas web en sus índices para un determinado consulta de busqueda.

Por lo tanto, es muy importante para optimización de motores de búsqueda(SEO) tiene lo que está en el código fuente.

Esta guía rápida le mostrará cómo leer el código fuente de su sitio para que pueda estar seguro de que su SEO es correcto y le enseñará cómo verificar sus términos de SEO.

También veremos algunas otras situaciones en las que saber cómo ver y examinar partes importantes del código fuente ayudará con otras investigaciones de mercado.

Cómo ver el código fuente.

El primer paso para verificar el código fuente de su sitio es mirar el código fuente real. Cualquier navegador web lo hace fácil.

A continuación se encuentran los comandos de teclado para ver el código fuente de su página web para ordenador personal y Mac.

Firefox - CTRL + U (Mantenga presionada la tecla CTRL y presione la tecla "U") Alternativamente, puede ir al menú "Firefox", luego hacer clic en "Desarrollador web" y luego en "Fuente de la página".
explorador de Internet- CTRL + U. O haga clic botón derecho del ratón ratón y seleccione "Ver código fuente".
Chrome - CTRL + U. Puede hacer clic en la imagen de una llave con tres líneas horizontales en la esquina superior derecha. Luego haga clic en "Herramientas" y seleccione "Ver código fuente".
Opera: CTRL + U. También puede hacer clic derecho en una página web y seleccionar "Ver código fuente de la página".

Mac

Safari: método abreviado de teclado Opción + Comando + U. También puede hacer clic con el botón derecho en una página web y seleccionar Mostrar código fuente de la página.
Firefox: puede hacer clic con el botón derecho y seleccionar "fuente" o puede navegar hasta el menú "Herramientas", seleccionar "Desarrollador web" y hacer clic en "Fuente de la página". Método abreviado de teclado Ctrl+U.
Chrome: vaya a "Ver", luego haga clic en "desarrollador" y luego en "Ver código fuente". También puede hacer clic con el botón derecho y seleccionar Ver código fuente de la página. Método abreviado de teclado Opción+Comando+U.

Una vez que sepa cómo ver el código fuente, debe saber cómo buscarlo.

En general, las mismas funciones de búsqueda que utiliza en la navegación web normal también se aplican a las búsquedas de código fuente.

Los comandos, CTRL + F (buscar) lo ayudarán a ver rápidamente el código fuente de elementos importantes de SEO.

Etiquetas de título.

La etiqueta del título es el elemento más importante del SEO. Esto es lo más importante en el código fuente.

Si vas a tomar solo una cosa valiosa de este artículo, presta atención a esto:

Ya sabes, estos son los resultados que proporciona Google cuando buscas algo.

Todos estos resultados provienen de las etiquetas de título de las páginas web. Entonces, si no tiene etiquetas de título en su código fuente, es posible que no aparezca en Google (o en cualquier otro motor de búsqueda).

Lo creas o no, he visto sitios web sin etiquetas de título. Intentemos hacer una búsqueda rápida en Google del término " Guías de mercadeo". Lo que vemos:

Puedes ver el primer resultado de búsqueda del blog KISSmetrics capítulo Guías de mercadeo.

Si seguimos el enlace del primer resultado de búsqueda y visualizamos el código fuente de la página, podemos ver la etiqueta en el título:

La etiqueta de título se indica mediante la etiqueta de apertura: </b>. y termina con una etiqueta de cierre: <b></ <i>título</i>> </b>. La etiqueta del encabezado generalmente se encuentra en la parte superior del código fuente en la sección <b><head> </b>. </i></p> <p>Y podemos ver que el contenido dentro de la etiqueta del título coincide con lo que se usa en el título del resultado. <a href="https://bakep.ru/es/kak-vyiti-iz-akkaunta-v-prilozhenii-gmail-kak-na-androide-vyiti-iz-google-akkaunta-gmail.html">búsqueda de Google</a>.</p> <p>Pero no solo es necesario incluir las etiquetas de título en los resultados de búsqueda de Google.</p> <p>Google también identifica palabras en las etiquetas de título como palabras clave importantes que cree que son relevantes para que los usuarios busquen.</p> <p>Entonces, si desea obtener una clasificación de página web específica para un tema en particular, será mejor que se asegure de que las palabras que describen el tema estén incluidas en la etiqueta del título.</p> <p>Hay varios recursos en línea donde puede obtener más información sobre cómo <a href="https://bakep.ru/es/a-set-of-tags-for-video-with-animals-how-to-learn-and-add-keywords-tags-for-youtube-in-video-per-channel.html">palabras clave</a> y las etiquetas de título juegan un papel importante en la arquitectura general de su sitio web.</p> <p>Aquí hay algunos puntos importantes para tener en cuenta la importancia de sus etiquetas de título:</p> <ul><li>Asegúrese de tener solo una etiqueta de título por página web.</li> <li>Asegúrese de que cada página web del sitio tenga su propia etiqueta de título.</li> <li>Asegúrese de que cada etiqueta de título en su sitio sea única. Nunca duplique el contenido de una etiqueta de título específica.</li> </ul><h3></h3> <p>Próximo <a href="https://bakep.ru/es/pesnya-dlya-roditelei-na-svadbe-pesnya-ot-roditelei-na-svadbe.html">elemento importante</a> La parte principal de su página web es la etiqueta de meta descripción.</p> <p>Este es un fragmento de 160 caracteres de su contenido que aparece debajo de su título en los motores de búsqueda.</p> <p><img src='https://i0.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/read-website.png' height="511" width="500" loading=lazy loading=lazy></p> <p>He visto cientos de sitios que ignoran por completo esta etiqueta. Es muy fácil encontrarlo en el código fuente:</p> <p><img src='https://i0.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/how-read1.png' width="100%" loading=lazy loading=lazy></p> <p>Por lo tanto, verifique y asegúrese de que esta etiqueta esté presente en todas las páginas web de su sitio. Más importante aún, asegúrese de no duplicarlo en varias páginas.</p> <p>La metaetiqueta de descripción duplicada no es una penalización del motor de búsqueda, pero es un error de marketing muy grande.</p> <p>Mucha gente ignora la etiqueta de meta descripción, pero realmente necesitas trabajar en ella porque dice <a href="https://bakep.ru/es/tendencii-razvitiya-poiskovyh-sistem-poiskovye-sistemy-interneta-kakie.html">buscador</a>.</p> <p>Considere que la metaetiqueta de descripción lo ayudará a atraer más visitantes y aumentar los clics dirigidos a su sitio.</p> El código HTML es esencialmente su página en sí misma, especifica exactamente cómo se construirá y mostrará su sitio en la pantalla del usuario. Por regla general, este código es abierto, es decir, cualquier usuario puede verlo y leerlo libremente. Si por una u otra razón no desea que nadie <b>tuvo acceso a su código</b>, Usted puede . Esto implica la creación de un algoritmo especial que <b>codifica tu código</b>, es decir, oculta su apariencia principal, haciéndola inaccesible para los usuarios del sitio. <h2>¿Cuándo y quién podría necesitarlo?</h2>Absolutamente cualquier webmaster o propietario de un sitio puede realizar dicho cifrado. La pregunta es qué tan razonable y necesario es. Por ejemplo, si tiene una página de destino ordinaria hecha de acuerdo con una plantilla y que no difiere de otras, no tiene sentido codificar, ya que dicha plantilla ya está disponible públicamente. En este caso, es poco probable que alguien copie y estudie su código. Pero si tiene un sitio web que tiene un diseño único, ha trabajado mucho y duro en él o ha pagado mucho dinero por él, entonces aún debe pensar en el código. Hay casos muy frecuentes en los que el propietario tiene un sitio en el que ha invertido mucho esfuerzo, tiempo y dinero, y después de un tiempo de una forma u otra descubre exactamente el mismo sitio, con el mismo diseño y estructura, pero en un diferente dominio y alojamiento. Muy a menudo, a los propietarios de los sitios se les informa sobre esto en los comentarios de los propios usuarios. En este caso, podemos concluir con seguridad que alguien simplemente <b>copió el código html</b> de su sitio y lo lanzó en el suyo. <h2>¿Qué hacer para protegerse?</h2>De situaciones de copiar y usar el código HTML de otra persona sin permiso, no es tan fácil protegerse. Y en general, si una persona ya ha visto tu sitio, podrá duplicarlo incluso sin código, siempre que tenga ciertos conocimientos en el campo del desarrollo web. Pero, en cuanto al código HTML en sí, se puede cifrar. Funciona sobre la base de un script javascript especial. Con nuestra herramienta, usted Esto crea un script especial que está diseñado para el descifrado. Funciona de manera bastante simple: cuando un visitante ingresa a su sitio, se carga un código encriptado que no puede entender. En el mismo momento, se inicia el javascript generado, que descifra el código y muestra el sitio en la pantalla del usuario. Al mismo tiempo, el propio visitante no puede ver el código real. Sin embargo, este método también tiene un pequeño inconveniente. Hay usuarios en cuyos navegadores está prohibido el lanzamiento de javascript en el sitio, en cuyo caso el script no se iniciará, respectivamente, el código HTML no se descifrará y el sitio no se mostrará. Pero, no debe molestarse, tal configuración del navegador es muy rara, podemos decir que el 99% de los navegadores permiten que se ejecute javascript. <h2>¿Cómo hacerlo?</h2>Esto se hace de manera muy simple con la ayuda de nuestra herramienta. Todo lo que se requiere de usted es pegar su código HTML en el campo de esta página y hacer clic en el botón para iniciar el cifrado. Como resultado, en otro campo recibirá un código ya encriptado, que ya se puede usar directamente en su sitio. 1 voto <p>Buen día, queridos lectores de mi blog. A veces encuentras alguna característica hermosa en el sitio y la pregunta comienza a atormentarte cómo el creador logró un efecto tan interesante.</p> <p>Resulta que la respuesta es bastante fácil. Y si tiene algunas habilidades, puede recolectar muchas de esas fichas y crear su propio sitio web único en poco tiempo.</p> <p>Hoy hablaremos sobre cómo abrir el código de una página, un elemento determinado y aprenderemos a usar esta habilidad a tu favor.</p> <h2><span>Conocimientos básicos sobre código.</span></h2> <p>Mi sitio es para principiantes y primero me gustaría hablar brevemente sobre los sitios y el código en general.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/cit1-75-537x292.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Para dibujar una imagen, luego cortarla en pedazos pequeños, escribir un código, gracias al cual el navegador volverá a reunir todos los elementos en un solo todo. Todo parece ser muy complicado, ¿no? En absoluto, y no vale la pena preocuparse por eso.</p> <p>Así es como se construyen sitios web de calidad. Si quieres, entra en este negocio y estudia, no hay deseo, nadie puede obligarte.</p> <p>Sólo puedo decir una cosa... no hay nada más agradable que ver cómo las palabras incomprensibles escritas por ti se transforman en un todo único y cobran vida: los enlaces funcionan, los botones se mueven, las imágenes se mueven, el texto se arrastra. Creo que sé cómo se sintió Víctor Frankenstein.</p> <p>Cuando comienzas a comprender el lenguaje secreto y ves que todo es en realidad mucho más simple de lo que parecía inicialmente, no puedes sino creer en tus propios poderes y capacidades del cerebro. Esto es muy genial.</p> <p>¿Cómo se hacen los sitios web? Idealmente, primero. Solo está pintando un cuadro. Por ejemplo, como se muestra en la siguiente figura. Hasta ahora, esto es solo una imagen, una fotografía. No funcionan los enlaces, cuando haces clic no vas a ningún lado, no se realiza la búsqueda.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_1-46.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Según este dibujo. Mira la captura de pantalla a continuación. Puedes pensar que este es un conjunto de personajes ridículo y muy complejo. De hecho, no todo es tan difícil, hay un cierto algoritmo.</p> <p>Solo hay alrededor de 150 etiquetas y cada una de ellas es responsable de una acción específica: enlace, transferencia, negrita, color, título, etc. Comprenderlos no es tan difícil si tienes el deseo y no te importa el tiempo.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-43.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Gracias al conocimiento de estos atributos, se puede resolver casi cualquier problema. Estas son solo formas de lograr el objetivo, cada desarrollador encuentra la suya.</p> <p>Los creadores experimentados ven inmediatamente cómo lograr resultados, mientras que otros tienen que pensar, buscar una respuesta en los artículos o en el código fuente de los competidores. Simplemente toman la parte necesaria en un sitio de terceros y la editan ellos mismos. Esto acorta significativamente el proceso de trabajo.</p> <p>Un poco más tarde, te mostraré <a href="https://bakep.ru/es/zarabatyvayut-li-bloggery-na-yutube-i-skolko-skolko-mozhno-zarabotat-na.html">ejemplo específico</a>.</p> <h2>Ver código</h2> <p>Entonces, primero déjame mostrarte cómo proceder si necesitas aprender el html de otra persona. Luego vamos a echar un vistazo más de cerca a todos los demás problemas.</p> <h3><span>La mejor manera</span></h3> <p>El método que describiré primero es un poco complicado para los principiantes, pero como introducción, sigue leyendo. Abra la página y haga clic en el botón derecho del ratón. Seleccione "Guardar como..."</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-1-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Guarda toda la página web. Como puede ver en la captura de pantalla, ya he descargado todo por adelantado. Aquí tenemos dos carpetas.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-2-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Todo lo que necesitas está aquí. cada elemento Si comprende esto, puede obtener rápidamente todo lo que necesita. Pero, tal tarea se está volviendo cada vez más imposible. No se realiza la descarga. ¿Qué hacer si está prohibido copiar la página?</p> <h3><span>es google chrome</span></h3> <p>Como te habrás dado cuenta, yo uso más a menudo <a href="https://bakep.ru/es/google-chrome-which-version-to-choose-how-to-know-the-version-of-chrome-step-by-step-instructions.html">Google Chrome</a> y aprenda el código de otra persona en este navegador tan fácil como pelar peras. Como en principio y en cualquier otro. El esquema no será similar, sino idéntico. Abrimos la página cuyo código queremos saber y hacemos clic en cualquier lugar con el botón derecho del mouse. En la ventana que aparece, haga clic en "Ver código de página".</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_3-40.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Se abrirá una hoja de código en una nueva ventana, que es bastante difícil de entender para un principiante. Pero, no tengas miedo antes de tiempo.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_4-36.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Si necesita saber el código de un solo elemento, simplemente desplace el mouse sobre él y haga clic con el botón derecho. Seleccionamos otra función de Chrome: "Ver código de elemento".</p> <p>Por ejemplo, podría estar interesado en cómo se hizo el logotipo, usando una imagen o un lenguaje de programación. Después de todo, puedes dibujar un cuadrado con <a href="https://bakep.ru/es/how-to-align-the-right-edge-of-the-html-align-text-with-padding-css.html">ayuda css</a>. Muchos expertos aconsejan escribir la mayor cantidad de información posible en código. ¿Y cómo funcionan los sitios populares?</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_5-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Aquí está la información que necesita. Arriba html, abajo css. Estos son dos idiomas. El primero es responsable del componente de texto y el segundo del diseño. Si no hubiera css, tendría que prescribir el color y el tamaño de fuente cada vez. Para cada página, es muy largo. Pero si no hubiera html, entonces no tendríamos textos. Aproximadamente explicado, pero en general, todo es así.</p> <p>Por cierto, si está interesado en cómo funciona aquí, puede ver el enlace a la imagen a continuación. Aquí está tu respuesta.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_6-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Mozilla Firefox</h3> <p>Si te gusta trabajar con un bozal, entonces todo será exactamente igual. Abra la página y haga clic en el botón derecho del ratón. "Código fuente de la página" si desea ver el código completo.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_7-32.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Cuando pasa el cursor sobre un elemento, puede abrir su código.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_8-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Aquí los datos se muestran en la parte inferior de la pantalla, pero todo lo demás es exactamente igual.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_9-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Navegador Yandex</h3> <p>En el navegador Yandex, todo es exactamente igual que en las dos opciones anteriores, abra la página, haga clic con el botón derecho, vea el código de la página.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_10-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Pasamos el cursor sobre el elemento si queremos saber exactamente su código.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_11-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Todo se muestra aquí de la misma manera que en cromo.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_12-25.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Ópera</h3> <p>Y por último, Ópera.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_13-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Por cierto, te habrás dado cuenta de que no es necesario utilizar el ratón. Para abrir el código, existe un atajo de teclado rápido y para todos los navegadores es el mismo: <b>CTRL+T</b>.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_14-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Para elementos: Ctrl+Shift+C.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_15-22.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Así es como se ve el resultado.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_16-23.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h2><span>Será interesante para los principiantes.</span></h2> <p>Ahora mira cómo funciona todo. Encuentras un sitio y te gusta mucho algún elemento. Por ejemplo, este. Ya sabes cómo abrir el código del elemento.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_17-20.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ahora cópialo.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_18-19.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Yo uso, pego este código en un nuevo archivo html, en la etiqueta del cuerpo (cuerpo en inglés).</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_19-18.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ahora veamos cómo se ve todo en el navegador.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_20-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Listo. Para que el texto se alinee en los bordes y adquiera un color verdoso, debe conectar css a este documento y copiar un código más del sitio del que robamos este.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_21-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ahora no lo haré. Lleva más tiempo: tanto el mío como el tuyo. Creo que describiré todos los detalles en mis próximas publicaciones. Suscríbete a la newsletter y sé el primero en saber cuándo aparece un artículo.</p> <p>Si no puede soportarlo, pero quiere aprender más sobre html y css ahora mismo, tradicionalmente puedo recomendarle cursos de capacitación gratuitos.</p> <p>Aquí hay 33 lecciones que le permitirán dominar html: <i><b><span>"Curso HTML Gratis"</span> </b> </i>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_22-16-537x476.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Y aquí está la información completa sobre css: <i><b><span>"Curso CSS gratuito (¡45 lecciones en video!)"</span> </b> </i>.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_23-15.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ahora ya sabes un poco más. Le deseo éxito en sus esfuerzos. ¡Te veo pronto!</p> <p><a href="https://bakep.ru/es/firefox-falls-several-times-a-day-how-to-get-rid-of-brakes-in-mozilla-firefox.html">Mozilla Firefox</a> expanda la sección del menú "Ver" y haga clic en el elemento " Código fuente». El mismo artículo está en <a href="https://bakep.ru/es/why-on-the-desktop-are-large-icons-how-to-make-big-icons.html">Menú de contexto</a>, que es cuando haces clic derecho en el texto de la página. También puede usar el atajo de teclado CTRL + U. Mozilla FireFox no usa programas externos: el código fuente de la página con resaltado de sintaxis se abrirá en una ventana separada del navegador.</p> <p>En Internet Explorer, haga clic en el menú Archivo y seleccione Editar en el Bloc de notas. En lugar del nombre Bloc de notas, se puede escribir otro, que haya asignado en la configuración de su navegador para ver el código fuente. Al hacer clic derecho en una página, aparece un menú contextual, que también tiene un elemento que le permite abrir el código fuente de la página en un programa externo: "Ver código HTML".</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>A <a href="https://bakep.ru/es/how-to-add-an-express-panel-in-chrome-transferring-bookmarks-from-the-opera-browser.html">Navegador Ópera</a> abra el menú, vaya a la sección "Página" y tendrá la oportunidad de seleccionar el elemento "Código fuente" o el elemento "Código fuente del marco" en la subsección "Herramientas de desarrollo". Las teclas de acceso rápido CTRL+U y CTRL+SHIFT+U se asignan a esta selección, respectivamente. El menú contextual asociado con hacer clic derecho en la página también tiene una opción de Código fuente. Opera abre el código fuente de la página en un programa externo que está asignado en la configuración del sistema operativo o del navegador para editar archivos HTML.</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p><a href="https://bakep.ru/es/required-settings-in-google-chrome-the-most-important-settings-for-the-google-chrome-browser.html">Navegador de Google</a> Chrome tiene sin duda la mejor organización para ver el código fuente. Al hacer clic derecho en una página, puede seleccionar "Ver código fuente de la página" y luego el código fuente con resaltado de sintaxis se abrirá en una pestaña separada. O puede seleccionar la línea "Ver código de elemento" en el mismo menú y el navegador en la misma pestaña abrirá dos marcos adicionales en los que puede inspeccionar el código HTML y CSS de cualquier elemento de la página. El navegador reaccionará al mover el cursor sobre las líneas de código resaltando los elementos de la página que corresponden a esa sección de código HTML.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://bakep.ru/kak-bystro-otkryt-kod-stranicy-v-brauzere-dazhe-esli-kopirovanie-zapreshcheno.html" content="https://bakep.ru/kak-bystro-otkryt-kod-stranicy-v-brauzere-dazhe-esli-kopirovanie-zapreshcheno.html" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="Как быстро открыть код страницы в браузере, даже если копирование запрещено. Распаковка и расшифровка скриптов JavaScript Как расшифровать html код страницы"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/manhunter.ru/upload/1a/87/1a870b5012697202749e9805fa585605.jpg"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">ARTÍCULOS RELACIONADOS</span></h4> <div class="ads-border"> <div class="ads-content"> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Útil</span></div> <div class="textwidget" align="center"></div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Publicidad</span></div> <div class="textwidget" align="center"></div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>Nuevo</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/podpiska-na-novosti-podpiska-na-novosti-g-konkurenty-iphone.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/lumias.ru/wp-content/uploads/2013/03/lum620tips1.jpg" alt="Suscribirse a noticias G competidores iPhone" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/podpiska-na-novosti-podpiska-na-novosti-g-konkurenty-iphone.html" title="Suscribirse a noticias G competidores iPhone" rel="bookmark">Suscribirse a noticias G competidores iPhone</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/kak-nastraivat-virtualnye-chastnye-seti-vpn-vpn-dlya-brauzerov-na.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/help-wifi.com/wp-content/uploads/2017/05/22-05-2017-9-54-36.jpg" alt="VPN para navegadores en Android y PC: Descargue y habilite Browsec VPN para Google Chrome - instalación y configuración" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/kak-nastraivat-virtualnye-chastnye-seti-vpn-vpn-dlya-brauzerov-na.html" title="VPN para navegadores en Android y PC: Descargue y habilite Browsec VPN para Google Chrome - instalación y configuración" rel="bookmark">VPN para navegadores en Android y PC: Descargue y habilite Browsec VPN para Google Chrome - instalación y configuración</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/pochemu-uvelichilis-yarlyki-na-rabochem-stole-vosstanovit-yarlyki-na-rabochem.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/lumpics.ru/wp-content/uploads/2018/01/Uvelichenie-znachkov-rabochego-stola-s-ispolzovaniem-tachpada.png" alt="Restaurar accesos directos de escritorio" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/pochemu-uvelichilis-yarlyki-na-rabochem-stole-vosstanovit-yarlyki-na-rabochem.html" title="Restaurar accesos directos de escritorio" rel="bookmark">Restaurar accesos directos de escritorio</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/kak-posmotret-foto-v-instagrame-bez-registracii-kak-naiti.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/xn--80aaakxpne3ahl.xn--p1ai/wp-content/uploads/2018/08/Zakrytyj-akkaunt-v-Instagram.jpg" alt="Cómo encontrar una persona en Instagram sin registrarse Ver una cuenta de Instagram sin registrarse" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/kak-posmotret-foto-v-instagrame-bez-registracii-kak-naiti.html" title="Cómo encontrar una persona en Instagram sin registrarse Ver una cuenta de Instagram sin registrarse" rel="bookmark">Cómo encontrar una persona en Instagram sin registrarse Ver una cuenta de Instagram sin registrarse</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/plagin-frigate-dlya-firefox-dostup-k-zablokirovannym-resursam-v-google.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/all-freeload.net/images/programs/screenshot/internet/utility-k-brauzeram/frigate-1__270x132.png" alt="Acceda a los recursos bloqueados en Google Chrome utilizando la extensión gratuita friGate Frigate para la web abierta de Firefox" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/plagin-frigate-dlya-firefox-dostup-k-zablokirovannym-resursam-v-google.html" title="Acceda a los recursos bloqueados en Google Chrome utilizando la extensión gratuita friGate Frigate para la web abierta de Firefox" rel="bookmark">Acceda a los recursos bloqueados en Google Chrome utilizando la extensión gratuita friGate Frigate para la web abierta de Firefox</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/mnogofunkcionalnyi-mikrokompyuter-xtreamer-multi-console-na-baze-android-obzor-minix-neo-x7.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/smartbobr.ru/wp-content/uploads/2018/01/placeholder.jpg" alt="Revisión de MiniX Neo X7: potentes microcomputadoras Android Mini PC con Android" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/mnogofunkcionalnyi-mikrokompyuter-xtreamer-multi-console-na-baze-android-obzor-minix-neo-x7.html" title="Revisión de MiniX Neo X7: potentes microcomputadoras Android Mini PC con Android" rel="bookmark">Revisión de MiniX Neo X7: potentes microcomputadoras Android Mini PC con Android</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/mozhno-li-otkatit-ios-8-4-1-kak-otkatit-versiyu-ios-na-iphone-ipad-sohranenie.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/pdalife.info/uploads/p/3q5pet/22.jpg" alt="¿Es posible revertir ios 8.4? 1. Cómo revertir la versión de IOS en iPhone, iPad. Guardar datos importantes" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/mozhno-li-otkatit-ios-8-4-1-kak-otkatit-versiyu-ios-na-iphone-ipad-sohranenie.html" title="¿Es posible revertir ios 8.4? 1. Cómo revertir la versión de IOS en iPhone, iPad. Guardar datos importantes" rel="bookmark">¿Es posible revertir ios 8.4? 1. Cómo revertir la versión de IOS en iPhone, iPad. Guardar datos importantes</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/luchshie-kanaly-na-youtube-tolko-samoe-poleznoe-i-interesnoe-luchshie-obrazovatelnye-kanaly-na-you.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/selftrue.ru/wp-content/uploads/Thoisoi.jpg" alt="¡Solo lo más útil e interesante!" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/luchshie-kanaly-na-youtube-tolko-samoe-poleznoe-i-interesnoe-luchshie-obrazovatelnye-kanaly-na-you.html" title="¡Solo lo más útil e interesante!" rel="bookmark">¡Solo lo más útil e interesante!</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/es/neustrashimyi-comments-php-prostaya-sistema-kommentirovaniya-s-ispolzovaniem-ajax-sintaksis-php-komm.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/gravatar.com/avatar/112fdf7a8fe3609e7af2cd3873b5c6bd?size=50&default=http%3A%2F%2Fdemo.tutorialzine.com%2F2010%2F06%2Fsimple-ajax-commenting-system%2Fimg%2Fdefault_avatar.gif" alt="Sistema de comentarios simple usando AJAX" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/es/neustrashimyi-comments-php-prostaya-sistema-kommentirovaniya-s-ispolzovaniem-ajax-sintaksis-php-komm.html" title="Sistema de comentarios simple usando AJAX" rel="bookmark">Sistema de comentarios simple usando AJAX</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="https://bakep.ru/es/"><img class="td-retina-data" src="/img/logo.png" data-retina="/img/logo.png" alt="Consejos informáticos para usuarios novatos" title="Consejos informáticos para usuarios novatos" / loading=lazy loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p>© Consejos informáticos para principiantes, 2023</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://bakep.ru/es/feedback.html">Comentario</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://bakep.ru/es/sitemap.xml">Mapa del sitio</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">sobre el sitio</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/front.min.js'></script> <script type='text/javascript' src='/assets/imagesloaded.min.js'></script> <script type='text/javascript' src='/assets/masonry.min.js'></script> <script type='text/javascript' src='/assets/jquery.masonry.min.js'></script> <script type='text/javascript' src='/assets/rsvp.js'></script> <script type='text/javascript' src='/assets/tagdiv_theme.js'></script> <script type='text/javascript' src='/assets/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ; </script> <script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> <script type="text/javascript">  </script><br> <br> </body> </html>