2017-09-22

Textual description of firstImageUrl

Психология цвета в дизайне блога и рекламе

Счетчики на сайт, ставить или нет?

Приветствую. В этой статье я расскажу про дизайн блога и что такое психология цвета когда мы говорим про визуальный дизайн сайта и рекламу.

Для начала мы разберём значение цветов в психологии, а так-же посмотрим как компании и вебмастера применяют разные цвета для дизайна своих сайтов и логотипов.



Психология цвета в дизайне блога и рекламе

Практически любой цвет для человека ассоциируется с чем-то древним и физическим даже в наш современный век. Поэтому красный это в первую очередь цвет крови, огня и опасности. Не просто так красный свет при переходе через дорогу в любой стране мира означает именно опасность. В компьютерных играх враги обозначаются красным.

Психология цветов про красный такая, что это не только цвет опасности, это еще и цвет жизни. Люди любят смотреть на огонь и наличие крови означает жизнь, хотя и говорит про близость смерти. Так-же красный цвет означает войну, революцию и секс.

В древности и на протяжении истории воины надевали красные доспехи и облачения (например войны Спарты), красные мундиры были у солдат британской армии.

Красный цвет это так-же власть и величие.

С точки зрения дизайна сайта красный это практически самый яркий и заметный цвет (лучше выделяется только ядовито-зелёный и жёлтый), при этом красный не всегда вульгарен. Им можно выделять реально важные элементы интерфейса или подчёркивать что-то (наличие спойлеров в тексте, например).

Красным часто выделяют большие скидки и распродажи:

Психология цвета в дизайне и рекламе

Красный это так-же цвет праздника и подарков

Однако, далеко не всегда красным на сайтах отмечают кнопку конверсии (купить, перейти). Интересно, правда? Этот цвет предпочитают не использовать для важного действия, точнее далеко не все его используют для этого.

Если мы возьмём новый дизайн YouTube то мы видим, что на красный был сделан огромный акцент (но этот дизайн многим не понравился):

Психология цвета в дизайне и рекламе

Почти все важные элементы в ютубе сейчас имеют красный цвет

Сразу видно что бросается в глаза и что дизайнеры хотели выделить. Кнопку "подписаться", категории слева, кнопку регистрации в ютубе и логина, а так-же лого.

В данном случае красным сделаны конверсии, но имейте в виду что ютуб вам не продаёт товар, задача компании (Google, Alphabet) в том, чтобы вы были на сайте как можно дольше и смотрели много видео дабы показать вам больше рекламы. Как следствие они хотят чтобы вы подписывались на интересные вам каналы и смотрели лучшие разделы чаще.

Так-же заметьте такой момент, ютуб имеет одну цветовую гамму и выделят всё одним цветом, далее мы увидим что так делают почти все крупные компании.

Психология цвета в дизайне и рекламе

Яркий пример как старается выделится ютуб и это получается

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

Поэтому в блогах и инфо-сайтах довольно редко используют красные элементы.
..
Психология цвета в дизайне и рекламе

Красный так-же использует Coca-Cola, а главный конкурент, Pepsi - синий

Может быть вы не думали об этом, но Кола выделяется на полке любого магазина именно за счёт красного цвета бренда.



Психология цвета в дизайне и рекламе

Синий цвет означает в первую очередь небо и воду. Это нечто огромное, глубокое, спокойное и умиротворяющее. При этом там есть какая-то тайна и есть небольшой страх перед величественной глубиной.

Синий цвет в психологии это благородный цвет, впрочем, как и красный. Голубая кровь называется голубой не просто так, это значит аристократическое происхождение.

Синий редко когда означает какой-то призыв, так-же он не вызывает сильной эмоциональной реакции, в отличие от красного, жёлтого и ярко-зелёного. Синий это больше цвет спокойствия, равновесия, но при этом честности и благородства.

Психология цветов иногда проявляется и в одежде. Вспомните кто любит носить синее и скорее всего это спокойные и уверенные люди, хотя бывают и исключения.

Касательно дизайна именно синий выбрали крупнейшие социальные сети - Вконтакте и Фейсбук (первые украли у вторых).

Психология цвета в дизайне и рекламе

Фейсбус делает даже платные конверсии синим

При этом любопытно что Facebook использует и красный для уведомлений, приоритет тут, понятное дело, именно у красного.

Я думаю именно поэтому ютуб (или к примеру Альфа-Банк) выбрали красный, при перечислении логотипов и брендов эти компании выделяются.

Обратите внимание что большие компании вообще используют максимум 3 цвета, редко когда 4 (белый, серый, чёрный и один из цветов радуги). Довольно редко есть больше чем 3 цвета радуги на одном сайте, а вот в блогах у людей с плохим чувством вкуса вы постоянно будете видеть кучу цветов и сплошной цирк.

Психология цвета в дизайне и рекламе

В азбуке блогера сохраняется одна основная цветовая гамма

Все цвета близкие к синему имеют схожий смысл, при этом любопытно что смена смысла идёт в зависимости от близости к другому, таким образом идёт смешивание.

Психология цвета в дизайне и рекламе

Классическая цветовая палитра

К примеру розовый и фиолетовый являются компромиссом между красным и синим неся в себе смыслы этих двух цветов, но так-же и другие, уже свои.

Отвечая на вопрос что означают цвета в психологии я концентрируюсь именно на очень базовых вещах, не пытаясь выдумывать какие-то новые смыслы.

Всё толкование значение цвета только на основе того, с чем сталкиваются люди на протяжении многих тысячелетий - явления природы.



Психология цвета в дизайне и рекламе

Другой основной классический цвет это зелёный, но сначала небольшое отступление.

Вообще-то есть только три основных цвета, вот видите даже на картинке выше, где видно цветовую гамму, там написано red, green и blue. В компьютере вы можете выразить любой цвет через эти три цвета, остальные это производные от них.

К примеру абсолютно красный это 225 Red 0, Green, 0 Blue. А вот допустим жёлтый это если выкрутить на максимум красный и зелёный (225), при этом не подключая синий.

Так-же в компьютере любой цвет можно обозначать с помощью кода:

Психология цвета в дизайне и рекламе

http://htmlcolorcodes.com/

Код жёлтого цвета будет #FCDE00, хотя это больше поможет программистам, но иногда это можно использовать и в дизайне блога в коде HTML.

Итак, что означает зелёный цвет с точки зрения психологии цветов и дизайна сайта?

Зелёный это цвет жизни и травы в первую очередь, это цвет роста и природы. Это цвет естественности. Насчёт цвета роста довольно смешно, во многим именно из-за этого деньги везде рисуют именно зелёным.

Считается что зелёный цвет символизирует так-же юность и молодость, слышали же когда говорят "он еще зелёный" - значит молодой и неопытный.

Старое растение зелёным уже не будет.

И если тёмно-зелёный (ближе к чёрному) это в целом довольно трудный цвет с тяжёлым посылом, который по психологическому смыслу значит примерно как тёмный лес ночью (ничего хорошего), то ярко зелёный - кислотный, это цвет сумасшествия.

А так-же это цвет яда, бактерий, болезни, микробов, радиации и кислоты.

Есть довольно мало сайтов которые используют тёмно или светло-зелёный (тогда как другие оттенки синего и красного вполне приемлемы), потому что зелёный это в целом довольно унылый цвет, он расслабляет.

Психология цвета в дизайне и рекламе

Исключения - сайты про экологию, животный мир и природу

Зелёный цвет в плане агрессивности это противоположность красному, он вообще не агрессивный, а он наоборот, успокаивает. Хотя ярко зелёный убивает мозг.

В целом зелёное оформление сайтов можно посоветовать только сайтам определённых тематик: природа, экология, животные, растения и т.п.



Цвет как часть бренда


Цвет бренда (часто логотипа) является важной вещью для бренда. Если мы говорим про зелёный, то его взяли на вооружение банки.

Психология цвета в дизайне и рекламе

Тут зелёный символизирует рост, надёжность и спокойствие

Выбирая основной цвет для сайта, логотипа или дизайна помните, что ваш бренд будет ассоциироваться в том числе и с цветом.

Психология цвета в дизайне и рекламе

Тинькоф банк выбрал жёлтый - как более молодой и активный

Альфа-Банк выбрал красный.

Аналогично с мобильными операторами Билан, Мегафон и т.д. Если крупная компания "захватывает" какой-то цвет, то другим сложнее использовать тот-же цвет для своего бренда, так-как он будет ассоциироваться с более крупной компанией.

Но даже для мелких компаний или сайтов - брендов полезно выбрать какой-то цвет и сделать его основным для себя, таким образом вы создаёте дополнительную связку в мозгу у клиентов и читателей что у вас есть не только имя (бренд), но и цвет.

Касательно дизайна сайта или блога вы можете очень много куда добавлять ваш цвет и логотип, к примеру вполне любопытное решение добавлять его на все картинки (если они ваши и уникальны), если вы вспомните древний сайт "демотиватор" то именно чёрная рамка картинок была отличительным знаком бренда.

Не забывайте сделать узнаваемый и стильный favicon для сайта, в Яндексе его видно в результатах поиска, да и на вашем сайте люди будут на него смотреть.

Однако основное это цвет элементов, шапки и кнопок. Я думаю и судя по всему лучше всего делать всё это одним цветом, как видно из статьи именно так делают многие топовые компании и популярные сайты. Хотя в принципе можете пробовать сочетания нескольких основных цветов, про это читайте дальше.

Психология цвета так-же используется и в рекламе. Это легко заметить если посмотреть на баннеры разных сайтов, часто их стараются делать яркими и используют именно синий, жёлтый, красный и иногда зелёный. Однако если делать слишком ярко, то это говорит о чрезмерной навязчивости, что не вызывает доверие.

А некоторая крутая реклама как раз чёрно-белая.



Психология цвета в дизайне и рекламе

Белый и чёрный это классические цвета которые не всегда что-то означают. Для сайтов в первую очередь это цвет фона и текста, так-как они максимально далеки друг от друга по гамме, следовательно чёрный текст на белом фоне читается лучше всего.

Если мы говорим про дизайн сайта то делать какие-то кнопки и элементы интерфейса чёрным нежелательно, так делают довольно редко. Он слишком сильно будет выделятся так-как текст тоже чёрный. Так-же существуют сайты где вообще весь фон чёрный, а текст белый. Это может работать, но это крайне сложно стильно реализовать.

Помню отвратительное решение сайтов про Матрицу делать примерно вот так:

Психология цвета в дизайне и рекламе

Это еще не самый плохой вариант реализации, бывает весь текст зелёным

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

Вернёмся к цветам.

Белый это как-бы отсутствие цвета вообще с одной стороны, а с другой это все цвета сразу. Белый это очень нейтральный выбор цвета который ни о чём не говорит, во многих фильмах про будущее люди носят белые одежды что подчёркивает развитость и чистоту, при этом оно-же подчёркивает стандартизацию и порядок.

Очень похожая ситуация с чёрным цветом, но чёрный так-же является элитным цветом, однако он элитный с одной стороны, а с другой это-же цвет зла и бандитов (как и красный). Элитный он в плане что чёрный это почти всегда стильно в любой ситуации, а так-же чёрная упаковка товаров может говорить о том, что там нечто дорогое.

Оборачивать что-то дорогое и серьезное в жёлтый цвет будут редко.

Любимый цвет человека может что-то сказать о его психологии, однако если вы вебмастер или дизайнер, в первую очередь нужно отталкиваться не от ваших личных предпочтений, а от нужд вашей целевой аудитории либо заказчика. Бывают разные кейсы и разные сайты, где-то нужен один дизайн и цвет, где-то другой.



Психология цвета в дизайне и рекламе

Жёлтый и оранжевый это практически самые яркие и запоминающееся цвета, при этом они слишком яркие. Видите? Не видите? Вот я про то-же. Тут еще и так плохо видно так-как я не упоминал про другое правила подбора цветов.

Подбирайте рядом цвета максимально далеко друг друга на цветовой гамме. К примеру чёрный и белый - отлично вместе. Тот-же жёлтый не так плох если фон другой.

Например вот так жёлтый цвет куда лучше читается.

Но всё равно он слишком сильно напрягает глаза.

Желтый цвет в психологии это активность и очевидный образ - солнце и свет, но хотя оно и греет, смотреть на него напрямую опасно для глаз.

Очень мало сайтов используют жёлтый цвет, это рискованное решение. Используя жёлтый вы сразу превращается всё в клоунаду и цирк. Плюс другая проблема - жёлтый на белом фоне крайне некрасив и очень плохо читается, как я и говорил.

Хотя бывают исключения и хорошие примеры интеграции.

Психология цвета в дизайне и рекламе

Но тут жёлтый не текст, а только некоторые элементы

И заметьте как это сочетается с чёрным (преумным цветом), вполне неплохо в этом случае. Как бы говорит про активность и молодость, но и стиль + нечто серьезное.

Похожая ситуация с билайном. Так что жёлтый тоже можно использовать, но осторожно. Билайн кстати тоже жёлтый сочетает именно с чёрным.

Психология цвета в дизайне и рекламе

При этом внизу сайта у банка жёлтого уже почти нет

С эти цветом важно не переборщить. А что касается серого, то это отличный цвет на белом фоне чтобы подчеркнуть вторичные элементы. То, что нужно сказать или написать, но это имеет больше техническую важность и это не для всех.

На этом всё с основными цветами, такие очевидности как розовый это условно женский цвет и цвет любви я не рассматривал, это и так понятно. Фиолетовый цвет в психологии означает что человек эмоционально зависим от других и ищет признания, хотя так пишут на каких-то сомнительных сайтах и я так не считаю. Надеюсь вам было интересно читать про психологию цвета применительно к дизайну сайта или блога.

Так-же можете посмотреть видео от SeoPultTV о том, как использовать психологию цвета для увеличения продаж и про влияние цвета на продажи:



Автор данной статьи - Блог Econ Dude. Я пишу на разные темы (продвижение, раскрутка, игры, экономика) и о том, что мне интересно. Делаю обзоры и делюсь своим опытом. Заходите в мой блог и спасибо что прочитали эту статью.

В комментариях пишите какую цветовую гамму вы используйте на своём сайте и почему выбрали именно её, будет интересно узнать мнение других вебмастеров.
Читать далее ...
Textual description of firstImageUrl

Зарегистрировать и прикрепить бесплатный домен к Blogger

freenom - бесплатный домен
Из этой статьи вы узнаете, как прикрепить бесплатный домен второго уровня к Blogger. Домены второго уровня ценятся больше третьего. К тому же, избавившись от ненужного окончения вашего адреса вида *.blogspot.ru, вы прибавите авторитет вашему блогу в глазах посетителей, и возможно, поисковых систем (есть мнение, что поисковики больше ценят автономные домены). Ранее я уже писала про методы прикрепления собственного домена к блогу Blogger: смотри способ 1 (простой) и способ 2 (более удачный). Но эти статьи про домены платные.
Зачем же нужны бесплатные домены и какие подводные камни в их использовании?
  • Бесплатный домен можно использовать на краткосрочных проектах. Например, вы создали блог, который не планируете вести долго. Он служит вам для достижения каких-то краткосрочных задач.
  • Прикрепление бесплатного домена поможет вам определиться, хотите вы посвящать свою жизнь блогингу или нет. Например, при создании первого блога. Однако, имейте в виду, что бесплатный домен обычно дается не на всю жизнь, а имеет ограничения по срокам службы (чаще 1 год), далее придется продлять уже платно. Поэтому обязательно обращайте внимание на стоимость продления домена. В рассматриваемом примере стоимость продления домена после бесплатного тестового периода составляет ~10$. Это не так уже и дешево.
Если вы внимательно прочитали про недостатки бесплатного домена, но все равно хотите его получить, то приступим. Для регистрации домена обратимся к сервису http://www.freenom.com/
.. На главной странице сервиса Freenom.com вы увидите строку для поиска свободных доменов. Бесплатными доменами являются домены в зонах tk, ml, ga, cf, gq. Придумывайте имя домена на латинице и проверяйте его доступность. Я выбрала домен для моего тестового блога erunda.tk. домен оказался доступен. Не смотря на то, что сервис доступен на русском языке, я не рекомендую пользоваться русской версией, так как в этом варианте он работает очень плохо. Если вам сложно понимать английский, то воспользуйтесь в качестве подсказки моими скриншотами или выполните перевод в браузере (например, автоматический перевод в Google Chrome или воспользуйтесь расширениями для перевода в браузере).

Этапы регистрации бесплатного домена

  1. Проверка доступности домена
    Зарегистрировать и прикрепить бесплатный домен к Blogger1
  2. Выбор длительного периода действия домена. В нашем случае бесплатный домен будет доступен в течение года. Выберите в выпадающем окне 12 Months @ FREE и нажмите на кнопку “Continue”.
    Зарегистрировать и прикрепить бесплатный домен к Bloggerfree-domen-3
  3. Теперь вам необходимо зарегистрироваться. Введите в свободное поле ваш e-mail и нажмите на кнопку “Verify my e-mail address”, и если вы уже зарегистрированы на сервисе, то авторизуйесь с помощью кнопок социальных сетей.
    Зарегистрировать и прикрепить бесплатный домен к Blogger
    Теперь вам нужно активировать учетную запись, перейдя по ссылке из письма, которое вы получите на указанный вами адрес.
    Зарегистрировать и прикрепить бесплатный домен к Blogger
  4. Теперь вам нужно закончить регистрацию, указав дополнительные сведения о себе.  В конце анкеты поставьте галочку напротив согласия с соглашения с условиями пользования сайтом (Terms & Conditions) и нажмите на кнопку “Complate order”. Получить бесплатный домен к Blogger
    Понятно, что для образца, я указала вымышленные данные.
  5. Попадаем на следующую страницу, где вам нужно нажать на большую синюю кнопку “Click here to go to your Client Area”
бесплатные домены для сайта
На этом вы завершили этап бесплатной регистрации домена. Перейти к списку своих доменов вы можете через команды меню Services –> My domains. В случае, если вы все сделали правильно, то напротив вашего домена появится статус Active (активный).

Как прикрепить бесплатный домен второго уровня к Blogger

Во второй части нашего урока мы научимся прикреплять домен второго уровня к блогу на Blogspot (Blogger) бесплатно. Итак, у вас на руках бесплатный домен, которым вы можете пользоваться в течение года.
  1. Переходим в админке Blogger по пути Настройки –> Основное. Находим раздел “Публикация”. Здесь нажимаем на “Использовать персональный домен” и вводим новый домен вместе с www. прикрепить бесплатный домен к Blogger
    Больше ничего не изменяем и жмем кнопку “Сохранить”. Выскочит много ошибок, но это так и должно быть.
    домен ошибка 13, ошибка 12
  2. Возвращаемся к сайту Freenom и переходим Services –> My domen. Здесь нажимаем на Manage Doman  нашего домена.
    Бесплатные домены в зоне tk
    Здесь выбираем вкладку Manage Freenom DNS.
    Регистрация бесплатного домена
  3. Теперь добавляем записи, которые необходимо добавить при прикреплении домена второго уровня к Blogger, а именно:
    - 4 записи типа А с IP 216.239.32.21, 216.239.34.21, 216.239.36.21, 216.239.38.21 (поле Name оставляем пустым),
    - а также 2 записи CNAME с указанными Name (Имя) и Address (Адрес). Эти значения вы возьмете со станицы настроек Blogger из сообщения об ошибке 13 при попытке прикрепления собственного домена. Смотрите пункт 1 (выше). Для удобства смотрите таблицу ниже (столбец TTL опустила, т.к. он в изменениях не нуждается):

    Имя (Name) Тип (Type) Адрес (Address)
    A 216.239.32.21
    A 216.239.34.21
    A 216.239.36.21
    A 216.239.38.21
    указанное в Blogger CNAME указанный в Blogger
    указанное в Blogger CNAME указанный в Blogger

    ошибка 13 при прикреплении домена Blogger
    Картинка кликабельная
  4. Сначала сохраняем изменения на сайте Freenom (Save Changes), а затем на Blogger. При необходимости страницу на Blogger с настройками домена нужно обновить и ввести данные заново.
  5. Не забудьте установить перенаправление с домена без www на домен с www.
Читать далее ...

2017-09-10

Textual description of firstImageUrl

Sitemap html для Blogger

sitemap
Карта сайта, или sitemap html, – это отдельная страница на блоге, в которой перечислены все разделы и страницы блога со ссылками. Вот так выглядит sitemap на моем блоге. Sitemap бывают разные, и это не первая статья на моем блоге с кодами карт сайта для Blogger.
Скриншот:
sitemap blogger
Эта карта сайта выглядит в виде таблицы с четырьмя столбцами. Первый – это нумерация статей. Второй – список страниц блога, причем самые свежие статьи в в самом верху. В третьем столбце – дата публикации, а четвертый (Label) – Ярлыки. При клике по выбранному ярлыку, статьи группируются по этому признаку.
Код карты сайта для Blogspot:
//
<div dir="ltr" style="text-align: left;" trbidi="on">
<style> /* Sitemap plugin By MyBloggerLab */
#bp_toc {
     color: #666;
     margin: 0 auto;
     padding: 0;
     border: 1px solid #d2d2d2;
     float: left;
     width: 100%;
}
span.toc-note {
     display: none;
}
#bp_toc tr:nth-child(2n) {
     background: #f5f5f5;
}
td.toc-entry-col1 a {
     font-weight: bold;
     font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3  {
background:#9E9E9E;
}
.toc-header-col1 {
     padding: 10px;
     width: 250px;
}
.toc-header-col2 {
     padding: 10px;
     width: 75px;
}
.toc-header-col3 {
     padding: 10px;
     width: 125px;
}
.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
     font-size: 13px;
     text-decoration: none;
     color: #fff;
     font-weight: 700;
     letter-spacing: 0.5px;
}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
     text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
     padding: 5px;
     padding-left: 5px;
     font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
     color: #666;
     font-size: 13px;
     text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
     text-decoration:underline;
}
#bp_toc table {
     width: 100%;
     margin: 0 auto;
     counter-reset: rowNumber;
}
.toc-entry-col1 {
     counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
     content: counter(rowNumber);
     min-width: 1em;
        min-height: 3em;
     float: left;
     border-right: 1px solid #fff;
     text-align: center;
     padding: 0px 11px 1px 6px;
     margin-right: 15px;
}
td.toc-entry-col2 {
     text-align: center;
} </style>
<br />
<div id="bp_toc">
</div>
<script src="http://photoforum.do.am/download/sitemap.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div>
             
Вы должны просто вставить код Sitemap HTML в новую страницу Blogger в режиме HTML. Сохраните изменения. Плюсом этой карты является то, что в ней отображены все статьи блога, когда как в других часто старые бесследно пропадают.
Читать далее ...

2017-08-24

Textual description of firstImageUrl

Настройка заголовков H1 H2 H3 темы Blogger

заголовки blogspot
Здравствуйте! Сегодня я затрону тему оптимизации заголовков на Blogger (Blogspot). Эта тема очень важна, так как помогает вашему блогу показывать “правильную” структуру вашего блога поисковикам. Те, в свою очередь, лучше поймут, о чем идет речь в каждой вашей отдельно взятой статье, будут давать более точные поисковые запросы в выдаче. Это приведет к снижению отказов, и как следствие повышение позиций вашего сайта.
Изначально в стандартном шаблоне Blogger и в большинстве нестандартных на главной странице блога в тег h1 заглючен заголовок блога. Названия статей на главной – отдано тегу h3, а названия виджетов заключены в h3. Мы оставим заголовок блога на главной в h1, заголовки сообщений обернем в h2, а названия гаджета – в h3.
Главная страница Blogger до оптимизации:       Главная страница блога после оптимизации:
оптимизация bloggerоптимизация blogger
На странице сообщений (постов, записей) заголовок блога также в h1, заголовок сообщения – в h3, и названия гаджетов – в h2.
После изменений будет заголовок сообщения заключен в h1. Он будет давать сигнал поисковикам, что именно об этом идет речь на конкретной странице. Заголовок блога выведем из h1, так как двух h1 не может быть на одной странице. Заголовки виджетов будут залючены в h3.
Схема 2.
.. Страница сообщения до изменения                    Страница поста после изменения
заголовки h1, h2, h3 blogger   страница-поста-2

Реализация оптимизации заголовков h1, h2, h3 в теме Blogger

  1. Изменяем заголовок блога. Найдите код:
    <h1 class='title'>
    <b:include name='title'/>
    </h1>
    Он может выглядеть так:
    <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
    </h1>
    Замените его на
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <h1
    class='title'>
    <b:include name='title'/>
    </h1>
    <b:else/>
    <p class='title' id='nameblog'>
    <b:include name='title'/>
    </p>
    </b:if>
    Код заголовка блога может встречаться несколько раз, даже 3 или 4 раза. Ищем все отрезки и изменяем на предложенный код.
  2. Меняем стили заголовка блога. Так как мы изменяем тег h1, то отображение названия нашего блога на странице поста изменится. Чтобы вернуть прежний вид, найдите в теме блога стили .Header h1, а лучше просмотрите в коде странице (узнай как это сделать из статьи Как изменить шаблон сайта, в Chrome это делается с помощью горячих клавиш CTRL + SHIFT + I, а Опере – клик правой кнопкой мыши –> проинспектирвать объект). Вот такой код заголовка блога:
    стили заголовков blogger
    Прописываем этот же код для #nameblog и не забываем про #nameblog a. Пример:
    #nameblog
    {
         font: normal normal 16px Open Sans;
         color: #113455;
         text-shadow: 0 0 0 rgba(0, 0, 0, .2);
    }
    #nameblog {
         margin-bottom: 10px;
    }
    #nameblog a {
         font: normal normal 16px Open Sans;
         color: #113455;
         text-shadow: 0 0 0 rgba(0, 0, 0, .2);
         margin-bottom: 10px;
    }
  3. Изменяем заголовки сообщений блога. До изменений узнайте стили заголовков постов через инспектор кода. В моем примере стили следующие:
    h3.post-title {
    font: normal normal 24px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
    margin: .75em 0 0;
    }
    Исправьте на h1.post-title, h2.post-title {…. }, блок объявлений стиле оставьте тот же, т.е. содержимое фигурных скобок. В моем примере:
    h1.post-title, h2.post-title {
    font: normal normal 24px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
    margin: .75em 0 0;
    }


    Пропишите также стили для h1.post-title a, h2.post-title a {бла-юла-бла}, взяв значения из кода темы.

    Для этого найдите отрезок кода <b:if cond='data:post.title'>, далее будет следовать код, похожий на этот:
    <b:if cond='data:post.title'>
                 <h3 class='post-title entry-title' itemprop='headline'>
                   <b:if cond='data:post.link'>
                     <a expr:href='data:post.link'><data:post.title/></a>
                   <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
                     <a expr:href='data:post.url'><data:post.title/></a>
                   <b:else/>
                     <data:post.title/>
                   </b:if>
                 </h3>
               </b:if>
    Или несколько другой. Может встречаться несколько раз. Главное, чтобы он начинался <b:if cond='data:post.title'>, внутри содержал <h3 class=”… ></h3> и заканчивался на </b:if>. Замените все найденные похожие коды на следующий:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h1 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <data:post.title/>
    <b:else/>
    <b:if cond='data:post.url'>
    <data:post.title/>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h1>
    </b:if>
    <b:else/>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h2>
    </b:if>
    </b:if>
  4. Изменить заголовки виджетов (гаджетов) с h2 на h3. Посмотрите стили заголовков виджета. Измените с h2 на h3, содержимое стилей оставьте то же.
    В редакторе html темы блога, выбирайте поочередно гаджеты, пользуясь быстрым поиском по шаблону блога: список виджетов –> HTML5, PageList1, Popularpost1 и другие. Все, кроме Blog1, Navbar 1 и Header 1. После выбора виджета кликните на многоточие перед </b:widget>:
    быстрый поиск кода виджета blogger
    Далее на … после <b:includable id='main'>:
    быстрый поиск кода виджета blogger
    Здесь вы увидите, что заголовок виджета представлен кодом:
    <h2 class='title'>
         <data:title/>
      </h2>
    Замените его на:
    <h3 class='title'>
    <data:title/>
    </h3>
  5. Меняем заголовки сообщений в мобильной версии блога. Находим код:
    <h3 class='mobile-index-title entry-title' itemprop='name'>
      <data:post.title/>
    </h3>
    Изменяем его на
    <b:if cond='data:blog.url == data:post.url' >
             <h1 class='mobile-index-title entry-title' itemprop='name'>
               <data:post.title/>
             </h1>
             <b:else/>
    <h2 class='mobile-index-title entry-title' itemprop='name'>
               <data:post.title/>
             </h2>
             </b:if>
    Не забудьте изменить стили. Находим стиль .mobile h3.post-title, меняем селектор на .mobile h2.post-title, .mobile h1.post-title. Блок объявлений оставляем без изменений.
Читать далее ...

2017-08-19

Textual description of firstImageUrl

Почему не работает Adsense в Blogger

Почему не работает Adsense в Blogger
В последнее время блогеры площадки Blogger стали замечать сложности со вставкой и/или отображением рекламных блоков Google Adsense на своих проектах.
В чем это может выражаться:
  1. появляется ошибка при вставке асинхронного кода Adsense в Шаблон блога (во вкладке “Тема”):
    Ошибка при синтаксическом анализе XML (строка 1945, столбец 44): Attribute name "async" associated with an element type "script" must be followed by the ' = ' character...
  2. Не показываются рекламные блоки, вставленные при помощи гаджета HTML/Javascript,
  3. Проблемы с отображением блоков рекомендуемого контента.
  4. Проблемы могут возникать и при добавлении рекламы через специальный гаджет Adsense
С удовольствием сообщаю вам о том, что все эти проблемы имеют одно простое решение. Вам нужно лишь сделать небольшое преобразование в рекламном коде асинхронного блока адсенс.
Читайте, как вставить рекламу адсенс на Blogger
Исходный код имеет вид:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Часть кода, которая будет подвергнута изменениям выделена желтым, а именно async в первой строчке кода. Его нужно заменить на async="async"
Смотрите, какой код получится у нас в результате преобразований:
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-XXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
<script>
Именно в таком виде и нужно вставлять код, как в гаджет HTML/Javascript, так и в редактор html Темы Blogger.
Хорошая новость: теперь при вставке кода в шаблон не нужно его прогонять через енкодер HTML.

Читать далее ...

2017-08-17

Textual description of firstImageUrl

Как сделать картинку с надписью онлайн

Как сделать картинку с надписью онлайн
Эта статья – еще один обзор онлайн-сервисов, на которых вы можете создать свои картинки для соцсетей. На сегодняшний день социальные сети являются не только средствами коммуникации, некоторые неплохо делают свой бизнес, прокачивая свои аккаунты. Статьи по продвижению ваших профилей в социальных сетях:
..
Эти статью помогут вам в продвижении ваших аккаунтов. Наполнять же вы можете, как чужими картинками, но лучшим вариантом является собственный уникальный контент. Хорошо, что сейчас для создания таких картинок не нужно даже устанавливать специальные сложные графические редакторы, в которых, ко всему прочему, нужно уметь работать. Ознакьтесь с моей прошлой подборкой генераторов для написания цитат на картинках. В этом обзоре я продолжу знакомить вас с другими интересными сервисами, которые помогут увековечить умные мысли на картинках.
  1. Mumotiki – сайт, на котором вы легко наложите надпись на ваше изображение. Сервис на русском языке. Вы можете закачивать свои картинки, изменить цвет, размер текста, шрифт, цвет и непрозрачность подложки, эффекты для изображения.
    Добавляем афоризм на картинку
  2. Recitethis – оригинальный генератор оформления цитат. Иммет английский интерфейс, но прост до безобразия;) Вставляйте в окно для текста ваш текст, и выбирайте подходящий шаблон. Шаблоны самые разные – блокноты, мобильная переписка, постеры, листок бумаги и другие. Минусом является то, что нельзя загрузить свое изображение. Вот так я оформила цитату Григоря Остера, пользуясь этим сервисом:
    Оформление цитат онлайн
  3. Fotor – в этом редакторе онлайн вы добавите любой текст на свое изображение.
    Сделать картинку для соцсетей
  4. My-quote – очень простой цитатник. Загружайте фото, пишите цитату, и генератор сделает все за вас. Минус – сохранить получится только через снятие скриншота. Оформление в одном стиле:
    Добавляем цитату на фото
  5. Pixtellerсайт с отличными шаблонами, который поможет вам оформить афоризмы для последующей публикации в vk, одноклассники, фейсбук или инстаграм. Необходима регистрация. Можно войти через фейсбук или google plus.
    Пост картинка с надписью с vk
  6. behappy – этот генератор добавляет текст на цветной фон – белый, черный, красный, зеленый и другой сплошной. Внимание: кириллицу поддерживают не все шрифты, а именно, если вы пишите на русском, то выбирайте шрифт – Life. Здесь же вы можете добавлять символы.
    Цитата, надпись на белом, церном, цветном фоне
  7. Очень простой сервис по добавлению надписей на картинки. На русском языке. Быстрое решение.
    Простое добавление текста на фото
  8. Picture.plus – еще один сайт для тех же целей. Русскоязычный. Бесплатные функции ограничены, но для обычного пользователя их вполне хватит.
    умные мысли на картинке
  9. Узнайте еще, где можно написать на фото онлайн
Читать далее ...