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. Блок объявлений оставляем без изменений.
Читать далее ...

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. Узнайте еще, где можно написать на фото онлайн
Читать далее ...

2017-08-12

Textual description of firstImageUrl

Как показать ярлыки в новой теме Blogger (2017)

Показать ярлыки в новой теме Blogspot
Эта статья стартует цикл тем, касающихся изменений новых тем Blogger (2017). Я уже опробовала новую тему Emporio в одном из моих блогов. Осталась довольна, но как всегда любую тему необходимо подгонять под себя и дополнительно оптимизировать так, чтобы она нравилась и посетителям, и поисковым системам.
Одно из неудобств – это закрытые списки ярлыков в блоге, что неизбежно снижает поведенческие факторы. Ярлыки можно же использовать для навигации в вашем блоге.
Выглядят Ярлыки так в обычном (закрытом состоянии):
Ярлыки под спойлером
После клика по области ярлыков, они раскрываются, но нам не виден полный список. Мы видим лишь часть и ссылку “Показать больше”. Читателю приходится кликать снова. Это слишком сложные действия, которые скорее приведут к отказам.
Как показать ярлыки в новой теме Blogger (2017)
Ярлыки показать меньше
Согласитесь, что не каждый будет нажимать на какой-либо элемент дизайна, чтобы посмотреть, что там внутри. Не каждый даже догадается, что под спойлером скрыто что-то полезное. Поэтому мы изменим список на раскрытый, а читатель вашего блога сможет его закрыть при желании.

Итак, как показать ярлыки на Blogspot

Для начала нам нужно добавить гаджет “Ярлыки” в качестве элемента дизайна нашего блога:

  • Перейдите во вкладку “Дизайн” Blogger,
  • добавьте гаджет “ярлыки”. Выберите оформление ярлыков – настройте их в виде списка или облака, выберите те, которые следует показывать в вашем блоге или покажите все.
  • При желании, задайте свой заголовок для гаджета “Ярлыки”.
  • Сохраните изменения.
Переходим к изменениям в шаблоне:
  • Перейдите во вкладку “Тема”,
  • Сделайте бекап темы,
  • Нажмите на кнопку “Изменить HTML”,
  • В верхней части окна кода нажмите на "кнопку “Список виджетов” –> Label1:
    Изменить код гаджета Ярлыки
  • Найдите отрезок кода:
    <b:widget id='Label1' locked='false' title='Ярлыки' type='Label' visible='true'>
  • В  коде гаджета “Ярлыки” найдите отрезок кода со значениями "Main" или "collapsible extendable”:
    <b:includable id='main' var='this'>
    <details class='collapsible extendable'>
    Нажмите на них для раскрытия кода, как показано ниже:
    ярлыки Blogspot
  • В раскрывшемся коде найдите <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
  • Удалите из этой строчки код: cond='data:view.isLabelSearch':
    удалить выделенный код
  • Сохраните изменения.
После редактирования ваши первые ярлыки будут показаны в раскрытом состоянии. Чтобы раскрыть полный список, нужно будет кликнуть по ссылке “Показать больше”:
раскрыть ярлыки Blogspot
Читать далее ...

2017-08-08

Textual description of firstImageUrl

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

Счетчики на сайт, ставить или нет?
Приветствую вебмастеров. Многие задаются вопросом, а стоит ли вообще ставить на свой сайт счётчики посещаемости, и если да, то какие и зачем это нужно делать?


Это гостевая статья в Азбуке Блогера, автор статьи - Блог Econ Dude

Подобных статей в интернете уже много, поэтому я зайду немного с другого угла.

Начнём с самых простых соображений, зачем вообще вам нужен счётчик посещаемости?

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


Счётчики посещаемости нужны для двух вещей:

  • Показать статистику всем, а не только вебмастеру;
  • Получить обратные ссылки.

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

Но есть у факта их наличия и недостатки:

  • Код счётчиков бывает "кривым", может вызывать ошибки в Google;
  • Это внешние ссылки со всех ваших страниц, что может быть очень вредно;
  • Если у вас 15 посетителей в день, не всегда это стоит всем показывать.

Уже этих недостатков хватает для того, чтобы множество топовых и посещаемых сайтов не ставили практически никакие счётчики у себя. Максимум что вы увидите это liveinternet.ru, иногда рамблер и рейтинг mail.ru. Может быть еще hotlog.ru.

И это не просто так, вот эти 4 счётчика вполне приличны и их можно ставить:

  • http://www.liveinternet.ru/
  • https://top100.rambler.ru/
  • https://top.mail.ru/
  • http://hotlog.ru/

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

В рунете счётчики всё еще работают и вот эти четыре вполне себе живые.

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