Виджет архивов на всю страницу

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

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

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

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

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

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

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

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

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

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

BoxyMenu

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

Кнопка print для блога

Кнопка Print со значком принтера ещё встречается в шаблонах Joomla. В Blogger её редко делают, по крайней мере, я встречал только один раз.
Отвечу на приватное письмо этим постом.

Как сделать карту блога

В моём блоге это называется оглавление, но многие называют такой ковёр ссылок постов, сортированных по тегам, картой блога. За рубежом же это называется краткой аббревиатурой TOC (table of contents).
Эта карта нужна для того, чтобы пользователь мог сориентироваться в постах блога, рекламодатель и партнёр мог посмотреть тематику, и вообще такая страница уже стала обязательной практически на любом блого-сайте.
Сделать её не трудно, понадобятся только навыки копипастинга =).

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

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

Как защитить ссылку на email-адрес от спамеров

В продолжение заметки "Autolinks - Автоматические ссылки для блога" покажу, как можно с помощью очень котороткого скрипта защитить ссылку на email.
Предыдущий скрипт jquery.autolink.js нельзя назвать хорошей защитой для почтовых ссылок, поскольку в исходнике страницы полностью фигурирует линк вида mail@mail.com. По домену и собаке спам-боты (назовём их так) быстро определят ссылку почтовой и занесут в свою базу. Не знаю, как сейчас происходит получение ссылок, сканируются ли сайты, или ссылки "покупаются" в других местах, но защищать их надо.

Автотеги для Blogger

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

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

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

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

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

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

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

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

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

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

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

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

Как вывести для ссылки фавикон

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

Расшариваем картинки - Меню для правой клавиши мыши

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

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

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

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

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

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

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

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