Ваш блог не соответствует правилам программы AdSense

Опубликовано:
Очень многие пользователи Blogger, заинтересовавшись встроенной функцией монетизации через Adsense, в разделе прибыль сталкиваются с неактивной кнопкой "Зарегистрироваться в Adsense" и сообщением системы "Ваш блог не соответствует правилам программы AdSense".

Ваш блог не соответствует правилам программы AdSense

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

Основные требования:
  • регулярно публикуемый релевантный контент (без него просто невозможно заработать даже первую выплату)
  • наличие естественного трафика (без интереса аудитории заниматься контекстной рекламой просто бессмысленно)
  • авторский контент - тексты, фото и видео 
  • возраст индексации (как правило, 4-6 месяцев, в отдельных случаях до года)
  • соответствие рекомендациям Google для веб-мастеров и правилам программы Adsense

Ошибочные действия, чего не стоить делать:
  • создавать блог ради "пролезть в Adsense" и сугубо ради прибыли
  • создавать "видео-блог", основанный на копировании чужих видеороликов из Youtube
  • создавать блог из копипастов чужих статей (нарушение авторского права, правил программы Adsense и рекомендаций Google)
  • заводить блог, если нет сил и времени на него

Ярлыки:

Закрытие официального русскоязычного форума Blogger

Опубликовано:
Форум закрывается
Вчера компания Google объявила о закрытии нескольких русскоязычных форумов поддержки своих продуктов, среди которых оказался официальный форум Blogger.

Спешим предупредить всевозможные слухи о скорейшей "гибели" продукта на рынке - Blogger продолжает развиваться, и впереди пользователей ждут новые и интересные обновления платформы.

Из официальных ресурсов помощи Blogger по-прежнему функционирует англоязычный Blogger Help Forum - Google Product Forums, а также Справочный Центр (на русском языке).

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

Ссылка на новость о закрытии форума Blogger.
Следует добавить, что когда-то компания Google приняла аналогичное решение относительно Youtube, оставив только центральный форум в англоязычном секторе.

Ссылки по теме:
Закрытие форума поддержки Диска на русском языке.

Дополнение:
Техподдержка Blogger.

Ярлыки:

Интерактивная проверка ссылок между страницами блога, рекомендации по перелинковке

Опубликовано:

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

Откройте страницу сервиса, введите в поле запроса адрес статьи из своего блога, нажмите Старт. Примерно так будет выглядеть результат: Связи между статьями блога

Связи между статьями блога

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

Граф связей при путешествии вглубь ссылок

Большие картинки с жирными линиями связей — это статьи и ссылки, которые анализируются в данный момент. Маленькие картинки с тонкими линиями — данные с предыдущих шагов. Вы можете перемещаться по шагам назад и вперёд при помощи стрелок ← и → сверху (рядом с кнопкой Старт). Не обязательно кликать по ссылкам в правом блоке, можно нажимать прямо на картинки. Если картинки нет, а вместо нё показывается чёрный квадратик, значит в вашей статье её тоже нет. Наведите мышь на картинку, чтобы посмотреть адрес страницы:

Адрес страницы виден при наведении курсора мыши на картинку

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

Список статей с похожими метками

Blogger хорошо, а это работает с другими платформами?

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

На этом всё. Об ошибках сообщайте в комментарии к этой статье.


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

Опубликовано:
SV Kament - новый и быстро развивающийся сервис бесплатных комментариев для блога. Чем-то он напоминает всем известный Disqus и HyperComments, но в отличии от них SV Kament ориентирован "местную аудиторию", то есть учитывается специфика рунета.:
  • авторизация через российские соц.сети VK, Одноклассники, Mail.ru
  • админ-интерфейс на понятном русском языке
  • российский разработчик
Ознакомиться со всеми возможностями этих комментариев можете на этой странице.

Вот так выглядят комментарии:

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

Установка SV Kament

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

Перед началом правки кода своего шаблона не забудьте сделать его резервную копию!

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

У меня уже был аккаунт в SV Kament, поэтому регистрирую только блог:

SV Kament в Blogger установка

В этой форме нужно указать URL блога, его название и придумать название для внутреннего домена в системе (можно любое свободное).

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

SV Kament в Blogger выбираем универсальный код

Универсальный код имеет следующий вид:

SV Kament в Blogger получаем код комментариев

О том, как работать с редактором шаблона Blogger, читаем статью "Улучшения в редакторе шаблона Blogger".

