Добавляем CSS стили и JavaScript (скрипты) в тему Блогспот
Знакомая история. Подобрал ты идеальный шаблон для своего Blogger. Чистенький вроде все на месте. Но вот эта ядовито-зеленая ссылка в меню... она просто сводит с ума. Или хочется чтобы надписи были не скучным Times New Roman, а каким-нибудь эдаким, с завитушками. Или увидел у кого-то крутую кнопку 👆Наверх, которая плавно появляется и жить без нее не можешь. И вот ты сидишь перед монитором, смотришь на эту стену кода и думаешь: "И куда тыкать?".
Спокойно. Тыкаем но осмысленно. Понимаешь любой веб-ресурс и твой блог на Blogspot не исключение, это как бы дом. У него каркас и стены - это HTML структура. Обои цветные краски мебель - это CSS, вся красота. А есть электрика бытовая техника, которая что-то делает - это скрипты, JavaScript. Они добавляют движухи. Чтобы изменить цвет стен, тебе не стоит ломать стену, тебе надо просто взять другую краску. Вот этим мы и займемся.
Что ты должен прежде чем менять что-то в шаблоне Блогспот? Это создать резервную копию твоего Блогспот. Зайди в (Тема), щёлкни на стрелочку рядом с кнопкой (Настроить) и выбери (Сохранить резервную копию). Спрячь этот файлик в самую надежную папку. Поверь моему горькому опыту, который стоил мне нескольких бессонных ночей и пучка седых волос. Одно неверное движение, одна стертая скобочка и твоя красивая тема Блогспот превращается в белую страницу с набором черных букв. Всегда 🙏. Делай 👍. Бэкап. Сделал 💪? Погнали.
Наводим красоту добавляем и меняем CSS
Вся магия дизайна живет именно в CSS. Это каскадные таблицы стилей, если по-умному. А по-простому это набор правил, который говорит браузеру: "Эй, все рубрики сделай синими и размером 24 пикселя. А все ссылки при наведении подчеркивай пунктиром". Твоя задача либо прописать новое CSS правило, либо отыскать старое и переписать его под себя.
Место где прописаны CSS в Блогспот спрятано хитро. Иди в Тема ▶ Изменить HTML.
Перед тобой откроется тот самый шаблона Blogspot. Не пугайся. Нажми Ctrl+F (или Cmd+F на Маке) и вбей в поиск <b:skin. Ты должен обнаружить такую конструкцию:
Вот это ...много-много строчек... то самое сердце дизайна твоего шаблона. Именно сюда, внутрь этой конструкции <![CDATA[ ... ]]>, напиши свои CSS стили. В самый конец прямо перед закрывающим ]]>.
Ты, во-первых, не затронешь то что есть. А во-вторых, твои правила применятся последними а значит имеют больший вес и смогут переопределить стандартные CSS шаблона.
Давай на примере. Бесят нас заголовки статей. Они скучные черные. Мы хотим огненно-рыжие. Как понять какой именно элемент нам нужен?
Открываешь свой web-ресурс в браузере. Наводишь мышку на заголовок, жмешь правую кнопку и выбираешь (Просмотреть код). Сбоку или снизу откроется панель разработчика. Не бойся это наш друг.
Там будет подсвечена строчка с тегом что-то вроде <h2>...</h2>. Вот это .post-body h2 - это наш пациент. Это его CSS-селектор.
Возвращаемся в редактор то самое место перед ]]>. И с новой строки пишем свое правило:
Что мы написали? Мы сказали: "Найди все h2 с классом post-body и покрась их текст в #FF4500 (огненно-рыжий)". А что за !important? Ну... это такой ядерный аргумент. Иногда в шаблоне уже есть десять правил для этого заголовка, и твое новое правило просто игнорируется. !important говорит браузеру: "Мне плевать на всех, делай, как я сказал!". Злоупотреблять им не стоит это как кричать на всех в комнате но для новичка чтобы точно увидеть результат самое то. Написал? Кликни на иконку дискеты Сохранить в правом верхнем углу и иди смотри что получилось. Заголовки должны стать рыжими. Получилось? Мои поздравления ты только что стал немножечко веб-мастером.
#FF4500 это шестнадцатеричный код цвета. Запоминать их не стоит, просто гуглишь (палитра цветов) и выбираешь любой какой душе угоден. Копируешь с решеткой и добавляешь к себе. Хотя я позаботился о тебе и собрал готовые палитры жмакай переходи и пользуйся.
Как добавить инлайновые CSS стили в статье?
Когда лезть в b:skin не хочется. Требуется сменить что-то разово вот только в этой конкретной статье. Тогда можно использовать инлайновые стили. Это когда CSS стиль прописывается прямо внутри тега. В редакторе поста переключись из (Режима верстки) в (HTML) и найди нужный элемент.
Предположим хочешь сделать один блок с синим фоном. Ищешь его тег <div> и дописываешь ему атрибут style.
Это быстро, это просто, но это порочная практика для глобальных изменений. Ты оформил сто абзацев, а потом решил сменить оттенок синего. Тебе придется пройтись по всем ста сообщениям и поменять его вручную. А если бы ты задал правило через b:skin для специального класса, то поменял бы в одном месте, и он изменился бы везде. Вывод инлайн-стили только для экстренных, единичных случаев.
Добавляем жизни, внедряем скрипты в шаблон Blogger. Четыри основных способа.
С CSS стилями разобрались сайт похорошел. Естественно хочется функционала. Ту самую кнопку 👆Наверх, красивую галерею картинок которая появляться во всплывающем окне или информационную секцию с погодой. Все это работа скриптов, чаще всего на языке JavaScript.
Второе золотое правило вебмастера никогда, слышишь никогда не вставляй в своё творение скрипт из непонятных, сомнительных источников. Скрипт имеет доступ к твоей странице. Хорошо если он просто замедлит твой проект или покажет навязчивую рекламу. В худшем будет воровать пароли твоих читателей, которые оставляют комментарии или перенаправлять их на фишинговые сайты. Бери скрипты только с известных проверенных ресурсов (официальных соцсетей популярных библиотек вроде jQuery или скрипты с крупных авторитетных сайтов для разработчиков).
Куда вставлять эту магию? Первый вариант перед закрывающим тегом </body>.
Самое правильное и предпочтительное место для большинства скриптов это самый низ страницы, прямо перед тегом </body>.
Почему? Страница в браузере грузится сверху вниз. Сначала загружается вся структура, тексты и картинки применяются CSS стили. Пользователь видит материал, приступает его читать. И только потом в самом конце начинает загружаться и выполняться скрипт. Если же ты засунешь тяжелый скрипт в начало страницы то браузер сначала будет пытаться его загрузить и обработать и только потом покажет страницу. В итоге пользователь будет сидеть и смотреть на белый экран психовать и уходить.
Искать этот тег в шаблоне Блогспот просто: Ctrl+F и вбиваешь </body>. Нашел? Вот прямо перед ним и вставляй свой скрипт. Обычно он выглядит как-то так:
Или это подключение внешнего файла:
Оба варианта вставляются туда же перед </body>. Сохраняешь и проверяешь.
Важные скрипты или второй способ перед закрывающим тегом </head>.
Но бывают исключения. Некоторые скрипты требуют чтобы их разместили в (голове) сайта до основного содержания. Это какие-то аналитические скрипты или скрипты которые должны что-то изменить на странице еще до того как ее увидит пользователь. В этом случае автор скрипта всегда пишет в инструкции: (Вставьте этот Скрипт в шапку сайта).
Тогда ты ищешь тег </head> и добавляешь Script перед ним.
Третий метод добавление скрипта с помощью гаджет.
Третий самый простой и безопасный для новичка способ. Если тебе надо вставить какой-то обособленный скрипт. Группы ВКонтакте или рекламный баннер. Для этого не нужно лезть в шаблон. Идешь в раздел (Дизайн). Там ты видишь структурные модули своего шаблона шапка, боковая колонка, подвал (футер). Нажимаешь (Добавить гаджет) в нужном месте и выбираешь из списка (HTML/JavaScript).
В открывшееся окно помести свой скрипт даешь ему название (или оставляешь пустым) и сохраняешь. Всё. Виджет появится там куда ты его добавил. Просто безопасно и сломать что-то почти невозможно. Минус в том что таким способом можно вставить только то что видно в конкретном месте а не какой-то общий функциональный скрипт для всего сайта.
Ты теперь знаешь как изменить CSS и как вставить скрипт. Ты получил базовый контроль над своим ресурсом он ограничен только твоей фантазией и чувством меры. Но помни с большой силой приходит и большая ответственность... за то чтобы не превратить свой уютный web-ресурс в медленный мигающий всеми красками радуги новогодний балаган. А где проходит та тонкая грань за которой улучшение внезапно превращается во вредительство?
Четвёртый метод. Высший пилотаж интерактив прямо в статье
Ладно, виджеты в сайдбаре и общие скрипты для всего сайта это мы освоили. Это база. Что если тебе нужно поместить какой-то интерактивный элемент не сбоку не в подвале а прямо в тело статьи? Ты пишешь статью про расчет калорий и хочешь чтобы читатель тут же не уходя со страницы ввёл свой вес, рост и получить результат. Или делаешь обзор финансовых инструментов и хочешь дать людям простенький калькулятор для расчета сложных процентов.
Это абсолютно реально и для этого не требуются знания программиста. Делается это прямо в посте.
Когда ты пишешь статью ты обычно работаешь в (Режим верстки). Но если нажать на иконку карандаша в левом верхнем углу панели инструментов, можно переключиться в (HTML). Это наш портал в мир безграничных возможностей. Ты видишь не красивый текст а те самые теги из которого состоит твоя статья. И прямо сюда между абзацами можно вставить самодостаточный блок состоящий из тегов разметки CSS-стилей и JavaScript.
Просто скрипт вставляешь в HTML-режиме своего поста а потом переключаешься обратно в обычный. Ты не увидишь там работу самого скрипта, а только какую-то заглушку или пустое место. Не пугайся. Сохрани черновик и клацни (Просмотр). Вуаля прямо посреди твоего поста теперь работающий интерактивный скрипт.
Опубликовано:
Обновлено:
Обновлено: