Спойлер - как спрятать текст

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

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

Красивая ссылка на Twitter (Hovercard)

Hovercard - интересный jQuery плагин всплывающих подсказок.
Ну самими подсказками сейчас никого не удивить. Таких скриптов довольно много.
Один из примеров - vTip - простые подсказки title в тексте.
Но у Hovercard есть одна интересная функция, с помощью которой можно "по-взрослому" оформить ссылку на свой аккаунт в твиттере.

Красивая надпись для блога при помощи Textualizer

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

BoxyMenu

BoxyMenu - весёлые подвижные квадраты с ссылками, которые можно использовать как для навигации, так и в качестве альтернативы/дополнения к облаку тегов (либо в рекламных целях и т.д.).
Работает так: в виджете появляется полоска с надписями (у меня это "скрипты", "виджеты" и "фигня"), при нажатии/касании на любую появляется список ссылок и кнопка для их закрепления на странице.

Autolinks - Автоматические ссылки для блога

С автоматическими ссылками многие пользователи знакомы по форумам. Это когда при написании топика вы кидаете тестовую ссылку, а движок её преобразовывает в активную, т.е. "на выходе" через полноценный тег a. Насколько я помню, в природе встречался плагин и для Wordpress с такими же функциями.

Сегодняшний гость обзора - скрипт jquery.autolink.js. Он разработан для создания кликабельных ссылок из обычных тестовых (определяет ссылки по заданным по символам) и даже умеет подсвечивать заданные слова.

Меню для фидов (rss и atom)

Нашёл любопытное меню под названием jQuery Feed Menu.
Любопытно оно тем, что автоматически собирает из шаблона ссылки на фиды блога.
Конечно, в шаблоне с фидами должен быть порядок, а меню может быть полезно тем, у кого много всяких ссылок на фиды комментов, ярлыков, твиттера и т.д.
В последнем варианте можно подставлять руками любые ссылки, что наверное пригодится при создании какого-нибудь каталога. Область применения - любая html страница.

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

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

Как поставить значок к ссылкам

В прошлой статье я показывал, как выводить фавикон для внешних ссылок.
В этой заметке посмотрим на прикольный jQuery скриптик link_external_icon.js, который прилепит любой значок к ссылке, что позволит выделить её на ковре монотонного текста. Скрипт ставит картинку лишь в том случае, если найдёт target="_blank", что считается, в принципе, внешней ссылокой (хотя мы привыкли прописывать этот атрибут для любых ссылок, чтобы, не дай Бог, не потерять пользователя и не ростить проценты отказов).

Отображаем события Blogger и Twitter

Иногда на сайтах/блогах можно встретить на специальной странице или в виджете столбик отчётов об изменениях в блоге (добавил такой-то пост, оставил такой-то коммент, опубликовал в twitter'е такую-то запись).

3D Gallery - 3D слайдер для ссылок

3D Gallery - это jQuery слайдер карусельного типа. Вообще, этих слайдеров каких только не развелось, и до сих пор модно повесить такой в шапку блога. Я же вижу в них такой смысл:

• галеря изображений
• реклама свои постов
• крутилка рекламы

Данный слайдер стилизован под просмотрщик изображений в MacOS, и в качестве браузерной оболочки здесь выступает Safari.

Виджет фолловеров из Twitter для блога

Совсем недавно я писал про виджет читателей-followers в Twitter для блога. Назывался он "FanBox" и стилистически был похож на фейсбучный виджет друзей. Если подумать, виджет бесполезен, но многие используют для создания зрительного впечатления на посетителей блога и мотивации подписаться на обновления блога через Twitter.
Сегодня я нашёл ещё один аналог от code.moretechtips.net. Смысл виджета не изменился, но в этом есть генератор с кучей настроек.

Плагин ColorBox и Iframe

Ещё одна неохваченная обзором функция jQuery плагина ColorBox - это работа с фреймами.
Все мы знаем про фреймы и наслышаны об их пользах и недостатках. Фремы бывают внутренними (когда выводится страница со своего же домена) и внешние (кроссдоменные фреймы).
Два важных качества фреймов: они индексируются Яндексом (это и хорошо и плохо, по ситуации) и легко внедряются в тело статьи. Правда в нашем, рассматриваемом случае, поисковик никаких фреймов не увидит, а только ссылку, которую можно просто прикрыть атрибутом nofollow.

FeedEk - как разместить на странице содержимое любого фида

FeedEk - один из немногих feed-трансляторов, который умеет отображать не только текстовое содержимое rss/atom ленты, но и и графические элементы. То есть на веб-странице можно получить точные данные с любого фида.
Все это хорошо подходит для отображения новостей с других сайтов, общей ленты комментариев где-нибудь целиком на странице или виджете, ну или что-то, что придумаете сами =).
Одним словом, FeedEk - скрипт-парсер неиндексируемого поисковиками содержимого любого фида.

ColorBox - делаем слайдшоу и галереи (продолжение)

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

Модальное окно и скрытый текст с помощью ColorBox

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

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

Переключатель стилей - Stylesheet Switcher

Stylesheet Switcher - это переключатель стилей шаблона блога в реальном времени, т.е. без перезагрузки страницы. Вообще, это довольно старый jQuery плагин, и в каких только движках он не использовался.
Реализация простая: на основе базового css создаётся несколько разных файлов со стилями, прописываются в </head> как альтернативные с уникальным title, по которому с помощью html кода и скрипта будут переключаться.

vTip - простые подсказки title в тексте

Люблю я jQuery плагины подсказок (tips), неоднократно писал про них, хочу вернуться к этой теме и показать одну очень легковесную реализацию анимированно всплывающего облачка для текста статьи. Причём подсказку придумывать отдельно не нужно, она берётся из незаменимого для SEO атрибута title.
Называется сегодняшний гость: плагин подсказок vTip. Работает он на двух легковесных файлах: vtip-min.js (всего 700 байт) и vtip.css (260 байт).

Dnews - слайдер последних новостей из RSS ленты

Приглянулся мне тут один слайдер ссылок. Называется он Dynamic News и предназначается для показа заголовков любой валидной rss ленты со всплывающим фрагментом текста (то есть статьи).

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

Варианты использования в Blogger: динамический показ заголовков статей (фид определённого ярлыка) где-нибудь в футере или над статьями в html/javascript виджете блогспота. Правда на данный момент у меня лично Blogger отключил RSS, работают только Atom фиды.

Как создать страницу 404 для всех битых ссылок в Blogger

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

Sticky - плагин для закрепления элементов на странице

Sticky - плагин, работающий на jQuery, позволяет при прокутке вниз закреплять любые элементы, будь то картинки или текст и конечно же обрабатывать их стилями. Подобного эффекта можно добиться через CSS, используя параметр position:fixed... но не совсем :-).
Нужно это ли не нужно, не собираюсь спорить, но в арсенале у себя это скрипт оставлю. Тем более, что на основе это скрипта делалось немало интересных вещей.