Ваша первая боевая задача - открыть Блокнот (простейший редактор в Windows) и вставить его между строк:
<b:includable id='sv'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
СЮДА ПОМЕЩАЕМ КОД
</b:if>
</b:includable>
Таким образом для кода SV Kament мы создаём подключаемую секцию sv (см. Widget Tags for Layouts) с условием появления только на внутренних страницах, то есть на страницах сообщений.
Всё содержимое блокнота, то есть всю секцию копируем в свой шаблон рядом с другими секциями, например, на новой строке после:
<b:includable id='status-message'></b:includable>
В сложенном виде (чёрный треугольник-маркер в нумераторе строк) секции будут выглядеть таким образом:

Редактирование шаблона в Blogger

Вторая задача - найти в шаблоне футер поста, то есть его нижнюю часть, где будут транслироваться комментарии и вставить туда подключение секции:
<b:include name='sv'/>
Например, в шаблоне Simple место для комментариев нашлось после блока <div class='post-footer-line post-footer-line-3'>....</div>:

Установка кода комментариев SV Kament

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

Что касается Blogger, то родную систему комментариев нужно будет скрыть, чтобы не мешалась:


Возможна параллельная работа SV Kament с родными комментариями Blogger.

SV Kament - Часто задаваемые вопросы

Ярлыки:

Удаление блогов за спам

Опубликовано:
веб-спам

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

Естественно, что Blogger стал объектом  пристального внимания дорвейщиков и любителей быстрого обогащения. В связи с этим правила ведения блогов сильно ужесточились за последние 5-6 лет. Есть неофициальная коллекция нарушений и запретов от Ведущих Участников англоязычного форума Blogger, но и она не даёт детальной информации, за что же может быть наказан нарушающий блог.

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

И так, первое, что нужно знать, блокировки (то есть удаления) за спам осуществляет автоматическая система.  То есть никто специально не лазит и не доносит, всё производится пакетно в автоматическом режиме.

Второе - проверяются все блоги, но не все разом, и когда проверят ваш блог - это только вопрос времени. То есть, изначально создавать блог с нарушениями - пустая трата времени.

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

Какой веб-спам отслеживается в Blogger?

Конкретных запрещённых тематик нет, кроме явного адалта.  Но есть тематики, которые особо тщательно отслеживаются стоп-словами и некачественными ссылками:
  • forex
  • casino
  • online-заработок
  • кредиты
  • питание
  • биткоин
  • сетевой маркетинг
  • системы быстрого заработка
  • обзоры партнёрских сетей

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

Так выглядит сообщение о заблокированном блоге:

Блокировка блога за спам в Blogger


Дополнительные сигналы для системы блокировки:
  • нарушение Рекомендаций Google относительно качества сайта и контента
  • пессимизированные страницы в веб-поиске Google (фильтры Panda и Pinguin)
  • блоги, специально сделанные под рекламу Adsense (MFA)
  • блоги, сделанные под партнёрские программы
  • контент, нарушающий авторские права DMCA
  • автоматически сгенерированный контент
  • всплывающие окна, переадресация, некачественная реклама (тизерная реклама, pop-up)
  • отсутствие текста на страницах
  • копипасты (скопированное содержимое) с чужих сайтов
  • попытки  монетизировать страницы с видеороликами при отсутствии текстов
  • меры, принятые вручную (например, спам ссылками в чужих блогах и социальных сетях)
  • сеть блогов, ссылающихся друг на друга, с похожим содержанием
  • блоги с вредоносным ПО (трояны, malware)

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

Внимание! Любые "партнёрские" внешние ссылки обязательно закрываются через атрибут rel="nofollow"!

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

Примеры явных нарушений

Спам сомнительными баннерами с открытыми для индексации ссылками:

Спам на страницах блога

Классический спам рекламными блоками Adsense:

Спам объявлениями Adsense

Спам партнёрскими и реферальными открытыми к индексации ссылками:

Спам партнёрскими ссылками

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

Главное, что нужно хорошо усвоить и запомнить

Blogger - платформа пользовательских блогов и корпоративных блогов, где монетизация не стоит на первом месте. На рекламе можно зарабатывать, это не запрещено, но при условии, что:
  • реклама качественная (Google Adsense, Рекламная сеть Яндекса)
  • реклама не мешает пользователю
  • блог создан для пользователей, а не для поисковых систем
  • блог создан для людей, а не для заработка путём манипуляций в поисковой выдаче
  • на блоге присутствует только авторский контент
  • блог не нарушает авторских прав 

Ознакомиться:

Полезные ссылки:

Ярлыки:

Виджеты, которые должны быть в каждом блоге

Опубликовано:
Сегодня команда Блогопоиска представит вашему вниманию список виджетов, которые обязательно должны быть установлены в каждом блоге не только на платформе Блоггер, но и на Вордпрессе, Друпале, Тумблере — везде, где есть возможность устанавливать сторонние виджеты. Вот они:
  1. Бегущая строка. Это самое первое, что увидят ваши посетители, поэтому нужно в неё поместить название блога. Или просто приветствие, чтобы им было приятнее. Лучше, если она будет мигать, это привлекает больше внимания.

    Здравствуйте! Добро пожаловать в наш блог!
  2. Часы. Системные часы пользователей часто идут неправильно, быстро рассинхронизируются. Если вы разместите в блоге виджет часов, который всегда будет показывать точное время, посетители будут вам очень благодарны. Есть и ещё один весьма положительный эффект. Поисковый тренд этого года — поведенческие факторы. В своём недавнем интервью один из ведущих разработчиков поисковой системы Гугл заметил, что такие виджеты очень хорошо сказываются на поведенческих факторах и рекомендовал размещать их как можно выше в сайдбаре.

  3. Календарик. Люди очень часто забывают, какой сегодня день. Спросите себя, как часто вы сами не можете вспомнить ни то что число, а даже день недели. Так что календарик окажет неоценимую помощь. Можно даже сделать календарик с аквариумом — рыбки успокаивают.

  4. Карта посетителей. Этот прекрасный виджет покажет, с каких точек земного шара пришли к вам в блог люди. Что может быть ценнее, чем почувствовать себя не одиноким? Однако, берегитесь, потому что виджет содержит внешнюю ссылку на сайт разработчика. Как неоднократно уже было замечено на форуме поддерки Гугла, внешние ссылки передают PR вашего сайта, потому рекомендуем код виджета заключить в теги <noindex><nofollow>здесь код виджета</nofollow></noindex>

  5. Летающая птичка твиттера. Люди любят животных, так летающая по странице птичка им очень понравится. А если её поймать, то откроется твиттер с заранее заданным вами текстом.
  6. Снежинки. Летом напоминают о прохладе, зимой добавляют уюта.
  7. Радио. Хороший блог должен и звучать хорошо. Список радиостанций с возможностью их послушать — прекрасный вариант разбавить гнетущую тишину блогосферы. Кстати, посетители будут оставаться на вашем блоге дольше, чтобы дослушать песню или передачу.

  8. След за курсором. Всем уже давно надоели банальные стандартные курсоры. Продвинутые блоги заменяют обычные курсоры на что-нибудь интересное. Или хотя бы добавляют красивый след.
  9. Котики. Многие любят котиков. Виджет в виде котика, следящего за курсором — это очень весело. Самый шик, если котик будет играть с курсором или ластиться, но такой виджет нам найти не удалось. Пишите в комментариях, если знаете, где взять.

  10. Разрушитель. Ну и напоследок. Интернет — место жестокое, будьте готовы к тому, что ваш блог кому-то может не понравиться, такие невежды даже могут оставить негативные комментарии. Даже такую негативную энергию можно направить в нужное нам русло. Дайте пользователю возможность виртуально "уничтожить" ваш блог, в этом случае негативная энергия будет растрачена, и, возможно, ссылкой на блого с такой замечательной функцией даже поделятся где-нибудь вконтакте, твиттере или гуглеплюсе!


Ярлыки:

Как добавить блог в Яндекс

Опубликовано:
Как добавить блог в Яндекс

Внимание! Update от 24.07.2014. Данная информация устарела! Рекомендуется привязать к блогу и добавить (по инструкции ниже)  в Вебмастер собственный домен!

В виду того, что ситуация с бесплатными доменами изменилась в лучшую сторону, пишу руководство по добавлению блога (с бесплатным доменом) на Blogger в Яндекс заново.

Первое - нужно определиться с доменами.
  • domain.blogspot.com - это настоящий канонический адрес блога
  • domain.blogspot.ru - про региональное зеркало блога, этот адрес вы видите находясь в России; для Франции, например, зеркало блога будет выглядеть так - domain.blogspot.fr

В поиске, что Google, что Яндекс, участвуют только канонические url страниц.

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

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

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

Пятое - обязательно добавьте блог в Яндекс Вебмастер и подтвердите права на владения сайта с помощью мета-тега.

Пошаговое добавление блога в Яндекс Вебмастер
Все скриншоты кликабельны.

Шаг первый:

Добавляем блог в Яндекс Вебмастер

Добавлять следует строго адрес domain.blogspot.com.

Шаг второй:
Появится предупреждение, что выполняется переадресация:

Предупреждение в Яндекс Вебмастер

Жмём на крестик в верхнем правом углу, и Вебмастер перебросит на следующую страницу.

Шаг третий:
Подтверждаем права на владение сайтом при помощи мета-тега:

Подтверждение прав в Яндекс Вебмастер

Установив его в шаблон (Шаблон - Изменить HTML) перед закрывающим тегом </head> :

Устнаовка мета-тега в шаблон Blogger

Шаг четвёртый:
После проверки корректности и наличия мета-тега Вебмастер выдаст сообщение, что сайт успешно добавлен в очередь на индексирование:

Яндекс Вебмастер добавить блог
Подобная надпись будет и в общем списке ваших сайтов http://webmaster.yandex.ru/sites :

Яндекс Вебмастер статус индексации

В списке  такой сайт отображается пока без фавикона. Через некоторое время (дней 5) статус сменится на:

Статус индексации

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

В это время имеет смысл добавить ваш блог в Яндекс блоги через эту форму http://blogs.yandex.ru/add.xml.

Спустя две недели (примерно) добавленный блог в Вебмастере примет следующий вид:

Яндекс Вебмастер статус индексирования

Пока блог молодой имеет смысл пинговать каждую новую запись http://blogs.yandex.ru/pings, и обязательно добавить sitemap.

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

Полезные ссылки:

Ярлыки:

Как удалить гаджет (виджет) в Blogger

Опубликовано:
Есть несколько способов удаления гаджетов (виджетов) в Blogger. Имейте ввиду, что тренироваться и отлаживать гаджеты лучше предварительно на тестовом блоге. Так же нужно помнить, что сторонние гаджеты не гарантируют стабильной работы и могут вызвать   надоедливую  ошибку типа bX-xxxxx, поэтому перед установкой сделайте резервную копию своего актуального шаблона. В тяжёлом случае (ошибки при работе в редакторе шаблона) резервная копия восстановит работоспособную версию шаблона.

Об официальных и сторонних гаджетах

Официальные гаджеты - все гаджеты из раздела Основные и три гаджета (Постоянные читатели, Википедия, Форма для связи) из раздела Другие гаджеты:

Официальные гаджеты Blogger

Гаджеты от сторонних разработчиков


Полное описание официальных гаджетов представлено в статье "Путеводитель по гаджетам Blogger". В ней перечислены все идентификаторы основных гаджетов.

Рассмотрим удаление гаджета на примере стороннего гаджета Fish (рыбки):

Гаджет рыбки
Гаджет Рыбки

Удаление ненужных гаджетов (виджетов)

Способ первый*.
В админ-интерфейсе на вкладке Дизайн открываем гаджет и удаляем встроенной кнопку "удалить":

Удаление гаджета через интерфейс Blogger

Что делать, если кнопка "удалить" отсутствует? См. примечание внизу.

Способ второй.
В админ-интерфейсе на вкладке Шаблон открываем редактор шаблона (Изменить HTML) и в списке виджетов выбираем нужный гаджет. В данном случае это Gadget1:

Редактор шаблона Blogger

Редактор шаблона покажет гаджет в свёрнутом виде.

Гаджет в редакторе шаблона Blogger

Маркер возле шкалы нумерации строк по нажатию развернёт код гаджета полностью.

Ваша задача в данном случае - удалить полностью весь гаджет: то есть всё, что находится внутри тегов <b:widget ....> и </b:widget>. Это можно сделать аккуратно как в свёрнтом виде, так и развёрнутом.
После удаления не забудьте сохранить изменения в шаблоне.


*Примечание к первому способу удаления.
Отсутствие кнопки "удалить":

В виджете нет кнопки удалить

Такой гаджет является заблокированным. Отвечает за это атрибут locked тега widget:


Он может иметь два состояния:
  • true (истинно)
  • false (ложно)

Соответственно, чтобы в настойках гаджета появилась кнопка "удалить", атрибут locked должен ровняться false.

Полезные ссылки:

Ярлыки:

Ручная установка LinkWithin

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

Установка LinkWithin в Blogger

Сначала получаем код на официальном сайте виджета www.linkwithin.com.

Получаем код LinkWithin

Заполняем email, ссылку на блог и выбираем кол-во тамбнейлов (превью) в виджете похожих сообщений. Платформой нужно выбрать other - другая. У кого тёмный шаблон в блогк, может поставить последнюю галочку.

Нажимаем Get Widget!  и получаем код такого вида:
<script>
var linkwithin_site_id = 509897;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
Обратите внимание на состав кода.
В первом скрипте мы можем найти свой id (уникальный номер в системе) в LinkWithin.

Теперь переходим в админ-панель Blogger, в Шаблон - Изменить HTML и через поиск по шаблону (нажать на любом месте кода + комбинация ctrl+F, в появившемся окошке ввести запрос) находим низ (футер) поста. Как правило, это <data:post.body/>, либо <div class='post-footer-line post-footer-line-3'> или <div class='post-footer'>. Проверить нужно сначала опытным путём, введя в шаблон абракадабру и посмотреть, появилась она в желаемом месте или нет.

Помещаем код, полученный на сайте LinkWithin в условие только на страницах сообщений, то есть внутри постов (скриншот кликабелен), затем в футер поста:

Установка LinkWithin в Blogger

И сохраняем шаблон.

Готово:

Демонстрация LinkWithin

Русификация LinkWithin

В скрипте параметра после var linkwithin_site_id = 509897; добавить: linkwithin_text='Похожие сообщения:';
То есть код полностью будет выглядеть вот так:
<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = 509897;
linkwithin_text='Похожие сообщения:';
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
</b:if>
Процесс настройки внешнего вида виджета LinkWithin описан в статье "Customize LinkWithin Stylesheet - Add Some colors!".
Html-цвета для текста ссылок, надписи и фона в виджете можно сгенерировать здесь.

Ярлыки:

Параллакс эффект в Блоггере

Опубликовано:
Боромир объясняет нам концепции Блоггера

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

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

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

Что нам понадобится:

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

Вы увидите, как картинка замедляется, а текст снизу не неё наползает. Интересный эффект, не так ли? Разберёмся, как его повторить.

Для начала, убедитесь, что jQuery подключен. Затем добавьте следующие стили в шаблон:

  .parallaxed-wrapper {
    width: 100%;
    position: relative;
  }

  .parallaxed {
    position: relative;
    z-index: 1;
  }

  .parallaxed-overlay {
    position: relative;
    z-index: 2;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 3%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(3%,rgba(255,255,255,0.2)), color-stop(15%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
  }

Теперь в конец статьи, где вы хотите показать данный эффект (либо в шаблон после post.body, если нужно, чтобы эффект работал во всех статьях сразу) добавьте такой скрипт:

<script type="text/javascript">
  (function() {
    var startTopPosition = 150;
    var scrollBy = 0.6;
    var parallaxed = $('.parallaxed');
    $(document).scroll(function(event) {
      var scrollEvent = event;
      parallaxed.each(function(event) {
        var element = $(this);
        var parent = element.parent();
        var posTop = element.parent('.parallaxed-wrapper').offset().top - $(window).scrollTop();
        var posLeft = element.offset().left;
        var scrolledToBottom = $(window).scrollTop() + $(window).height() == $(document).height();
        if (posTop < startTopPosition && !scrolledToBottom) {
          var newTop = (startTopPosition - posTop) * scrollBy;
           element.css({top : newTop});
          if (posTop < -parent.data('height') * scrollBy) {
            element.css({visibility : 'hidden'});
          } else {
            element.css({visibility : 'visible'});
          }
          element.parent().css({height : parent.data('height') - newTop / scrollBy / 2});
        } else if (posTop > startTopPosition) {
          element.css({visibility : 'visible', top : 0});
          element.parent().css({height : 'auto'});
        }
      });
    });
  })();
</script>
Когда всё будет готово, со значениями переменных, выделенных красным цветом, можно будет поиграть, чтобы добиться нужного именно вам эффекта.
startTopPosition = 150 говорит о том, что эффект начинает действовать, как только картинка будет на расстоянии менее 150 пикселей от верхей границы экрана;
var scrollBy = 0.6 - коэффициент замедления.

Теперь про разметку статьи. Да, чтобы это всё заработало при составлении статьи нужно будет учитывать, что на что и в какой момент будет накладываться. Сама картинка должна иметь класс parallaxed и быть обёрнута в элемент с классом parallaxed-wrapper, вот так (пример из данной статьи):

<div class="parallaxed-wrapper" data-height="400">
  <img class="parallaxed" width="100%" src="http://2.bp.blogspot.com/-VxiU5uJQRgw/UvqmdwB5YdI/AAAAAAAAAlA/B2S8AouijUs/s1600/open.jpg"/>
</div>

Далее обратите внимание на data-атрибут обёртки: data-height="400" — в общем случае он должен быть равен высоте картинки, но может и отличаться от неё. Это значение так же влияет на то, как будет проявляться эффект. За обёрткой следует элемент с классом parallaxed-overlay, включаеющий в себя один или несколько элементов, которые будут перекрывать картинку. Посмотрите исходный код данной страницы, чтобы понять, о чём идёт речь.

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


Ярлыки: