2016-02-25

Textual description of firstImageUrl

Оптимизация блога Blogger на примере разбора Gitarkin Blog

обзор блога
Здравствуйте, сегодня я подготовила третий обзор блога Gitarkin Blog для победителя акции “Самый активнй комментатор” – Gitarkin. Блог англоязычный, поэтому анализировать мне его было сложнее всего. Посмотрим, что получилось..
Сразу отмечу, что сайт имеет приятный дизайн, используется зарубежный паблик шаблон. В верхней части блога – надстройка гугл переводчик, что удобно для таких как я – владеющих английским... только со словарем Подмигивающая рожица.
Проверила показатели по сервису – pr-cy.ru. В этом блоге также плохая индексация, думаю, что она связана с переходом blogspot на региональный домен. Активное обновление блога уникальными материалами плюс анонсы в социальные сети должны исправить ситуацию.

Положительные моменты:
  • регулярные обновления,
  • ненавязчивая реклама,
  • под каждой записью виджет похожих сообщений (я бы убрала его с главной и оставила лишь на странице записи)
  • связь с социальными сетями – есть кнопки гугл +, ссылка на страницу facebook, pinterest, surfingbird и другие.
Сео оптимизация:
  • Много внешних ссылок со станиц блога, их количество составляет 58. Нужно почистить шаблон от внешних ссылок.
  • В блоге есть метатег description (описание), но нет keywords (ключевых слов). О том, как прописать ключевые слова в blogger, я уже писала в обзоре блога Made By Hands.
  • Советую оптимизировать шаблон (в тегах h2 прописаны названия виджетов (Followers, Facebook Badge, Labels), а названия записей – в тегах h3. Получается, что названия виджетов должны быть более релевантным тематики блога, что не соответствует действительности. Для того, чтобы изменить заголовки h1. h2, h3 в blogspot нужно зайти в редактор шаблона html

    1. найти строчку <b:if cond='data:post.title'>
    2. ниже этой строчки вы увидите код, выделенный на скриншоте голубым выделением:


      на следующий код
      <b:if cond='data:post.title'>
      <h3 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>
      </h3>
      </b:if>
    3. Для того, чтобы на главной страницы посты блога выводились с использованием заголовка h2, а на внутренних h1, замените предыдущий код на следующий:
      <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. Не забудьте изменить стили для h1, иначе дизайн блога может сильно измениться, а в некоторых случаях и пострадать. Если вы хотите, чтобы отображение заголовков статей не изменилось, то найдите отрезок кода ]]></b:skin> и пропишите стили заголовков. Можно просто прописать стили для h1, такие же, как были прописаны для h2 (или h3). Придется изменить заголовок h2 – как известно, h2 должен быть по размеру меньше h1, а h3 < h2.
    5. Изменим заголовок блога так, чтобы он выводился только на главной странице в виде h1. Для этого изменим отрезок кода
      <h1 class='title'>
      <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>
    6. Теперь меняем заголовки для виджетов с h2 на h3. Для этого находим все строчки в шаблоне вида:
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
         <h2 class='title'><data:title/></h2>
      </b:if>
      и заменим их на
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
      <h3 class='title'><data:title/></h3>
      </b:if>
    7. Поменяйте код <title><data:blog.pageTitle/></title> 
      на отрезок кода
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title><data:blog.title/></title>
      <b:else/>
      <title><data:blog.pageName/></title>
      </b:if>

      Это позволит исключить дублирование название блога в заголовке. Так, например, если вы находитесь на странице записи, то она примет вид: Обзор блога Gitarkin Blog вместо Азбука блоггера: Обзор блога Gitarkin Blog.
    8. Осталось поправить стили для h1, h2 и h3 под ваш дизайн блога. Если вы хотите, чтобы отображение заголовков статей не изменилось, то найдите отрезок кода ]]></b:skin> и измените стили заголовков. Можно просто прописать стили для h1, такие же, как были прописаны для h2 (или h3). Заменим код
      h3.post-title {
        бла-бла-бла}
      h3.post-title a {
        бла-бла-бла}
      h3.post-title a:hover {
        бла-бла-бла}
      на отрезок кода:
      h2.post-title {
        бла-бла-бла}
      h2.post-title a {
        бла-бла-бла}
      h2.post-title a:hover {
        бла-бла-бла}
    9. Пропишем стили для заголовка блога на внутренней странице (здесь для него не используется тег заголовка). Найдите снова ]]></b:skin> и перед ним добавьте отрезок кода
      #nameblog  {
         font: normal normal 53px Georgia, Times New Roman;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: -3px;
        margin:0px;
        color: #c26205;
        padding:0px 25px 0px 10px;
      }
      #nameblog a {
         color: #c26205;
          margin:0px;
        padding:0px;
      }
      В стилях #nameblog скопируйте стили .Header h1, чтобы отображение заголовка блога на главной не отличалось от названия на внутренней странице.
Читать далее ...
Textual description of firstImageUrl

Профиль Blogger

  !!! Внимание! С 4 апреля 2019 года профиль Гугл Плюс закрывается, и поэтому, если вы хотите знать, как переехать с профиля Google Plus на профиль Blogger, то читайте статью.

Этот урок для начинающих пользователей. Как ни странно многие блогеры не заполняют свой профиль. Многие даже не знают как изменить свой профиль на blogger. Об этом свидетельствуют вопросы в ответах гугл, мне тоже время от времени задают вопрос “Как редактировать профиль blogger”. В профиле вы можете обратится к своим читателям, указать важную информацию о себе, а также указать список блогов, которые вы ведете и читаете (или же спрятать). В ваш профиль могут попасть со страницы вашего блога, если вы активировали специальный плагин, а также при нажатии на аватар возле вашего комментария.
   Кроме настройки профиля из этой записи вы узнаете как изменить настройки аккаунта. У вас больше не будут возникать вопросы “Как изменить пароль блога blogger”, “Как подключить множественный вход Google аккаунтов?”, “Как подключить дополнительные аккаунты, такие как Twitter, Facebook, Flickr, MySpace и другие. В Google аккаунте вы указываете настройки, которые будут действовать во всех продуктах Google (почта, Youtube, Blogger, документы, Google сайты, AdSense, Adwords, Feedburner, Google + и других) в пределах одного аккаунта. Это и настройки приватности, и язык, и основная, а также дополнительные e-mail.
В настройки аккаунта можно войти по адресу https://www.google.com/settings/

Настройка профиля Blogger

В профиль Blooger вы можете попасть так – на главной странице http://www.blogger.com/home, на которой представлен список ваших блогов в правом верхнем углу нажмите на свой аватар:
профиль_blogger
Далее перейдите по ссылке “Профиль Blogger”. Вот вы уже и в своем профиле. Он выглядит так:
profile_blogger
Для того, чтобы изменить свой профиль, нажмите на кнопку bpvtybnm_ghjabkm в правом верхнем углу.
Здесь вы можете изменить свой аватар профиля Blogger, ваше отображаемое имя (ник), общую информацию о себе, адрес e-mail, а также выбрать ваши  блоги, которые будут отображаться в вашем профиле.
изменить_профиль_blogger
Не буду останавливаться на этом подробно, так как там и так все понятно.
Вы можете настроить отображение профиля Blogger в своем блоге через виджет Профиль. Перейдите во вкладку Дизайн в административной панели и выберите Профиль из списка виджетов. Вы можете редактировать отображаемую информацию.
редактировать_профиль

Виджет Профиль Blogger

Так будет выглядеть ваш профиль в блоге:
вид_профиля_в_блоге
Вы можете также вместо вашего аватара вставить любое изображение и оформить свой профиль как угодно, пользуясь Рамочником. Этот код вставьте в виджет HTML/JavaScript.
Мой профиль

Здесь важная информация обо мне ;)
Приведу код этого безобразия.

И конечно же, не забудьте добавить ссылку на свой профиль Улыбка.
Читать далее ...

2016-02-20

Textual description of firstImageUrl

Как закруглить углы CSS

border-rdius css3
CSS3 позволяет вебмастеру закруглять углы. В этой статье вы увидите всевозможные эффекты, которых можно добиться с помощью этого свойства.
Читать далее ...

2016-02-14

Textual description of firstImageUrl

Поздравление с днем святого Валентина от Google

google_приколы
Продолжаю собирать фишки, приколы и поздравления от Google.
Вчера, 14 февраля пользователи поиска Google.ru могли видеть поздравительную флешку с днем святого Валентина. Сегодня ее уже убрали. Для тех, кто не видел поздравления, я записала ее на видео. Вы можете посмотреть его здесь:


Читайте также по теме:
- Поздравление с Рождеством от Google,
- Самые популярные приколы Google.

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

2016-02-12

Textual description of firstImageUrl

Что выбрать: Blogspot или Wordpress?

blogspot wordpress
Здравствуйте, дорогие друзья. Сегодня мы будем разбираться в вопросе – где лучше вести блог – на Blogpot или на Wordpress.
Достаточно частой является ситуация, когда новичок-блоггер заводит свой первый блог на Blogspot, после того, как он входит во вкус, ему становится тесто на бесплатном хостинге. Тут и принимается решение о чем-то более серьезном, и автор переносит свой блог на wordpress. Давайте рассмотрим плюсы и минусы обеих площадок и сделаем вывод. (Прим. Могу сравнивать, потому что веду блоги, как на Blogger, так и на wordpress).

Blogger Blogspot

Создать свой собственный блог на Blogspot вы можете менее, чем за минуту! Google обеспечивает бесперебойную работу вашего блога. Административная панель Blogger достаточна проста и удобна. Вы можете изменять положение различных элементов блога простым перемещением во вкладке Дизайн, а также конструировать шаблон в Редакторе шаблонов. (Читайте подробнее статью Изменяем дизайн блога на blogger). Вы можете редактировать шаблон в редакторе HTML. Небольшое количество стандартных шаблонов компенсируется достаточно большим выбором тем, которые вы можете найти на специальных сайтах.
Blogger не имеет плагинов, но у него есть гаджеты, которые расширяют его функциональные возможности. Отсутствие плагинов означает, что если вы хотите добавить дополнительные функции, то вам нужно иметь некоторые знания HTML и css.
.. Положительным моментом Blogspot является интеграция с другими блоггерами данной площадки, простое добавление в друзья, после чего в вашей ленте будут анонсироваться посты блогов, которые вы читаете. Это дает дополнительный трафик. Реализовано через гаджет “Постоянные читатели”. 
При размещении своего блога на Blogspot, вы не являетесь полноправным владельцем блога, поэтому вы зависите от Google. В случае случае спорных вопросов по авторскому праву или если ваш блог будет заподозрен в распространении спама, Google может его просто отправить в бан.
Возможности оптимизации Blogspot очень ограничены. Вы не можете настроить полноценную карту сайта, кроме как вручную. Все варианты скриптов карты сайта не приемлемы для поисковиков, а предназначены только для удобства пользователей. Вы не имеете возможности прописать title и keywords для каждого сообщения блога, сделать автоматические ЧПУ url. В вашем блоге не будет даже категорий.
Blogger очень удобная площадка для ведения блога, но если вы планируете серьёзный проект или создание собственного бизнеса в сети, то вам нужно выбрать что-нибудь более надежное.

WordPress

WordPress стоит выбирать в том случае, если вы хотите широкие возможности редактирования дизайна, а также функциональные возможности. Вы владеете своим блогом, и никто не может его у вас отобрать, забанить, за исключением только случаев нарушения законодательства.
Теперь поговорим о минусах wordpress. Во-первых, отлаженная работа блога во многом зависит от хостинга, на котором вы размещаете свой блог. Если хостинг ненадежный, а проверить его добропорядочность придется на собственном опыте, то могут быть проблемы, начиная от частой недоступности сайта, бесконечных предупреждениях о превышении допустимой нагрузки, длительной загрузке блога, вплоть до вирусов, фишинговых ссылок и пр.
Второе уязвимое место wordpress – атаки спамеров. Это проблема решаема, но она встанет перед вами непременно.
И третье, если для ведения блога на Blogpot, от вас требовалось знаний HTML и css, то на wordpress вам придется изучать и php. При недостаточных знаниях, вы будете совершать ошибки, за которые возможно придется дорого заплатить.
Wordpress меня подкупил своей функциональностью, простотой и удобством администрирования, но всё-же, для начала я бы рекомендовала отладить свой сайт, установив движок на локальный сервер, например Denver.  Это позволит вам в первую очередь познакомиться с особенностями работы CMS, подобрать подходящее оформление для своего будущего сайта из множества готовых шаблонов, либо, если у вас есть знания HTML и CSS, разработать свой собственный уникальный дизайн.
Кроме Blogspot, вы можете выбрать и другой бесплатный сервис для блога. А где предпочитаете вести свои блоги вы?
Читать далее ...

2016-02-06

Textual description of firstImageUrl

Микроразметка в Blogspot

микроразметка в blogger
Про микроразметку на моем блоге уже была статья, но эти фишки уже потеряли актуальность, на смену им пришли другие, поэтому читайте ниже новый урок по настройке микроразметки на Blogger, исправлении ошибок (проверять их наличие будем в валидаторе от Google). Если вы не знаете еще что такое микроразметка, для чего они нужна и где проверить валидность микроразметки на вашем блоге, то читайте все это здесь >>>
Напомню, что в блоги Blogspot микроразметка уже внедрена, но есть ошибки, которые легко устраняются.
Я покажу как убрать ошибки микроразметки на примере одного из тестовых блогов Blogger со стандартным шаблоном. Владельцы блогов с нестандартными шаблонами могут не переживать – действия требуются по их устранению очень похожи.
ошибки микроразметки blogspot

Как вы видите, что ошибки структурированных данных (так еще называют микроразметку) присутствуют в разделе BlogPosting.
..
Ошибка Как исправить
Ошибки blogId и postId Найти и удалить в шаблоне блога коды:
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
Они могут встречаться в шаблоне несколько раз. Удалить все.
Ошибка datePublished Зайдите во вкладку “Дизайн” в административной панели блога. Найдите элемент, отвечающий за выведение сообщений блога и нажмите на ссылку “изменить”. В параметрах страницы сообщения измените вид отображения даты на такой: месяц/день/год (dd/mm/yyyy), пример 2/02/2016.
Проскрольте вниз, сохраните изменения.
Скриншоты:
ошибка datepublished   исправляем ошибку микроразметки даты поста
Ошибка headline В шаблоне html блога находим код, отвечающий за заголовок. Обычно он выглядит так:
<h3 class='post-title entry-title' itemprop='name'>В оптимизированных шаблонах это:
<h2 class='post-title entry-title' itemprop='name'>В некоторых нестандартных шаблонах может встретиться такой код:
<h2 class='post-title entry-title' itemprop='name headline'>
И заменяем itemprop='name' на itemprop='headline'Окончательный вид кода будет выглядеть так:
<h3 class='post-title entry-title' itemprop='headline'>
Также отрезки кода могут встречаться несколько раз, вносим изменения во все такие строчки кода.
Ошибка author Найдите код <data:post.body/> и вставьте после него:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
Учтите, что тег <data:post.body/> может встречаться в шаблоне несколько раз, и что вставить нужно лишь в определенном месте. Можете найти его путем подбора, пробуя разные варианты.
Ошибка image Найдите код <data:post.body/> (может встречаться несколько раз) и вставьте после него:
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<b:if cond='data:post.firstImageUrl'>
<img style='display:none;' expr:src='data:post.firstImageUrl'/>
<meta itemprop='url' expr:content='data:post.firstImageUrl'/>
</b:if>
<meta itemprop='width' content='800'/>
<meta itemprop='height' content='800'/>
</div>
Исправьте значения высоты и ширины изображения на свои.
Ошибка image_url Найдите код вида:
<b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>

и удалите его.
Ошибка publisher Найдите тег <data:post.body/> (может встречаться несколько раз в шаблоне) и вставьте после него:
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'> <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> <img style='display:none;' src='https://3.bp.blogspot.com/-NXJE0ll14e4/VnRLGDil9cI/AAAAAAAABi8/rhGrdkDZ8E0/s1600/technohalf-logo.png'/> <meta itemprop='url' content='https://3.bp.blogspot.com/-NXJE0ll14e4/VnRLGDil9cI/AAAAAAAABi8/rhGrdkDZ8E0/s1600/technohalf-logo.png'/> <meta itemprop='width' content='600'/> <meta itemprop='height' content='60'/> </div> <meta itemprop='name' expr:content='data:blog.title'/> </div>Замените ссылки на logo (выделено желтым) на свой логотип, а также размеры логотипа (выделено красным).
Ошибка dateModified Найдите: <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'> и вставьте после него строчки:
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
Ошибка mainEntityOfPage Найдите этот код:
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>В вашем шаблоне может встретиться также такой код:
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>Замените найденные коды на следующее:
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'> <meta itemscope='itemscope' itemprop='mainEntityOfPage' itemType='https://schema.org/WebPage' expr:itemid='data:post.link ? data:post.link : data:post.url'/>
Ошибка url в секции изображение - image [ImageObject] Иногда остаются ошибки – отсутствует обязательный тег url (нет ссылки на изображение), несмотря на то, что вы исправили ошибку image по инструкции выше. Это лишь говорит о том, что не ко всем постам у вас есть миниатюры изображений. Добавьте миниатюры ко всем постам на главной странице, и ошибка уйдет.
отсутствует url изображения
Это сообщение будет дополняться, вы можете задавать вопросы в комментариях.
Читать далее ...

2016-02-04

Textual description of firstImageUrl

Lightbox Blogspot CSS (меняем оформление)

Lightbox blogspot
В прошлом уроке я рассказала почему не может не работать lightbox в blogger. В этой статье мы будем изменять внешний вид лайтбокс в blogger.
Схема изменений:
лайтбокс-css схема
Для того, чтобы изменить оформление лайтбокс, вставьте код, приведенный ниже перед кодом ]]></b:skin>:
<style>
/* Цвет фона lightbox*/
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Граница изображения */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Кнопка закрытия */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(http://img-fotki.yandex.ru/get/9820/40839264.15/0_a95bd_c625f6eb_S.gif) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Цвет панели (Bar) */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}
/* Цвет текста */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* цвет текста панели (количество картинок) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}
</style>
Стиль, который приведен в примере, создает следующий вид лайтбокс – на белом фоне с закругленными углами картинок, серой панелью:

лайтбокс блоггер

Вы можете настроить lightbox на свое усмотрение, изменяя css
Если вы хотите использовать в качестве фона lightbox изображение, то в коде пропишите дрес фонового изображение:
background-image: url(image-url-address) !important;
Если вам нужна помощь в настройках лайтбокс на blogger, то пишите комментарии к записи.
Читать далее ...

2016-02-03

Textual description of firstImageUrl

Не работает Lightbox в Blogger

не работает лайтбокс
Вы уже наверное сталкивались с неработающим лайтбоксом (картинки открываются не в новом окне, а поверх всего содержимого блога) на blogger. Чтобы посмотреть лайтбокс в действии, нажмите на любую картинку в этой записи.
Читать далее ...
Textual description of firstImageUrl

Как скачать плейлист с youtube


Видеоблоггеры, да некоторые другие интернет-пользователи часто задаются вопросом: как скачать плейлист из youtube. Конечно, для этого есть специальные программы, но скачивание плейлистов обычно входит в платный функционал. Можно обратиться на торрент с целью получить желаемую программу с ключом бесплатно, но не забывайте, что кроме пиратской программы вы можете получить головную боль в виде троянского коня вируса.
В этой статье я предлагаю вам обходной путь – как скачать плейлист с youtube без платных, ломанных, пиратских программ. Для этого нам понадобиться:
  • любой браузер,
  • расширение savefrom.net скачать.
  • в некоторых случаях программа Download Master (например, при использовании браузера Opera старой версии). Эта программа поможет вам скачивать видео в несколько потоков. Скачать и узнать подробнее о загрузчике Download Master здесь.

Прежде всего вам нужно установить расширение savefrom.net. Оно легко устанавливается во все браузеры, кроме Google Chrome. Достаточно просто перейти на страницу сайта и нажать на кнопку “скачать”.
скачать расширение для скачивания плейлистов
После скачивания установить расширение, как показано на подсказках сайта.
установить расширение savefrom.net
В браузер Google Chrome расширение Savefrom.net устанавливается несколько иначе. Есть два пути, у меня заработал второй. Именно вторым способом у меня получилось встроить загрузчик плейлистов от savefrom.net. Опишу его подробнее:

Как скачать плейлист в любом браузере, коме старой версии Оперы

.. На странице плейлиста, который вы собрались скачать, нажмите на иконку расширения savefrom.net (справа от адресной строки), выберите пункт “Скачать плейлист”
скачать плейлист
и дальше следуйте, как показано на скринах:
  1. Здесь выберите размер видео или аудио файл:
    качество видео для скачивания
  2. подождите пока программа найдет видео, и нажмите “продолжить”:

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

Как скачать плейлист видео с Opera версии ниже 15

  1. Нажмите на иконку savefrom.net,
  2. нажимайте в открывающихся окнах кнопку “продолжить”, как и в других браузерах, пока не дойдете до окна со списком файлов видео. Нажмите на “список ссылок”:
    найдено файлов видео
  3. Запустите программу Download Master,
  4. вернитесь к расширению savefrom.net и скопируйте ссылки:
    список найденных файлов
  5. Они автоматически захватятся программой Download Master. Вам останется лишь поставить галочки в чекбоксах напротив желаемых файлов и одобрить закачку (кнопка ok). В следующем окне – выбор папки закачки видео из плейлиста.
    скачать все видео плейлиста
    добавить закачку видео в download master
Теперь вы знаете как скачать плейлист с youtube. Если у вас остались вопросы, то можете задать их в комментариях к статье.
Читать далее ...