Ця свіжа стаття написана, щоб висвітлити актуальну інформаціюпро видалення зайвих посилань із шаблонів Blogspot, а також з нових тем Blogger. Як ви знаєте, у кодах Blogger у 2018 році відбулися зміни, тому багато дій з кодом потрібно робити за новим. Плюс з'явилися нові теми, сформовані інакше. У зв'язку з цими змінами розберемо тему видалення посилань.
Перевірити свій блог на наявність зовнішніх посилань ви можете на сервісах https://pr-cy.ru/link_extractor/ та https://seolik.ru/links. Не забувайте, що потрібно перевіряти не тільки головну сторінку блогу, але й сторінку записів (постів) і сторінки (Page). Велика кількістьзовнішніх посилань, відкритих для індексації, перешкоджають .
Такі шаблони дають найбільше зовнішніх посилань. У моєму тестовому блозі під час встановлення простої теми під час перевірки виявилося 25 зовнішніх посилань на головній сторінці, їх індексувалися 14.
Нагадую, що перед тим, як змінювати код шаблону, зробіть резервну копію!
А так повний код:
Зберігаємо зміни та перевіряємо блог на наявність Атрибуції.
Ось неповний перелік посилань, які зашифровані в іконках гайкового ключа (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
Всі ці посилання легко позбутися. Знайдіть у шаблоні блогу тег. Він зустрічається стільки разів, скільки віджетів у вашому блозі. Видаліть всі входження тега.
Як видалити:
Спосіб 1 . У вкладці Дизайн відредагуйте елемент “Повідомлення блогу” та зніміть галочку у пункті “Показати “Швидке редагування””.
Спосіб 2 . знайдіть у шаблоні блогу тег та видаліть його. Збережіть зміни та перевірте свій блог на наявність іконки та посилання.
А саме:
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);
}})();
Зараз Навбар у блозі не дає зовнішніх посилань, що індексуються, але я вважаю, що це зайвий елемент, який не несе в собі функціональне навантаження, і його краще видалити.
Зроблено на прикладі редагування профілю Google Plus. Нагадую, що Google Plusбуде ліквідовано 2 квітня 2019 року. Відповідно після цієї дати потрібно буде робити інші зміни в коді віджету "Про мене".
У Налаштуваннях блогу на шляху Налаштування блогу -> Інше -> Фід сайту -> Дозволяємо фід блогу застосовуємо наступні налаштування:
Знаходимо в шаблоні блогу з пошуку віджетів (список віджетів) Attribution1 і видаляємо код разом з секцією за аналогією зі старим шаблоном Blogger (дивися вище 1).
Код виглядає цілком так:
Необхідно швидко переглянути всі зміни на самому сайті, не торкаючись файлів і коду сайту, викладеного в Інтернет. Наприклад, змінити колірну гаму будь-якого блоку, підсунути елемент, що з'їхав, і т.д.
Для цього багато вебмайстрів використовують локальні сервери Denwer або OpenServer, запускаючи повну копію сайту у себе на комп'ютері. Цей спосіб універсальний і підійде для професіоналів, за допомогою нього можна перевірити роботу різних скриптів та плагінів, поекспериментувати зі зміною дизайну та відредагувати всі файли сайту, а після тесту перенести відповідні зміни безпосередньо на сайт.
Користувачам далеким від вебмайстерня рекомендую для цих цілей використовувати браузер. Оскільки я використовую Сhrome, наведу інструкцію зі скріншотами саме з цього браузеру. За аналогією можна працювати з Opera, Яндекс.Браузером, Mozilla Firefox та іншими браузерами, принцип їх інструментів схожий.
Інструкція 1: як переглянути весь HTML код сайту у браузеріВідкриваємо необхідну веб-сторінку вашого сайту. Клацаємо правою кнопкою миші по необхідному елементу, з'явиться контекстне меню браузера з доступними командами:
Малюнок 1. Перегляд всього HTML-коду веб-сторінки в браузері Chrome
Важливо: Команди у меню, що випадає, можуть відрізнятися, наприклад, для активних елементів (посилання, картинки, відео) і неактивних (текст, фон, діви):
Рисунок 2. Меню браузера Chrome, що випадає
Тому, якщо ви не знайшли потрібної команди, просто натисніть праву кнопку миші в іншому місці або скористайтеся гарячими клавішами браузера.
Повернемося до малюнку 1, на ньому показано необхідну команду для перегляду всього HTML коду вихідної веб-сторінки, вона називається "Перегляд коду сторінки". Клацаємо по команді, відкриється нова вкладка з повним кодом вихідної веб-сторінки, великий плюс до всього перегляд доступний з підсвічуванням синтаксису:
Малюнок 3. Фрагмент коду даного сайту
Даний інструмент дуже корисний для знаходження та редагування шуканих елементів.
Альтернативні способи перегляду всього HTML-коду веб-сторінкиДля більш швидкого доступу можна використовувати інші способи виклику даного інструменту
Обидва способи є універсальними і повинні працювати у всіх браузерах.
Комусь спочатку здасться, що це зовсім не потрібний інструмент, але перегляд всього HTML коду сайту відмінно підходить для пошуку в коді необхідних елементів, це можуть бути посилання, теги, мета-теги, атрибути та інші елементи.
Поєднанням гарячих клавіш + відкриваємо вікно пошуку, у браузері Chrome воно з'являється верху праворуч:
Малюнок 3. Пошук за кодом сайту
Після того, як ви ведете запит у пошукову форму, екран переміститься до першого знайденого елемента, за допомогою стрілок можна переміщатися між ними і вибрати необхідний:
Малюнок 4. Пошук за HTML кодом сайту
Інструкція 2: як переглянути та відредагувати HTML та CSS код сайту в браузері Google ChromeТепер найважливіша частина, в якій я покажу, як можна редагувати HTML та CSS код сайту у браузері. після чого переносити зміни до браузера.
Ось такий корисний інструмент завжди доступний у вашому браузері, експериментуйте з іншими командами, які полегшать редагування сайту.
Кожен користувач інтернету має свої улюблені сайти, на яких він проводить тривалий час. І тільки лінивий не думав подивитися, як він створений і з чого складається. Відповісти на всі ці питання не вийде, тому що існує багато способів створювати сайт, але подивитися ті команди і коди, з яких він складається - це можливо і загальнодоступно кожному.
Інше питання – чи зрозуміє людина, яка не займається програмуванням щось із тих символів, які складають код. Але з прикладів, які будуть наведені нижче, будь-який користувач Google Chrome зможе подивитися окремі елементи сайтів.
Як переглянути вихідний код html-сторінки в браузері від GoogleЩо того, що б ви змогли подивитися код сторінки в Chrome необхідно зайти на сайт, що вас цікавить, і виконати наступні дії:
Два цих пункти відрізняються між собою своєю функціональністю та інформаційністю для користувача, програміста чи хакера. 
Розбираючи кожну з цих функцій, можна писати окрему статтю. Для програмістів ця різниця суттєва і вони розуміють у яких випадках необхідно використовувати "Подивитися код", а в яких "Перегляд коду сторінки" у браузері Google Chrome.
Але пояснюючи для звичайного користувача, можна розділити ці функції за такими призначеннями:
Якщо вже й відповідати на таке запитання, то напрошується лише варіант із прикладом. Тому що за одну статтю стати людиною, яка розумітиме цю тематику (веб розробником) – дуже важко, але показати на прикладі, щоб питання було вичерпане – зробити набагато легше.
Функціонал коду елемента дуже широкий, тому беремо одне із слів на сайті браузера Google Chrome. Ми побажали розглянути які ключові слова (у коді він буде прописаний як keywords) використовувалися для нашого сайту. Для цього виконуємо наступний алгоритм:
Інші способи використання цієї функції у браузері Google ChromeЗагалом, продовжуючи відповідати питанням, як подивитися код елемента і навіщо він потрібен, слід перерахувати його функції. А саме завдяки можливості подивитися код елемента будь-якого сайту в браузері Google Chrome ми можемо:
- Побачити структуру сайту починаючи від head («шапка сайту») та закінчуючи end (кінцевою командою будь-якої програми);
- Переглянути всі функції сайту, а саме: посилання на інші сайти, додаткові модулі із зовнішніх сайтів та наявність вбудованих лічильників для збору різної інформації;
- Дізнатися, чи заборонено копіювання з сайту чи ні;
- У коді буде записано всі посилання на інші сторінки сайту, а також їх оформлення та подальші дії після натискання на них.
Це далеко не кінцевий перелік. Але слід нагадати, що без спеціальних знань – читати код сторінки Google Chrome практично неможливо і отримані дані звичайному користувачу практично не потрібні.
Не працює пункт «Перегляд коду елемента»Слід одразу сказати – кожен сайт буде з відкритим доступом до кодів елементів. Тобто навіть найпопулярніші та найдорожчі сайти будуть відкриті для перегляду їхнього коду. Тому, якщо пункт у браузері Google Chrome не активний або видає помилку має такі можливі причини:
- Профіль користувача пошкоджено;
- Наявність шкідливого програмного забезпечення на комп'ютері;
- Блокування певним розширенням збільшення продуктивності (навіть таке можливо).
Щоб створити новий профіль, потрібно видалити старий з комп'ютера. Для цього виконуємо таке:
Якщо новий профіль не відкрив нам доступ до коду елемента сторінки і ми, як і раніше, бачимо помилку, слід виконати такі дії:
Якщо все правильно було зроблено, після перезавантаження комп'ютера Google Chrome відкриватиме код елементів і працездатність браузера буде в нормі.
Згодом у веб-майстрів-початківців виникає закономірне питання, як змінити колір, стилістику написання заголовків, додати обсяг і зробити шрифт тих же заголовків побільше. Багатьох новачків це вводить у ступор, бо незрозуміло, що й де шукати.
Звичайно, можна зайнятися глибоким вивченням усіх цих тонкощів сайтобудування, але поки що на горизонті перспектив, як таких не спостерігається, стає ще одне закономірне питання, а воно вам потрібне?
На освоєння азів веб-мастерингу у вас піде пристойний час. А час — це гроші. Тому якщо ви потребуєте незначного коригування деяких елементів шаблону і не знаєте, як знайти потрібний код 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
Ctrl + U Як подивитися вихідний коделемент?Натисніть праву кнопку миші на елементі сторінки.
Google Chrome: “Перегляд коду елемента”
Opera: "Проінспектувати елемент"
FireFox : "Аналізувати елемент"
В інших браузерах шукайте подібний до змісту пункт меню.
Всім привіт!
Спеціально на початку статті виклав всю суть, для тих, хто шукає швидку відповідь.
Інформація може бути багатьом відома, але оскільки пишу для блоггерів-початківців, веб-програмістів та інших старателів, то ця довідкова стаття обов'язково повинна бути присутня.
У майбутньому ви обов'язково вивчатимете вихідний код сторінок та окремих елементів.
Давайте подивимося на конкретному прикладіяк можна переглянути вихідний код сторінки.
Наприклад, ми хочемо подивитись які ключові слова(keywords) використовуються для конкретної сторінки. Заходимо на веб-сторінку, що нас цікавить, і натискаємо Ctrl+U . В окремому вікні або окремій закладці відкриється вихідний код цієї сторінки. Натискаємо Ctrl+F для пошуку фрагмента коду. У даному випадкудрукуємо у вікні пошуку слово “ keywords”.Вас автоматично перекине на фрагмент коду з цим мета-тегом та виділить шукане слово.
За аналогією можна шукати та вивчати інші фрагменти коду.
Перегляд всього вихідного коду сторінки в більшості випадків не дуже зручний, тому у всіх браузерах є можливість переглянути код окремого елементачи фрагмента.
Давайте застосуємо на конкретному прикладі перегляд коду елемента. Наприклад, подивимося чи є у посилання атрибут nofollow. Натискаємо правою кнопкоюмиші на посиланні, що нас цікавить, і у випадаючому контекстному менюлівою кнопкою клацаємо по пункту "Перегляд коду елемента" або подібному (залежно від вашого браузера). Внизу у спеціальному вікні для аналізу коду отримуємо щось подібне.
Ми бачимо, що у коді посилання є rel=”nofollow” . Це означає, що за цим посиланням не витікатиме і PR. Про це детальніше поговоримо у наступних статтях. Зараз важливо те, що ви тепер знаєте як подивитися вихідний код сторінки і вихідний код окремого елемента.
