Lightbox для Blogger - галерея картинок

Крутой Lightbox для Blogger - галерея картинок

Что такое Lightbox?

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

Как установить Lightbox в Blogger


1. Перейдите в раздел Тема.
2. Откройте редактор Изменить HTML.
3. Перед закрывающим тегом </body> вставьте код:

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

4. Для старых стандартных тем нужно найти строку:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Если у вас новые темы Blogger: Contemp, Soho, Notable, Emporio, тогда нужно найти следующею строку:

<div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>

Замените ее следующей строкой:

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

5. Сохраните тему и проверьте, как работает. Если новый лайтбокс не срабатывает подключите библиотеки Jquery. В открывшейся статье сморите пункт 1).

6. Финальный штрих. В разделе Настройки - Сообщения, комментарии и настройки доступа - Показывать изображения в Lightbox ? Да переключите на Нет.

Переходим к просмотру видео:

Как заработать на Youtube канале в 2018 году

Как заработать на Youtube канале в 2018 году

Начиная с 20 февраля 2018 года медийная система Youtube ввела новые правила по заработку на видео канале. Теперь для того, чтобы сотрудничать с партнерской программой Adsense нужно иметь:

  1. 1000 подписчиков
  2. 4000 часов или 240000 минут просмотра видео канала за последние 365 дней

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

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

Партнерки для заработка на Youtube

Кроме Adsense вы так же можете сотрудничать с партнерской программой Air. Для этого нужно иметь:

  1. 300 подписчиков
  2. не менее 3 видео на канале
  3. не менее 10000 просмотров

Самое печальное здесь то, что канал так же должен быть связан с Adsense, поэтому все выше указанные критерии можно делить на ноль и возвращаться к критериям отбора Adsense.

Заработать на Youtube продавая товары или услуги

Кстати, иногда видео, которое набрало 100 просмотров может принести прибыль больше, чем то видео, которое набрало 1000 просмотров. Вы можете смело наплевать на все эти критерии и партнерки и начать продавать свои товары с помощью Youtube канала. Это может быть все что угодно:
  • часы
  • футболки 
  • обувь
  • мебель
  • техника
  • и т.д..
Просто делайте качественный видео обзор товара. Так же хорошо заходят различные услуги:
  • ведущий свадьбы, корпоратива или другого мероприятия
  • фото и видео съемка
  • танцевальные курсы
  • ремонтные работы
Короче любую услугу или товар можно удаленно конвертировать в деньги с помощью Youtube.

Рекомендую посмотреть видео успешного влоггера:

Влияние страниц AMP на SEO продвижение сайта

Влияние страниц AMP на SEO продвижение сайта

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

Что такое AMP и как оно работает

AMP - это технология ускоренных мобильных страниц. Работает данная технология только для мобильных устройств и только в поиске Гугла. По сути когда пользователь переходит из поиска на такой сайт он одновременно остается в гугле и в тоже время находится на вашем веб-ресурсе. Фактически читатель видит страницу вашего сайта из кеша поисковика. На картинке ниже отображен сниппет, возле ссылки перевернутый треугольник, если по нему кликнуть вылезет кнопка Сохраненная копия.
Google сохраненная копия страницы сайта
При переходе отображается копия страницы веб-ресурса проиндексированная поисковым ботом при его последнем визите. Даже, если вы удалили страницу на сайте, то в кеше она еще некоторое время будет доступна.

При каких условиях срабатывает AMP

одобренная страница сайта с amp

Ускоренные мобильные страницы срабатывают при определенных условиях. Для них специально разработан новый тип HTML разметки, включая CSS и Javascript. Для того, чтобы AMP работало корректно и Google одобрял такие сайты, на самом сайте не должно быть стандартной HTML разметки, стилей CSS, скриптов Javascript. Короче говоря данный SEO-тренд существенно ограничивает возможности вебмастера. Например добавление картинок, видео, таблиц, маркированных списков, цитат, систем аналитики трафика и много другого к чему все уже привыкли теперь требует новой разметки. Про добавление рекламы вообще можно забыть, работает только Adsense. Системы аналитики так же не будут работать, только Google Analytics, частично Yandex Metrika.

Влияние AMP на SEO продвижение, результаты тестирования на Blogger

Тестировал СЕО фишку гугла на Blogger, установив специальный шаблон. В виду того, что разметка не должна быть стандартной, а в редакторе при подготовки публикации именно она и задается, пришлось работать на вкладке HTML. Вот вам минус, про вкладку Создать можете забыть, только HTML. Не знаю возможно для WordPress есть плагины, которые упрощают создание контента, для Blogger только так, но это не страшно. В общем сперва было несладко, но постепенно начал привыкать.

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

Рекомендации для ускорения мобильной версии сайта

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

Главная страница
Десктоп - https://tretrey54344y.blogspot.com
Мобильный - https://tretrey54344y.blogspot.com/?m=1
Страница с постом
Десктоп - http://tretrey54344y.blogspot.com/2015/08/this-is-just-going-to-be-another-test.html
Мобильный - http://tretrey54344y.blogspot.com/2015/08/this-is-just-going-to-be-another-test.html?m=1

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

Видео по теме:


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

Как вставить рекламу в блог на blogger.com

Как вставить рекламу в блог на blogger.com

Блоги созданные на Blogger в отличии от тех, которые были созданы в социальных сетях, например Вконтакте, Facebook, Twitter и т.д., позволяют нам вставлять разного роду рекламу. Существует очень много типов рекламных партнерок, например Баннеры, Контекст, Тизеры, CPA (оплата за действия), Adult в общем рекламы просто валом бери и выбирай, что больше нравится.

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

Как вставить рекламу в блог на blogger.com

1 Перейдите в раздел Дизайн
2 Добавьте новый гаджет
3 В списке гаджетов выберите HTML/Javascript
4 В появившемся окне вставьте HTML код рекламы
5 Сохраните гаджет

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

Переходим к просмотру видео:

Материал по теме

Так же я рекомендую вам ознакомиться с несколькими статьями по данной теме:
где лучше разместить рекламу на сайтеГде на сайте лучше всего разместить рекламу


Как увеличить прибыль AdsenseКак увеличить доход от рекламы Adsense 2018

Как вставить на сайт адаптивное видео с Youtube, Vkontakte

адаптивное видео с youtube, vkontakte, facebook, twitter, vimeo

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

Способ подойдет для любой платформы будь то WordPress, Joomla, Blogger и т.д.. Но показывать буду на примере Blogger.

Итак, время движется, с каждым днем появляются новые технологии и наши шаблоны так же не отстают. Ничего не напоминает вам эта фраза? А должна, не так давно мы писали статью о превосходстве отзывчивого, реагирующего шаблона blogger для некоторых милей звучит английский вариант responsive blogger template. Почитайте сперва ее, а потом возвращайтесь к этой. Итак, если вы уже прочитали ее, тогда вы знаете, что с недавних пор гугл стал относится к сайтам с адаптивным дизайном более лояльно, в общем полюбил их больше, нежели те, которые не имеют такого превосходство. Ведь пользователю всегда должно быть комфортно просматривать ваш контент.

Не исключение тому и видео контент сайта - блога. В основном большинство вебмастеров и блогеров используют на своих веб-проектах такие видео-хостинги и социальные сети, как youtube, vimeo, rutube и вконтакте, facebook, twitter и другие. В общем наша задача состоит в том, чтобы пришедший на наш сайт или блог пользователь на своем мобильном телефоне к примеру с шириной дисплея 320 пикселей мог нормально просмотреть наш видеоролик. Потому что, если у него этого не получится сделать на вашем сайте он вмиг с него уйдет. К примеру зайдите на любую страницу нашего сайта где есть видео и сделайте окно вашего браузера то меньше, то больше и вы увидите, как плеер меняет свои размеры соответствуя размеру вашего браузера. Еще одна интересная вещь, сейчас есть много новых шаблонов, которым задают адаптивный дизайн, но как раз о видео плеерах многие веб-дизайнеры забывают.

Настройка адаптивности для видеоплеера с помощью CSS


Впрочем задача перед нами стоит не сложная, нужно в разделе Тема - Изменить HTML найти строку ]]></b:skin> и перед ней вставить CSS код:

@media screen and (max-width:768px){iframe, object, embed{width:100%;height:320px}}@media screen and (max-width:640px){iframe, object, embed{width:100%!important;height:300px}}@media screen and (max-width:480px){iframe, object, embed{width:100%;height:auto}}@media screen and (max-width:320px){iframe, object, embed{width:100%;height:auto}}

Сохраняем шаблон и проверяем, как изменяется размер видео плеера при изменении размера окна вашего браузера.


Переходим к просмотру видео:

Как вставить в Blogger видео из Youtube, Вк, Фейсбука

Если вам нужно добавить видео в блог на Blogger из медийной сети Youtube, тогда вы можете сделать это тремя простыми способами. Для Вконтакте, Facebook, Twitter и других подобных сетей способ всего один. Во всех случаях нам поможет редактор сообщений или страниц. Помимо этого вы так же можете вставлять видеоролики в боковые панели через раздел Дизайн, но об этом чуть позже.

Вставка видео из Youtube через копирование HTML видеоплеера

Для меня удобней всего разместить видеоролик из Ютуба, через копирование его HTML кода. Для этого проста кликните по видео правой кнопкой мышки и в появившемся списке выберите: Копировать HTML-код.
Ка вставить в Blogger видео из Youtube, Вк, Фейсбука
После откройте в блоге Сообщение, вверху, с правой стороны перейдите на вкладку HTML и разместите скопированный код в нужном месте.

Таким же способом можно добавлять видео из социальных сетей Facebook, Vkontakte и т.д.. Еще можно поискать иконку или кнопку поделиться и там так же будет возможность скопировать код плеера. По Фейсбуку и Твиттеру смотрите видео в конце статьи.

Как регулировать ширину и высоту плеера сморите либо на видео ниже, либо здесь.

Вставка видео из Youtube через редактор сообщений

Для этого способа вам нужно открыть Сообщение, вверху кликнуть по иконке Вставить видеоролик, перейти на вкладку c Youtube и прописать в поисковой строке название видеоролика. Далее просто находите то, что искали, кликаете мышкой и жмете кнопку Выбрать.
вставка видео через редактор сообщений
Заметили там вкладку Загрузка? Все верно вы так же можете загружать видеоматериалы со своего компьютера, правда много не загрузите, места не хватит, помните у вас в запасе 15гб.

Добавление видео из Ютуб кнопкой поделиться

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


Добавление видеоролика в Дизайне

Как я уже говорил выше, нужный видеоролик можно размещать не только в постах, но и в боковых панелях, футере, короче говоря в любом месте, где есть возможность добавления гаджетов и виджетов. Для этого копируем код плеера, переходим в раздел Дизайн - Добавить гаджет - HTML\Javascript, в появившемся окошке вставляем код и сохраняем гаджет.


Если вам было трудно ознакомиться с текстовой частью материала предлагаю просмотреть видео:

Как оптимизировать картинки для сайтов и блогов


    Оптимизация картинок для сайта

    Оптимизация изображений для сайта - блога

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

    Что такое тег alt?

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

    <img src="ссылка на картинку" />

    Добавив этот код на любой из своих страниц вы увидите отображение картинки. Но когда поисковой робот зайдет на эту самую страницу, он не будет знать к чему эта картинка относиться, к кулинарии ли же к спортивному событию. Так что давайте поможем ему определить к какой категории относиться наша картинка и добавим к ней тег alt:  
    <img src="ссылка на картинку" alt="впишите здесь описание картинки" />

    Вот так будет выглядеть код нашей картинки с тегом alt.

    Правильная оптимизация картинок

    Одного лишь добавления тега Alt недостаточно для правильной оптимизации картинки. Вам нужно соблюдать следующие советы по оптимизации изображений:

    1. В описании не пишите полное предложение. Старайтесь сократить описание выбрав самые главные словосочетания
    2. Не злоупотребляйте ключевыми словами. В описании используем ключевое слово не более одного раза. Помним, что короткое и размеченное описание добавляет изображению больше балов в поисковой выдаче
    3. Всегда, перед началом поста добавляйте вводное изображение
    4. Не задавайте описанию картинки бессмысленные слова. Эти слова всегда должны нести то же значение, что и статья
    5. Избегайте в описании использования специальных символов:  @, &, %, $, # и т.д.
    6. Старайтесь использовать иллюстрации с небольшим весом. Для этого пользуйтесь сервисом сжатия изображений.

    Как добавить тег alt в blogger?

    Пользователям платформы blogger легче всего добавить тег alt своим картинкам. Для этого вам нужно после загрузки:
    1. Кликнуть по изображению
    2. Выбрать ссылку :"Свойства" 
    3. В строке: "альтернативный текст" вписать нужное описание.
    Пример на скриншотах ниже:
    blogger добавление тега alt
    blogger добавление тега alt второй этап

    Так же это можно сделать вручную через HTML редактор, но поскольку есть простой вариант описывать этот мы не будем.

    Blogger: как добавлять картинки в сообщения

    Blogger: как добавлять картинки в сообщения

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

    Как правильно загружать изображения в Blogger

    1) Откройте раздел Сообщения
    2) Создайте новое Сообщение
    3) В верхней части редактора кликните по иконке Вставить изображение
    4) В открывшемся окне кликните по кнопке Выбрать файлы
    5) Выберите нужную картинку на своем устройстве
    6) Кликните по кнопке Добавить  выбранные изображения

    Ознакомиться с процессом более подробно можете с помощью видео:

    Как сделать быстрые ссылки в поиске Google

    Как сделать быстрые ссылки в поиске Google

    Есть несколько типов быстрых ссылок. В основном они встречаются в описании или же после описания. Те линки, которые формируются в описании ведут на саму статью, перед читателем отображается определенный раздел (абзац) данной статьи. Такого типа ссылки можно воссоздать используя специальный виджет, который называется Table of Contents - содержание статьи.

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

    Более подробней по теме можете узнать из видео ниже:

    Notable 1.2 обновленная тема для Blogger

    Notable 1.2 обновленная тема для Blogger 2018

    Тем из вас, кому полюбилась одна из новых тем блоггера Notable, есть возможность заполучить более функциональный вариант. Что входит в новую версию:

    • Плавающее меню
    • Увеличение картинок при наведении курсора 
    • Виджет rating posts stars
    • Навигация в виде бесконечной прокрутки страниц блога
    • Хлебные крошки
    • Заглавная картинка с заголовком сообщения
    • Виджет похожих сообщений
    • Плавающий сайдбар в сообщениях
    • Секция под рекламный баннер 
    • Виджет избранных сообщений
    • Новый Lightbox - кликните на любую картинку, лучше в самом первом сообщении демо блога.
    • SEO оптимизация

    Бесплатная версия урезана не только в SEO, но и в некоторых вышеуказанных элементах шаблона.

    Демо
    Приобрести полную SEO оптимизированную версию

    Шаблон Notable: плавающий сайдбар в сообщениях

    Шаблон Notable: плавающий сайдбар в сообщениях

    Приветствую друзья. В предыдущем обзоре обещал вам показать, как в сообщениях блога сделать липкий сайдбар для темы Notable.

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

    Преимущества скрипта:
    • Не нагружает блог
    • Работает без библиотек jquery 

    Скачать установочный файл.

    Переходим к видео инструкции:

    Тема Notable: редактируем сайдбар в сообщениях

    Тема Notable: редактируем сайдбар в сообщениях

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

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

    Переходим к просмотру видео:


    Небольшой анонс следующего выпуска. Будем делать этот сайдбар плавающим, что может принести дополнительный профит.