Украшаем свой блог к Новому Году!

Happy New YearДавно я не писал новых статей. Все как-то времени не было... Но обойти такие события, как Рождество и Новый Год я просто не в силах! Оставить моих читателей без подарка я не могу :-)

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

Адаптация старых статей под функционирование в IE

Internet ExplorerПросматривая статистику посещений своего блога, я заметил, что подавляющее большинство моих читателей используют для интернет-серфинга Internet Explorer. Я бы не акцентировал внимание на этом факте, если бы не один нюанс - из всех популярных браузеров, IE остался единственным, кто не поддерживает вообще или поддерживает лишь частично некоторые команды JavaScript, что я использую в своих скриптах. Из-за этого его недостатка, очень многие фишки, что я здесь ранее описывал, на этом браузере не работают. И это непорядок!

Комментарии на статичных страницах

CommentsВы знали, что для статичных страниц можно прикрутить комментарии стандартными средствами платформы Blogger (Blogspot)? Я до последнего времени не знал! Даже не догадывался. Впрочем, у меня есть оправдание - я не собирался свои "статики" снабжать возможностью оставлять комментарии и, как следствие, не копал в этом направлении. А ведь есть и такие, кто и хотел бы прикрутить комментарии к статичным страницам, да не знает как. А все потому, что переключатель возможности публикации комментов для таких страниц интуитивно найти довольно проблематично.

Персональный ответ и цитирование в комментариях

QuoteМногие, кто прочесывал специализированные ресурсы, в поисках интересных фишек для платформы Blogger (Blogspot), встречали скрипт, позволяющий давать ответ на конкретный комментарий. Но он выглядел так убого, что большинство прошло мимо него, не заинтересовавшись.

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

Красивое оформление комментариев в блоге

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

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

Добавляем аватар анонимным комментаторам

AvatarВ комментариях на платформе Blogger (Blogspot), имеющих линейный формат публикации, для аватара пользователя выделено отдельное место. Но увы, в большинстве случаев это пространство пустует, так как читатели, комментирующие ваши статьи, зачастую подписывают свои комментарии при помощи аккаунтов, не имеющих аватара, или же, вообще, пишут анонимно.

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

Быстрый переход к форме отправки комментариев

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

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

Меняем сокращенное "коммент." на полное "комментариев"

CommentЭтой статьей я хочу начать небольшой цикл публикаций, посвященных оптимизации механизма комментирования на платформе Blogger (Blogspot).

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

Дата и время публикации для каждой статьи

TimeМногие пользователи платформы Blogger заметили, что при публикации нескольких статей в один день, дата над ними высвечивается общая. Только время публикации у каждой статьи свое. Мне, если честно, это сразу не понравилось. Захотелось, чтобы у каждой статьи был персональный шильдик, в котором бы указывалась дата и время публикации. Как вы видите из строки сразу под заголовком статьи, у меня это получилось! Настало время и вам узнать о способе сделать подобное...

Хочу сказать сразу, что этот способ покажется вам нестандартным и даже немного граничит с хакерством ;-) Мы задействуем недокументированную функцию платформы Blogger (Blogspot)!

SEO-оптимизация мета-тэга Description

Meta DescriptionНе так давно я рассказывал про оптимизацию тэга title. Думаю, пора копнуть глубже и заняться тэгом description. Это очень полезный мета-тэг. Информация из него обрабатывается поисковыми системами и помогает сформировать целевую аудиторию вашего ресурса.

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

Спойлеры в блоге

SpoilerВы знаете, что такое спойлер (англ. spoiler)? Нет, не тот, который на щетке лобового стекла автомобиля и не антикрыло для него же :-) Сейчас я говорю об элементе дизайна, что используется для сокрытия информации, которую читатель может увидеть лишь намеренно нажав на кнопку. Подобное может быть полезно, если спрятанную под спойлером информацию не нужно видеть всем (например, содержание фильма, на который читатель только еще собирается пойти). Или же, если текст статьи перемежается большими кусками вспомогательного материала, который не каждому интересен (например, сравнительные таблицы, куски кода, примеры).

Сейчас мы добавим возможность создания спойлеров и в наш блог!

Свой набор кнопок социальных сетей

Social ButtonsПолагаю, что большинство блогеров знает, для чего нужны кнопки социальных сетей (те, кто не знает, срочно идут знакомиться со статьей 'Правило трех "И"'). Разработчики платформы Blogger (Blogspot) не обошли вниманием этот вопрос, предоставив нам панель с наиболее популярными, по их мнению, кнопками. Но что делать, если стандартного набора нам недостаточно, хотя бы потому, что в нем нет кнопок популярных в России социальных сетей? Или, в случае, если нам не нравится дизайн этой панельки? Тут вам поможет эта статья!

"Анонимный комментирует..." меняем на...

AnonimousТе, кто использует в своем блоге на платформе Blogger (Blogspot) родную службу комментариев, сталкиваются с тем, что читателей, которые не подписались, система именует "Анонимный". Лично для меня это как-то некорректно выглядит - примерно как слово "нигер" в США. Куда лучше ведь назвать комментатора "Гость" или "Читатель". Слово "комментирует", тоже, я думаю, не всех устраивает. Можно же использовать "сказал(а):", "говорит:", "считает..." или "пишет...".

Что ж, думаю, настало время подогнать эти слова под свое мировосприятие :-)

Язык шаблонов Blogger: Тэги для подстановки данных

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

(Перевод материала Layouts Data Tags, дополненный мной)

Язык шаблонов Blogger: Тэги для содержимого виджетов

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

(Перевод материала Widget Tags for Layouts)

Язык шаблонов Blogger: Тэги для описания элементов страницы

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

(Перевод материала Page Elements Tags for Layouts, дополненный мной)

