2017-10-08

Textual description of firstImageUrl

Убрать или изменить надпись “Показаны сообщения с ярлыком”

Убрать или изменить надпись “Показаны сообщения с ярлыком”
Надпись “Показаны сообщения с ярлыком” часто не устраивает блогеров, т.к. она не всегда нужна, не всегда выглядит красиво и выдает то, что блог ведется на платформе Blogger (некоторые вебмастера скрывают этот факт).
Если вы хотите красиво оформить ярлыки, то прочитайте статью по ссылке.
Полезная статья про настройку новых шаблонов Blogger 2017: как показать ярлыки в шаблоне Blogger 2017
показаны сообщения с ярлыком
Еще одна надпись, возникает при использовании встроенного поиска по блогу: “Показанные сообщения отсортированы по релевантному запросу (календарь). Сортировать по дате Показать все сообщения”.
Показанные сообщения отсортированы по релевантному запросу

Поэтому, убрав эти надписи, мы избавляемся от ненужного элемента и от лишнего кода. Из этой статьи вы узнаете, как это сделать несколькими способами, и как изменить эту надпись, прописав свой текст.
Узнайте также о том, как оптимизировать вашу тему Blogger, прописав заголовки h1, h2, h3
Внимание! Перед любыми изменениями в html редакторе темы, делайте резервную копию

Способ 1. Удаляем надпись “Показаны сообщения с ярлыком… Показать все сообщения”

..
  1. Перейдите в админке Blogger по пути Тема –> Изменить html
    Тема – Изменить html
  2. Клик в любом месте кода мышкой и нажмите CTRL +F для активации поиска по коду. Ищите отрезок кода:
    <b:includable id='status-message'>
  3. Кликните на стрелочку напротив найденного кода для раскрытия
    Убрать или изменить надпись “Показаны сообщения с ярлыком”
  4. Удалите весь код, заключенный внутри секции b:includable с идентификатором 'status-message', а именно:
         <b:includable id='status-message'>       <b:if cond='data:navMessage'>       <div class='status-msg-wrap'>         <div class='status-msg-body'>           <data:navMessage/>         </div>         <div class='status-msg-border'>           <div class='status-msg-bg'>             <div class='status-msg-hidden'><data:navMessage/></div>           </div>         </div>       </div>       <div style='clear: both;'/>       </b:if>     </b:includable>

    Убрать или изменить надпись “Показаны сообщения с ярлыком”
  5. Вставьте на его место код:
    <b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:includable>
  6. Сохраните изменения.
Если таким способом вам по каким-то причинам, удалить указанную надпись не удалось, тогда переходим к способу 2.

Способ 2 удаления текста “Показать сообщения с ярлыком”

  1. Переходим в html редактор темы Blogger (Тема –> Изменить html)
  2. Найдите в шаблоне отрезок кода ]]></b:skin>
  3. Вставьте перед ним: .status-msg-wrap { display: none; }
  4. Сохраните изменения.

Как изменить текст надписи “Сообщения с ярлыком …”

  1. Повторите шаги 1-3 из Способа 1 (удаление надписи)
  2. Замените удаленный код следующим:
    <b:includable id='status-message'>
       <b:if cond='data:navMessage'>
       <div class='status-msg-wrap'>
         <div class='status-msg-body'>
           <b:if cond='data:blog.pageType == "index"'>
           <b:if cond='data:blog.searchLabel'>
             Сообщения с ярлыком <b><data:blog.searchLabel/></b>
           </b:if>
           <b:if cond='data:blog.searchQuery'>
             Показаны сообщения, соответствующие запросу <b><data:blog.searchQuery/></b>
           </b:if>
           <b:else/>
           <data:navMessage/>
           </b:if>
         </div>
         <div class='status-msg-border'>
           <div class='status-msg-bg'>
             <div class='status-msg-hidden'><data:navMessage/></div>
           </div>
         </div>
       </div>
       <div style='clear: both;'/>
       </b:if>
    </b:includable>
  3. Вы можете изменить текст, выделенный синим и зеленым на свой собственный.
Читать далее ...

2017-09-30

Textual description of firstImageUrl

Как убрать древовидные комментарии в Blogger

комментарии-blogger
Сегодня мы будем учиться убирать древовидные комментарии из блога Blogger. В этом случае комментарии будут иметь линейный (одноуровневый) вид. В такой форме комментариев нельзя ответить какому-то конкретному комментатору, но она имеет свои неоспоримые преимущества:
  • из линейных комментариев возможно удалить внешние ссылки на Blogger.com.
  • ссылку из даты комментариев можно удалить только при условии использования одноуровневой системы.
Как итог, лучшая оптимизиция, удаление тонны внешних ссылок, ведущих из комментариев вашего блога.
Примечание. Если вы пользуетесь комментариями от гугл плюс, то удалить древовидные комментарии будет невозможно. Прежде нужно отключить google plus комментарии.

Способ 1 удаления древовидных комментариев

Вы можете поменять эту настройку комментариев на значение “На всю страницу” или “Всплывающее окно” (Настройки –> Сообщения, комментарии, настройки доступа –> Комментарии –> Расположение комментария –> На всю страницу или Всплывающее окно). Изменение одной этой функции приведет к удалению древовидных комментариев из вашего блога и приведения их в линейный вид. Однако в этом случае при оставлении комментария (при нажатии кнопки “Ответить”) у вас будет всплывать окно. Это достаточно неудобно.
Поэтому рассмотрим…
//

Способ 2 – переход к одноуровневым комментариям Blogger (оптимальный)

  1. Настройки –> Сообщения, комментарии, настройки доступа –> Комментарии –> Расположение комментария –> Встроенный
    комментарии
  2. Настройки –> Другое –> Фид сайта –> Разрешить фид блога –> Дополнительно –> Напротив пункта “Каналы комментариев к каждому ссобщению” выбираем “Нет”:
    фид-комментария
Сохраните изменения.

Как удалить внешнюю ссылку на Blogger.com из комментариев

Перед любыми изменениями кода темы делайте резервную копию шаблона!
Перейдите в редактирование шаблона блога по пути Тема –> изменить html, клик в любом месте кода шаблона, активируйте поиск горячими клавишами CTRL + F. Введите в поиск по коду шаблона отрезок data:post.commentFormIframeSrc и вы найдете строчку:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' />
Удалите её.

Как удалить ссылку из даты комментариев

Хотя дата комментариев и не дает внешней ссылки, однако некоторые пользователи стремятся избавится и от нее, считая, что она уменьшает вес страницы, а также являются циклическими ссылками, т.е. ведут на одну и ту же страницу. Это не одобряют поисковые системы.
Чтобы удалить ссылку из даты комеентариев на Blogger, выполните поиск по отрезку кода  data:comment.timestamp, в результате вы найдете такой код, отвечающий за вывод даты комментария:
<a expr:href='data:comment.url' title='comment permalink'>
             <data:comment.timestamp/>
           </a>
Удалите код, выделенный красным. Сохраните изменения.
Читать далее ...

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>
    Замените его на
    <div class='titlewrapper' style='background: transparent'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='title' style='background: transparent; border-width: 0px'>
    <h1><b:include name='title'/></h1>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
    <p class='title' id='nameblog'>
                                      <b:include name='title'/>
                                    </p>
    <b:else/>
    <p class='title' id='nameblog'>
                                      <b:include name='title'/>
                                    </p>
    </b:if>
    </b:if>
    </div>
    Код заголовка блога может встречаться несколько раз, даже 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. Блок объявлений оставляем без изменений.
Читать далее ...