Разные title и заголовок поста

Первое предупреждение перед прочтением: не применять на практике, если не знаете нужно это или нет. В большинстве случаев не нужно. Пока это больше рассуждения, чем рецепт.
И так, о чём же я?
В CMS, в частности, Yoom (и других), я встречал возможность делать заголовок поста независимым от title. Это хорошо в том случае, когда для поисковиков в название статьи нужно понапихать ключи, а читателям дать другой, более человечный заголовок.

Оформление цитаты в блоге - blockquote

Правильное оформление цитирования - очень хорошая привычка при ведении блога.
Цитаты должны отличаться от основного текста статьи и легко читаться, это не просто монотонный скопипастенный текст. Читатель должен понять, что вы хотите донести до него, уловить вашу мысль.

Для цитат есть специальный HTML тег blockquote. Его аналог в редакторе поста в Blogger - это кнопка с двойной кавычкой. Сама область с цитатой должна быть практичной, красивой, а не размахай на 1000px, как я видел на одном блоге.

Как вставить видео в Blogger

Про Youtube я в том году написал достаточно. Каких только способов не существует для вставки и проигрывания видеофайлов блоге (см. результаты поиска по блогу).
Вообще на Blogspot'е можно сделать посещаемый видеоблог (знаю качественные примеры) без каких либо затрат на хостинг и с очень грамотным оформлением. К последнему, надо сказать, видеоблогеры почему-то не прибегают.
И так, я рассматривал разные способы вставки видео с youtube в блог, а сегодня поговорим о стандартном способе: о том, который заложен в редактор сообщения.

Виджет "Топы" от Graddit.com

Graddit.com, сайт и сервис рейтингов для блогов, о котором я неоднократно писал, открыл для пользователей админку (веб-интерфейс/личный кабинет) с новыми интересными возможностями. Фактически это виджеты:

• рекомендаций
• топов (лучших постов, согласно оценкам или количеству просмотров)

Настройка виджета от Outbrain.com (памятка)

В этом блоге я использую виджет "Читателям также нравится" от очень известного сервиса Outbrain.
Разработчиками этот виджет предусмотрен в двух вариациях:

• в виде полосы с картинками
• в виде вертикального списка

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

Как переделать гаджет архивов в Blogspot

В Blogger среди виджетов есть почётный и самый старый виджет/гаджет - Архив блога. Он показывает в нескольких вариантах разделы блога. Это и есть самые настоящие категории, за которые мы привыкли считать ярлыки (теги):

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

Html5 и облако тегов TagCanvas

Зачётный скрипт TagCanvas 1.16 позволяет делать анимированные "облака тегов" с использованием изображений, ссылок и/или обычного текста (поддерживаются градиенты через скрипт). CSS не требуется (но можно сделать для цветного облака). И, на что обратить внимание: встроен зум (облако откликается на движение колёсика мыши).

Облако тегов разных цветов

Облако тегов (облако ярлыков или меток) - практически обязательный элемент любого блога. Это и элемент удобной тематической релевантной навигации и просто дополнительные понты к дизайну сайта. Несколько лет назад популярно было облако на flash технологии, ещё встречаются трёхмерные модельки на jQuery, но обычно блогеры и вебмастера используют упрощённый вариант с ипользованием CSS и встроенных средств своего движка.

Автоматический редирект на другую страницу

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

Плавающее сообщение для блога

Плавающих меню (об одном уже писал) и других элементов (стыренный у Борисова уголок) описано в блогах предостаточно.
Этот вариантик, который рассмотрим ниже, немного отличается тем, что основан он не только на CSS, но и использует лёгкую анимашку через библиотеку jQuery.

Как создать CSS кнопку

Все мы уважаем CSS кнопки (ссылки, оформленные стилями). Они выглядят эффектно, занимают мало место, привлекают внимание посетителя.
Например, самый распространённый кнопко - это "скачать" или download. Чтобы толковые и бестолковые (есть и такие) не прошли мимо (а то будут потом писать в комментах "а где обещанный файл?"), веб-мастера всячески старают акцентировать внимание на таких веб-элементах.

Как создать красивую HTML таблицу

Html таблицы существуют с давних пор и используются в вёрстке web-страниц по сей день. За последнее время было немало холиваров между "табличниками" (старая школа) и любителями div'ов, блочной вёрстки, но умные люди придумали такое понятие, как смешанная вёрстка (таблицами и блоками) и втихаря используют положительные стороны обеих школ.

Уголок наверху страницы при помощи CSS

В предыдущей заметке "Эффект загнутого уголка при помощи CSS" (в комменатариях) Дамир, автор блога Damir-tote.ru (кстати, вот его интересный конкурс) спрашивал, как сделать кликабельный зафиксированный уголок-картинку в самом верхнем углу сайта, "наподобие как у Александра Борисова".

Ну вообще создать такой средствами CSS не сложно: картинку надо отпозииционировать и закрепить (fixed) в нужной области.
Уголок я нашёл на сайте isif-life.ru, и как обычно бывает, благополучно, чисто из-за лени рисовать что-то своё, спёр.

Эффект загнутого уголка при помощи CSS

Мне очень понравился этот трюк: создание блоков с загнутым уголоком только при помощи CSS3, а точнее, добавление и позиционирование цветного флажка из псевдо-элемента.
В эти блоки можно помещать фразы/цитаты, оформлять и выделять какие-либо важные части текста и т.п.
Всё это безобразие обещано работать в Firefox 3.5 +, Chrome 4 +, Safari 4 +, Opera 10 +, IE 8 +.
Не буду тянуть резину, кому интересен процесс, могут заглянуть в статью первоисточника.

Share42 - Виджет кнопок социальных сетей для Blogger

В статье "Кнопки социальных сетей share42 для Blogger" я описал процесс получения скрипта c кнопоками и установку их в блог.
Судя по комментариям и письмам, не все справились с данной задачей, и возник ряд сложностей.

Гаджет "Follow by Email" или "Рассылка обновлений по электронной почте"

В наборе стандатартных блоггеровских гаджетов есть один любопытный виджет/гаджет в полурусифицированном состоянии под названием "Follow by Email" или "Рассылка обновлений по электронной почте".
Его функция такая же, как и у той формы, которая предлагается для установки в блог сервисом FeedBurner, только код сократили и изменили внешний вид.
Кстати, гаджет добавляется в блог всего один раз, и если у вас до этого не была создана лента в FeedBurner'е, он создаст новую.

Как вставить html код в статью

Меня засыпали письмами с примерно одинаковым содержанием: "как вставить код в статью, чтобы его было видно?".
Существует немало плагинов для подсветки/выделения кода внутри тела статьи, и самый известный из них, пожалуй, это SyntaxHighlighter (используется в этом блоге), а в одной из прошлых статей я описал ещё один под названием SHJS. Но чтобы их установить, нужно немного пораскинуть мозгами и посидеть за компом часов до 2-ух ночи.

Бегущая строка с помощью тега marquee

Тег marquee разработан для создания бегущий строки текста на странице без применения javascrypt средств, что в общем-то удобно, но это нестандартный тег.
Иногда этот тег встречается в редакторах на форумах, но широкого распространения не получил.
Тег поддерживает значительное количество атрибутов и почитать о них можно на htmlbook.ru.

Красивые заголовки статей в Blogger

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

Что за атрибут trbidi?

Ко мне несколько раз обращались с вопросом, откуда в редакторе сообщений Blogger вдруг возникает следующий элемент:
<div dir="ltr" style="text-align: left;" trbidi="on"></div>

Всё очень просто. Это активированная транслитерация, а именно написание текста слева направо.
Регулируется trbidi в редакторе сообщений Blogger на панели инструментов специальными кнопками ↓