Убираем ссылку "Подписаться на: Сообщения (Atom)"

SubscribeВ стандартных шаблонах Blogger (Blogspot) внизу головной страницы присутствует ссылка "Подписаться на: Сообщения (Atom)". Изысканным дизайном она не блещет, информативностью тоже. Да и польза от нее под большим вопросом. Существуют же стандартные виджеты "Канал" и "Подписка", которые можно разместить на боковой панели. А многие, как я, например, вообще отказываются от стандартных виджетов подписки в пользу самостоятельно созданных HTML-блоков.

Скорее всего разработчики Blogger заключили какое-то соглашение на рекламу протокола Atom - почему и появилась эта нелепая ссылка в нижней части шаблона. А вот лично нам оно надо?

Изменяем ширину формы отправки комментариев

ResizeМало, наверное, среди блоговодов людей, у кого ширина основной ленты блога составляла бы всего 425 пикселей. Тем не менее, именно столько отмерили разработчики стандартных шаблонов Blogger (Blogspot) для формы отправки комментариев. Согласитесь, довольно нелепо смотрится маленькая форма отправки, жмущаяся к левому краю, на фоне самих комментариев, которые как и полагается, растянуты на всю ширину основного столбца.

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

Смайлики в комментариях

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

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

Заставляем работать виджет "Действия" в Opera

ReactionМногие в своих блогах на платформе Blogger (Blogspot) задействуют виджет "Действия" (в английской версии "Reactions"), с помощью которого читателю предоставляется возможность оценить статью. У меня вы его тоже можете наблюдать внизу каждой статьи, только под другим именем - "Оценка статьи".

Так вот, проблема в том, что стандартный вариант виджета "Действия" не работает в браузере Opera - показывается только название виждета, в то время как варианты оценки статьи не отображаются.

Красиво оформляем ссылку "Дальше »"

MoreДумаю, многие пользователи платформы Blogger (Blogspot) знают о ссылке "Дальше »" (в английской версии "Read more »"). Она появляется при использовании специального тэга <!--more-->. Тэг этот можно прописать как вручную, так и воспользоваться кнопкой "Вставить ссылку "Дальше" в WYSIWYG-редакторе, используемом в Blogger для публикации статей. Применение этого тэга обусловлено желанием автора блога существенно обрезать статью на главной странице, оставив ссылку на полную статью. Подобное полезно, чтобы излишне не растягивать интерфейс главной страницы полновесными статьями.

Опция, на мой взгляд, очень нужная. Но вот ее оформление подкачало...

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

FrameКаждому из нас хочется, чтобы его блог смотрелся по особенному, как-то выделялся на фоне остальных. Этому в полной мере способствует индивидуальный дизайн блога. Но иногда нам нужно выделить всего лишь какой-то абзац или фразу в тексте статьи. Когда это требуется раз-другой, можно и покорпеть над каждым конкретным случаем. А если подобное необходимо довольно часто, но при этом не хочется каждый раз затрачивать много сил на красочное оформление? Здесь нам на помощь придут готовые решения, которые мы можем интегрировать в шаблон нашего блога.

Оптимизация заголовков страниц блога

TitleОптимизация заголовков страниц (тэг <title>) - это очень важный момент для вашего блога. Обратите внимание, что формат заголовков статичных страниц и статей, предлагаемый стандартными шаблонами, строится по принципу "<Название блога>: <Название страницы/статьи>". А теперь представьте, что у читателя одновременно открыто множество вкладок с различными сайтами, среди которых затесалось и несколько ваших страниц. Что человек увидит из заголовков при обилии открытых вкладок? В лучшем случае он увидит только название блога (повезет, если не обрезанное), а название статьи, статичной страницы не влезет... И как читателю ориентироваться, что есть что?

Выбираем формат для картинки

Formats of picturesКак я уже писал ранее в статье "Правило трех 'И'", картинки являются неотъемлемой частью грамотного оформления ваших статей. К тому же, если вы выбрали не аскетичный вариант дизайна для своего блога, то и интерфейс оформления задействует графику. Посему, сегодня я решил поговорить о картинках. А точнее об облегчении веса картинки при минимальной потере качества за счет грамотного подбора формата, в котором картинка сохранена.

Для чего нам нужно так оптимизировать графику? Для чего уменьшать вес картинки? Все просто: чем меньше весят картинки, тем быстрее грузятся статьи вашего блога у читателей. А это, как вы понимаете, повышает в их глазах привлекательность вашего блога.

Как убрать Панель навигации (NavBar)

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

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

Как натянуть свою "шкурку" на шаблон

ШкуркиСегодня мы поговорим о скинах (англ. skins), в простонародье "шкурках".

Каждому из нас, блогеров, хочется выразить в блоге свою индивидуальность, сделать его полностью своим, непохожим на другие, отражающим нашу суть. Стандартные шаблоны, предлагаемые в Blogger (Blogspot) в этом нам, увы, не помогают. Что ж, будем их дорабатывать под наши нужды!

Что по сути из себя представляет "шкурка"? "Шкурка" - это набор элементов, которые нужно расположить в правильном порядке.

Правило трех "И"

Правило трех "И"Первая статья данного проекта обзорная. Для одних изложенный в ней материал станет хорошим зачином при создании своего сайта, для других же будет предельно очевидным и давно усвоенным. Но даже тем, кто давно знаком со всем, что изложено ниже, не мешает повторить ключевые моменты, чтобы освежить память. А то, бывает, смотришь на сайт: и существует он давно, и материал, вроде как, интересный, а читателей мало. А все почему? Потому что забыли об основах!

Итак, сегодня я хочу вас познакомить с ПРАВИЛОМ ТРЕХ "И".