Як знайти html код сторінки Wordpress. Як подивитися вихідний код сторінки та код елемента

Ця свіжа стаття написана, щоб висвітлити актуальну інформаціюпро видалення зайвих посилань із шаблонів Blogspot, а також з нових тем Blogger. Як ви знаєте, у кодах Blogger у 2018 році відбулися зміни, тому багато дій з кодом потрібно робити за новим. Плюс з'явилися нові теми, сформовані інакше. У зв'язку з цими змінами розберемо тему видалення посилань.
Перевірити свій блог на наявність зовнішніх посилань ви можете на сервісах https://pr-cy.ru/link_extractor/ та https://seolik.ru/links. Не забувайте, що потрібно перевіряти не тільки головну сторінку блогу, але й сторінку записів (постів) і сторінки (Page). Велика кількістьзовнішніх посилань, відкритих для індексації, перешкоджають .

Як видалити посилання зі старого стандартного шаблону Blogger На прикладі шаблону Простий (Simple).
Такі шаблони дають найбільше зовнішніх посилань. У моєму тестовому блозі під час встановлення простої теми під час перевірки виявилося 25 зовнішніх посилань на головній сторінці, їх індексувалися 14.
Нагадую, що перед тим, як змінювати код шаблону, зробіть резервну копію!
  • Видалити посилання на Blogger - https://www.blogger.com/.Це посилання міститься у віджеті Attribution. У вкладці “Дизайн блогу” він відображається, як гаджет Атрибуція та . Щоб його видалити, переходимо у вкладку "Тема" -> змінити HTML. По пошуку віджетів (список віджетів) знаходимо Attribution1 і видаляємо весь код разом із секцією footer, в яку він укладений. Так виглядає код, що видаляється в згорнутому вигляді:


    А так повний код:














    Зберігаємо зміни та перевіряємо блог на наявність Атрибуції.
  • Ви, звичайно ж, бачили у своєму блозі іконки “Гайковий ключ та викрутка” для швидкого редагування віджетів. Кожна така іконка несе із собою зовнішнє посилання на Blogger. Наразі вони закриті тегом nofollow, Але все одно їх потрібно позбуватися. Правити ж віджети ви будете у вкладці Дизайн.
    Ось неповний перелік посилань, які зашифровані в іконках гайкового ключа (ID блог буде ваш)
    - Віджет HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
    - Віджет HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
    - Архів блогу: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
    - Ярлики блогу: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
    - Популярні повідомлення: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
    Всі ці посилання легко позбутися. Знайдіть у шаблоні блогу тег. Він зустрічається стільки разів, скільки віджетів у вашому блозі. Видаліть всі входження тега.
  • Видаляємо посилання на швидке редагуваннязаписи блогу (іконка "Олівець"). Спрощує редагування постів, але несе у собі загрозу як зовнішнє посилання виду: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
    Як видалити:
    Спосіб 1 . У вкладці Дизайн відредагуйте елемент “Повідомлення блогу” та зніміть галочку у пункті “Показати “Швидке редагування””.
    Спосіб 2 . знайдіть у шаблоні блогу тег та видаліть його. Збережіть зміни та перевірте свій блог на наявність іконки та посилання.
  • Видалити NavBar. Знайдіть пошук віджетів в шаблон htmlблогу Navbar1 і видаліть весь код разом із секцією.

    А саме:




    function setAttributeOnload(object, attribute, val) (
    if(window.addEventListener) (
    window.addEventListener("load",
    function()( object = val; ), false);
    ) else (
    window.attachEvent("onload", function()( object = val; ));
    }
    }




    gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() (
    if (gapi.iframes && gapi.iframes.getContext) (
    gapi.iframes.getContext().openChild((
    url: "https://www.blogger.com/navbar.g?targetBlogID\x3d1490203873741752013\x26blogName\x3dnew\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3 \x3dhttps://m-ynewblog.blogspot.com /search\x26blogLocale\x3dru\x26v\x3d2\x26homepageUrl\x3dhttps://m-ynewblog.blogspot.com/\x26vt\x3d-3989465016614688571",
    where: document.getElementById("navbar-iframe-container"),
    id: "navbar-iframe"
    });
    }
    });

    (function() (
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//pagead2.googlesyndication.com/pagead/js/google_top_exp.js";
    var head = document.getElementsByTagName("head");
    if (head) (
    head.appendChild(script);
    }})();



    Зараз Навбар у блозі не дає зовнішніх посилань, що індексуються, але я вважаю, що це зайвий елемент, який не несе в собі функціональне навантаження, і його краще видалити.
  • Видаліть зовнішні посиланнязображення. При завантаженні зображень на повідомлення блогу, в них автоматично вбудовується посилання. Щоб усунути такі посилання, необхідно відредагувати всі записи блогу. У режимі "Перегляд" і далі на іконку "Посилання". Якщо зображення не несе в собі зовнішнє посилання, то при натисканні на фото в редакторі запису іконка "Посилання" не активна (немає підсвічування іконки).

  • Видалити посилання на профіль автора блогу. Видалити автор блогу під записом. Для цього знайдіть код true та замість true пропишіть false. Вийде false
  • Закрити посилання віджету “ ” від індексування тегом nofollow. Якщо ви використовуєте у своєму блозі віджет "профіль", то знайдіть через швидкий пошукза віджети в шаблоні блогу код гаджета Profile1. Потрібно відредагувати код віджету, замінивши у двох місцях rel='author' на і додати до двох посилань . У вас має вийти, як на скріншоті:


    Зроблено на прикладі редагування профілю Google Plus. Нагадую, що Google Plusбуде ліквідовано 2 квітня 2019 року. Відповідно після цієї дати потрібно буде робити інші зміни в коді віджету "Про мене".

  • Перевіряємо на наявність зовнішніх посилань будь-яку сторінку запису Blogspot, до якої залишено коментарі. Знайдіть та видаліть у шаблоні блогу код:

    У Налаштуваннях блогу на шляху Налаштування блогу -> Інше -> Фід сайту -> Дозволяємо фід блогу застосовуємо наступні налаштування:

  • Видалити зовнішні посилання з нового стандартного шаблону Blogger На прикладі теми Notable
  • Видаляємо Attribution (посилання внизу – Технології Blogger)
    Знаходимо в шаблоні блогу з пошуку віджетів (список віджетів) Attribution1 і видаляємо код разом з секцією за аналогією зі старим шаблоном Blogger (дивися вище 1).
  • Видаляємо посилання з віджету «Повідомити про порушення». Це віджет ReportAbuse1. Знаходимо в пошуку по віджетам:
    Код виглядає цілком так:




  • Перевіряємо сторінку запису блогу з коментарями та видаляємо посилання за аналогією зі старими шаблонами блогу (див. вище – пункт 8).
  • Вгамуємо посилання з постів блогу, які вшиті в картинки записів (див. пункт 5).
  • Згодом у веб-майстрів-початківців виникає закономірне питання, як змінити колір, стилістику написання заголовків, додати обсяг і зробити шрифт тих же заголовків побільше. Багатьох новачків це вводить у ступор, бо незрозуміло, що й де шукати.

    Звичайно, можна зайнятися глибоким вивченням усіх цих тонкощів сайтобудування, але поки що на горизонті перспектив, як таких не спостерігається, стає ще одне закономірне питання, а воно вам потрібне?

    На освоєння азів веб-мастерингу у вас піде пристойний час. А час — це гроші. Тому якщо ви потребуєте незначного коригування деяких елементів шаблону і не знаєте, як знайти потрібний код HTML незалежно від платформи сайту, ця стаття саме для вас.

    HTML та CSS - взаємозв'язок

    Насправді тема повинна називатися якось на кшталт: «Як правити код CSS». Ну та гаразд почнемо ми з HTML, а закінчимо CSS. Справа в тому, що при необхідності зміни кольору, шрифту сайту, хлібні крихти призводять до файлів СSS.

    Давайте спершу визначимося з цими двома поняттями:

    - Код HTML є основою, де створюється сайт. Саме завдяки ньому браузер розуміє, які елементи та в якому порядку виводити на ту чи іншу сторінку.

    - Код CSS є мовою програмування, що відповідає за зовнішній вигляд веб-сторінок. Саме цей код повинен піддаватися редагуванню при необхідності зміни зовнішнього вигляду сайту.

    Стає очевидним, що й потрібно змінити, наприклад, колір заголовка у статті чи пунктах меню, то правку потребує одне із файлів CSS. Саме це потрібно усвідомити на початковому етапі внесення змін самостійно.

    Де знаходиться html код сторінки

    Не приховуватиму, що на початку мого ознайомлення з принципами сайтобудування, я був не те, що чайником, я був справжнім іржавим самоваром. Тому у вас, як і у мене, все обов'язково вийде.

    І так, повертаючись до теми зміни коду сторінки, необхідно спочатку подивитися html код. Я розповім на прикладі браузера Opera, тому що працюю в основному в ньому. Поспішаю повідомити, що якщо ви вважаєте за краще користуватися іншим браузером, не варто відразу ж закривати цю сторінку, оскільки принцип перевірки незалежно від браузера практично ідентичний.

    Як змінити стиль заголовка

    В одній із попередніх статей я розповів, «Як прибрати посилання із заголовка Joomla», а сьогодні ви дізнаєтеся, як всю цю справу підправити та зробити більш привабливою.
    Допустимо нам потрібно змінити колір та розмір заголовка статті. Для цього натискаємо по ньому лівою кнопкою мишки і у вікні вибираємо «Подивитися код елемента». Після чого в лівій частині екрану нашій увазі з'являться фантастичні ієрогліфи, за допомогою яких ми і визначимо, де собака закопаний. У такий спосіб можна подивитися і підправити практично кожен елемент шаблону.

    У його верхній частині я виділив HTML код, який відповідає за виведення заголовка h1. За умовчанням під час перевірки він підсвічується сірий фон. Ну та гаразд, це так для загальної інформації. Нам потрібно звернути увагу в нижню частину скріншота, де розташовані скрипти, відповідальні за виведення CSS стилів. Хочу відразу ж попередити, що в залежності від шаблону назва CSS файлуможе відрізнятися, але зазвичай це style.css або template.css.

    І так з файлом ми визначилися, але як дізнатися, де він знаходиться? Елементарно просто, потрібно навести курсор мишки на розташоване з правої сторонислово style.css, після чого біля нього відобразиться шлях знаходження файлу. Водночас тут же буде вказано й рядок, який нам потрібно підправити. Як видно на картинці, це перший рядок.

    Важливий момент! Перед тим як вносити зміни зробіть резервну копію сайту, так би мовити на будь-який пожежник

    Деякі властивості CSS

    Нижче наведу деякі властивості, за допомогою яких можна внести певні змінита поекспериментувати зі стилями.

    Font-size – зміна розміру тексту.

    Text-decoration – залежно від команди сюди відноситься закреслення та підкреслення тексту та виділення лініями.

    Font-family – сімейство шрифтів.

    Font-weight – виділення.

    Color – колір тексту.

    Якщо після коригування нічого не змінилося, очистіть кеш браузера. Як бачите, щоб змінити зовнішній виглядзаголовків і освіжити дизайн сайту лише знадобиться підправити css код, а не змінити код html.

    Дякуємо за увагу і до швидкого на сторінках Stimylrosta.

    Виявили у тексті граматичну помилку? Будь ласка, повідомте про це адміністратору: виділіть текст та натисніть сполучення гарячих клавіш Ctrl+Enter

    Ми випустили нову книгу«Контент-маркетинг у соціальних мережах: Як засісти в голову передплатників і закохати їх у свій бренд»

    Підписатися

    Вихідний код сайту – це сукупність HTML-розмітки, CSS стилів та скриптів JavaScript, які браузер отримує від веб-сервера.

    Більше відео на нашому каналі - вивчайте інтернет-маркетинг із SEMANTICA

    Його можна порівняти із набором команд, які дає солдатам командир. Уявіть, що глядачі не бачать та не чують начальника. З їхньої точки зору військові самостійно виконують дії. У нашому випадку командир – це браузер, команди – це вихідний код, а солдати, що марширують, – це кінцевий результат.

    Зберігається сайт на веб-сервері, який надсилає сторінку на запит користувача. Запит – це введення URL у рядку адреси, клацання посилання або натискання на кнопку відправки даних у формі. Не важливо, якою мовою написані веб-сторінки, чи включають вони програмну частину. Кінцевим результатом роботи будь-якого серверного алгоритму є набір html-тегів та тексту.
    Вихідний код сторінки – це набір даних, що включає:

    • html-розмітку;
    • стильову таблицю або посилання на файл;
    • програми, написані JavaScript або посилання на файли з кодом.

    Ці три розділи обробляються браузером. Для сервера це просто текст, який потрібно надіслати у відповідь на запит.

    Навіщо нам знадобиться вивчати вихідний код

    Все, що ми побачимо, ми зможемо проаналізувати та застосувати для вирішення тих чи інших завдань, які виникають у ході роботи з сайтом, особливо під час його оптимізації. Переглянувши вихідний код, ми можемо:

    • Побачити мета-теги свого чи чужого сайту для їхнього аналізу.
    • Побачити наявність або відсутність деяких елементів на сайті: лічильників, кодів ідентифікації в різних системах, певних скриптів та іншого.
    • Дізнатися про параметри елементів: розміри, кольори, шрифти.
    • Знайти шлях до фотографій та інших елементів на сторінці.
    • Вивчити посилання на сторінці.
    • Знайти проблеми з кодом, що заважають у процесі оптимізації сайту: невинесені в окремі файлистиль, скрипти, невалідний код.

    Це основні можливості, але насправді, вміючи читати код, ви зможете дізнатися про сторінку набагато більше.

    Як подивитися вихідний код сайту

    Цілком у тому вигляді, в якому він викладений на сервері, з браузера це зробити не вдасться. А ось побачити всю розмітку можна, натиснувши на сторінці праву кнопку миші. Тут і далі на прикладі Google Chrome.

    Вибираємо опцію «Перегляд коду сторінки» та отримуємо повний лістинг в окремій вкладці.

    Це просто текст, який доведеться аналізувати, щоб зрозуміти. А ось отримати інтерактивний код можна за допомогою інструментів розробника.

    Як знайти вихідний код сторінки сайту

    Натискаємо на піктограму меню у браузері. Найчастіше він знаходиться праворуч і має вигляд трьох точок або смужок.

    В розділі додаткових інструментіввибираємо "Інструменти розробника".

    Відкриється вікно, де відображається активний стан коду. Це означає, що при натисканні миші на розмітці поруч з'явиться стиль елемента, а на сторінці підсвічуватимуться вибрані блоки.

    У вкладці "Source" можна переглянути вміст деяких файлів: скрипти, шрифти, зображення.

    У вкладці Security доступна перевірка сертифіката сайту.

    Вкладка Audits допоможе провести перевірку викладеного на хостинг ресурсу.

    Якщо розташування панелі справа незручно, можна натиснути три точки та змінити його, вибравши бажаний пункт.

    Як подивитися мета-теги

    Кожен html-документ включає теги структури. Ось деякі з них:

  • Html – весь документ.
  • Head – розділ службових заголовків.
  • Title – заголовок сторінки (відображається на вкладці).
  • Body – тіло документа.
  • H1-H6 – заголовки тексту сторінки.
  • Article – стаття.
  • Section – розділ.
  • Menu – меню.
  • Div – блок.
  • Span – рядок.
  • P – абзац.
  • Table – таблиця.
  • Елементи призначені для логічного розмежування розділів на сторінці, за необхідності вони оформлюються за допомогою стилів. У них розміщується текст, який так чи інакше видно на сторінці. Але в тезі Headє службова інформація. Для її вказівки є мета-теги. Все що в них записано, призначене для сервера та пошукових систем.

    Їхній вміст іншим способом дізнатися неможливо.

    Звернімо увагу на тег Link. З його допомогою вказуються посилання на зовнішні файли, що підключаються. При бажанні можна побачити вміст та зберегти на диск. Для цього наведіть вказівник на адресу та натисніть ПКМ. Виберіть Open in new Tab.

    У новій вкладці відкриється вказаний файл, який можна переглянути чи зберегти.

    Як подивитися вихідний код сторінки для налагодження скрипту

    У цьому випадку найзручніше відкривати сторінку на локальній машині. Якщо потрібно лише виправити розмітку, стилі та скрипти, то це можна робити прямо з папки. Html-код проглядається так само. А ось помилки коду JavaScriptможна побачити у вкладці "Console". Тут показує опис помилки та номер рядка, в якому вона виникла.

    Синтаксичну можна побачити безпосередньо у коді. Для цього призначено вкладку "Source".

    Як подивитися код конкретного елемента

    Для великих сторінокз великою кількістюелементів складно знайти потрібний коду всій розмітці. У такому разі слід скористатися спеціальною командоюконтекстне меню. Наведемо мишу на фрагмент та натиснемо ПКМ. Виберемо команду "Переглянути код".

    Відкриється те саме вікно, але з фокусуванням на вибраному об'єкті.

    Резюме

    Ми розповіли, що таке вихідний код сторінки. Достатньо освоїти елементарні знання HTML та CSS, та користуючись зручними інструментамирозробника, ви зможете проводити налагодження власних html-документів.

    Перегляд коду ресурсів в інтернеті дозволить вам навчатися не лише на власний досвід, а й використовувати реальні робочі приклади. А для seo-фахівців будуть корисні мета-теги, інформація в яких може сказати про сайт багато.

    Ctrl + U Як переглянути вихідний код елемента?

    Натисніть праву кнопку миші на елементі сторінки.

    Google Chrome: “Перегляд коду елемента”

    Opera: "Проінспектувати елемент"

    FireFox : "Аналізувати елемент"

    В інших браузерах шукайте подібний до змісту пункт меню.

    Всім привіт!

    Спеціально на початку статті виклав всю суть, для тих, хто шукає швидку відповідь.

    Інформація може бути багатьом відома, але оскільки пишу для блоггерів-початківців, веб-програмістів та інших старателів, то ця довідкова стаття обов'язково повинна бути присутня.

    У майбутньому ви обов'язково вивчатимете вихідний код сторінок та окремих елементів.

    Давайте подивимося на конкретному прикладіяк можна переглянути вихідний код сторінки.

    Наприклад, ми хочемо подивитись які ключові слова(keywords) використовуються для конкретної сторінки. Заходимо на веб-сторінку, що нас цікавить, і натискаємо Ctrl+U . В окремому вікні або окремій закладці відкриється вихідний код цієї сторінки. Натискаємо Ctrl+F для пошуку фрагмента коду. У даному випадкудрукуємо у вікні пошуку слово “ keywords”.Вас автоматично перекине на фрагмент коду з цим мета-тегом та виділить шукане слово.

    За аналогією можна шукати та вивчати інші фрагменти коду.

    Перегляд всього вихідного коду сторінки в більшості випадків не дуже зручний, тому у всіх браузерах є можливість переглянути код окремого елементачи фрагмента.

    Давайте застосуємо на конкретному прикладі перегляд коду елемента. Наприклад, подивимося чи є у посилання атрибут nofollow. Натискаємо правою кнопкоюмиші на посиланні, що нас цікавить, і у випадаючому контекстному менюлівою кнопкою клацаємо по пункту "Перегляд коду елемента" або подібному (залежно від вашого браузера). Внизу у спеціальному вікні для аналізу коду отримуємо щось подібне.

    Ми бачимо, що у коді посилання є rel=”nofollow” . Це означає, що за цим посиланням не витікатиме і PR. Про це детальніше поговоримо у наступних статтях. Зараз важливо те, що ви тепер знаєте як подивитися вихідний код сторінки і вихідний код окремого елемента.

    Розмір, колір деяких важливих елементівблогу - таких, як заголовок блогу або посту, тег moreі тому подібне. Потрібний код шукав вручну, експериментуючи із тестовим доменом, на основі чого пізніше писалася стаття.

    І ось нещодавно знадобилося змінити колір посилань. Перелопатив купу літератури з цього питання, зрозумів просту річ: всі наводять приклади з власних шаблонівАле шаблони-то у нас у всіх різні і добре, якщо код з прикладу хоч трохи схожий: не ниттям, то катанням все одно знайду - методом тику.

    Із кодом посилання номер не пройшов. Усі вказували різні шляхи. Задумався, чи немає простого та точного інструменту, як знайти потрібний код html на будь-якому сайті. Багато блогерів навіть з досвідом зазнають труднощів у незначному доопрацюванні шаблону. У цьому немає нічого страшного, адже у кожного свої інтереси та цілі створення сайту.

    Якщо ви хочете внести невеликі зміни до шаблону, наприклад, змінити будь-який заголовок, назву статей і рубрик, колір і розмір шрифтів і посилань, зазвичай цілком достатньо навчитися простому принципу, який розглянуто у цій статті. Але бувають і складні випадки, які вимагають чи глибшого вивчення htmlта css, або допомоги спеціаліста.

    Якось звернувся знайомий із проханням знайти, де змінити колір панелі рубрик у його шаблоні. Закачав тему на тестовий піддомен. Налаштування цього елемента зберігалися не в style.css, а в іншому файлі, тому людина не могла знайти.

    Як знайти та змінити html та css код сайту

    Якщо не любите довгі статті, для вас наприкінці статті відеоурок, в якому розповідається, як можна побачити код html сайту з допомогою Notepad++ та внести зміни до дизайну будь-якого шаблону на прикладі, як змінити колір шрифту. У відео знайдуться й інші тонкощі поводження з блогом. А для тих, кому ближче і зрозуміліше текст, унизу докладний розбіртеми зі скріншотами.
    httpv://youtu.be/uIlVvwCt2ho

    Терміни та поняття

    Було б точніше називати статтю «Як знайти код cssАле я вирішив зупинитися на «неправильній» назві, тому що в основному відповідь на це питання шукають у html. CSS і HTML – дуже різні речі, хоч і є двома частинами однієї системи. В інтернеті багато технічних статей, нам тут достатньо буде зрозуміти, що:

    • HTML - відповідає за структуру сайту (що за чим слідує, в якому порядку і т. д.). Це основа, на якій створено сайт. Якщо порівняти з будинком, то це його планування, розташування кімнат.
    • CSS - відповідає за дизайн (які шрифти, розміри, кольори тощо). Це загальний стиль будинку та стиль його окремих кімнат: які шпалери будуть, світильники, фіранки, меблі. Тому документ, в якому прописуються коди CSS, називається «таблиця стилів»

    І якщо ви запитали, як змінити, наприклад, колір заголовка сайту, розмір шрифту в текстах або колір заголовків у сайдбарі, то шукати все це потрібно в таблиці стилів CSS. Ось це єдине, що варто зрозуміти для початку, щоб вносити зміни до коду самостійно.

    Мені подобається перетворювати складне на просте. Пам'ятаю, давно, коли в мене була перша машина, дуже стара, проводка гнила, часто перегорали запобіжники, і я тягнув її щоразу на СТО на буксирі. Уявіть, скільки грошей було викинуто, при тому що самостійна замінаЯк виявилося, коштує копійки.

    Якось я подивився, що саме робить майстер. Досі не знаю, як влаштований запобіжник. Але знаю, де його міняти). Мотор я лагодити сам би не став, а запобіжник замінити не складно. Так само і із сайтами.

    Якщо ви не хочете стати програмістом, то немає потреби глибоко розумітися на програмінгу. Досить ясно розуміти, що навіщо призначено, де шукати і як змінити. Те, що можна, краще змінити самим, а решту залишити фахівцям. У статті є корисне посиланняна цю тему.

    Чи потрібно бути фахівцем у всьому

    У seo-блогах часто ведуться дискусії, чи потрібно новачкові глибоко розбиратися в html, а ще краще – навчитися самим писати сайти, щоб було все унікальне. Ну, не знаю – кожному своє і тут вже кому що ближче. Мені цікаво трохи більше, тому я зараз додатково навчаюсь у Володимира. У листопаді цього року Володимир відкрив свій авторський блог. Його блог зроблений на найпростішому, безкоштовний шаблон, він його лише трохи змінив під себе.

    Через 10 днів існування блог зайняв 104 місце в рейтингу всіх сайтів Рунету з відвідуваністю близько 1,5 тисяч осіб на добу. За десять днів. Так у чому ж справа? Володимир чудово розбирається в html, може замовити та купити собі унікальний шаблон. Ось і ви повинні зрозуміти, що секрет криється не в шаблонах, а в корисності інформації.

    Де ховається код html

    Вибачте за відступ, повернемося до наших кодів). Допустимо, ви хочете змінити колір шрифту заголовка блогу. Розглянемо на прикладі мого тестового сайту.

  • Відкриваємо сайт у браузері Google Chrome(якщо ще не користуєтеся ним, встановіть - він добре заточений для роботи з сайтами, багато вбудованих інструментів).
  • Наводимо курсор мишки на елемент, який маємо намір змінити. В даному випадку – на назву блогу. Клацаємо по ньому «правою» мишкою і у вікні, що з'явилося, вибираємо ПЕРЕГЛЯД КОДУ ЕЛЕМЕНТА.
  • ВАЖЛИВО: не переплутайте з ПРОГЛЯДОМ КОДУ СТОРІНКИ! Вся сторінка нам нині не потрібна, лише окремий елемент.

    Клацаємо по ньому - у нижній частині браузера з'являється вікно перегляду коду:

    Червоним виділено рядок коду, який ми змінюємо.

    А ось в області, виділеній синім, міститься те, що ми шукаємо. Саме тут ви можете знайти точну (а не приблизну) строчку коду, що відповідає за шрифти, колір, розмір, виділення та інше. Таким чином ви можете дізнатися БУДЬ-ЯКИЙ код будь-якого елемента будь-якого шаблону.

    Знаходимо потрібний рядок у блоці, виділеним синім. Праворуч там є повзунок, можна перегорнути і знайти потрібний рядок.

    Загальний принцип, де що шукається:

    Назва шрифту - у рядку FONT FAMILY

    Розмір шрифту - у рядку FONT SIZE

    Колір шрифту — у рядку COLOR

    Ось три основні рядки, в яких змінюється назва, розмір та колір шрифту будь-якого елемента. Праворуч у рядку style cssдається позиція рядка у документі. Якщо вам потрібно змінити якийсь інший елемент (наприклад, потрібно дізнатися, де знаходиться рядок. в якій можна змінити колір панелі меню або колір посилань), все робиться так само.

    УВАГА:

    червоним на малюнку виділено рядок, який ми копіюватимемо,

    щоб потім знайти її у таблиці стилів.

    4. Копіюємо рядок. Оскільки в цьому прикладі ми хочемо змінити колір назви сайту, то копіюю сходинку, в другій картинці виділену червоним прямокутником. У моєму шаблоні вона відповідає за зміну кольору назви сайту:

    #header h1 a, #header h1 a:visited (

    Знаходимо необхідну строчку у файлі «таблиця стилів (style.css)». Це робиться вже в адмінці. Наполегливо прошу, поки немає впевненості та повного розуміння, всі експерименти проводити на тестовому піддоміні, щоби виключити .

    Отже, заходимо до адмінпанелі: КОНСОЛЬ — ЗОВНІШНІЙ ВИГЛЯД — РЕДАКТОР. У правому сайдбарі знаходимо файл ТАБЛИЦЯ СТИЛІВ (STYLE.CSS), відкриваємо його.

    Тепер відкриваємо рядок пошуку клавішами CTRL+ F: у верхньому вікні з'явиться порожній рядок-віконце. Вставляємо в нього рядок, який скопіювали в пункті 4.

    І ви побачите, як у таблиці стилів цей рядок виділиться (на малюнку — помаранчевим кольором):

    Вносимо зміну елемент. У нашому випадку ми змінюємо колір шрифту, тому в рядку COLOR підставляємо інше значення того кольору, який хочемо. У прикладі чорний колір, його значення:

    Вибрати колір можна в будь-якому сервісі палітр веб-квітів: наберіть у пошуковій системі «Палітра веб-квітів» і підберіть той, що хочете. Вибираємо колір, копіюємо його цифрове значенняі акуратно підставляємо замість старого. після чого натискаємо ОБНОВИТИ ФАЙЛ і переходимо дивитися, що вийшло.

    Якщо зміни не відобразилися, за минулу годину і знову зайдіть на сторінку, цього разу все має відобразитися.

    Описується це довго, але на практиці все робиться швидко, особливо коли з'являється початкова навичка.

    Докладніше, як змінити ті чи інші елементи:

    На сьогодні все, більше не мучитиму вас кодами. Сподіваюся, що тепер ви самі зможете легко знаходити та міняти будь-який елемент коду html, або, вірніше, код css — нехай пробачать мені фахівці за спрощення. А якщо не розберетеся, відвідайте все-таки сторінку. Не витрачайте час на нісенітницю.

    Пропоную подивитися відео Артема Абрамовича, як шукати та знаходити в будь-якій темі/шаблоні, для будь-якого движка (wordpress, joomla і т.п.) будь-яке слово або елемент і замінити на те, що вам потрібно:

    Поділіться будь ласка, якщо сподобалося:

    Можливо вам буде цікаво ще дізнатися: