Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  четверг, марта 29, 2012  

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

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

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

  среда, марта 28, 2012  

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

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

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

Стильные кнопки на CSS в блог

  вторник, марта 27, 2012  

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

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

Пример стилизации ссылок при наведении.







   

Боковой виджет социальных сервисов Simple Counters
Продолжая тему бокового расположения социальных кнопок, хотелось бы рассказать о замечательном плагине-информере Simple Counters.

Автор сего замечательного творения обитает здесь. Там же (пардон за абсурдный каламбур) вы можете найти последние обновления виджета Simple Counters и при желании скачать исходники.

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

Виджет представляет собой фиксированную боковую панель с кнопками двух ресурсов - FeedBurner и Twitter, благодаря которым посетитель сможет легко подписаться и быть в курсе всех новостей блога. Но главным замечательным свойством Simple Counters, пожалуй, является предоставление обновляемой статистики в режиме реального времени, отчего вы всегда будете знать точное количество подписчиков блога в указанных сервисах.
Однако здесь кроется и небольшой минус: при пересчете статистики на самом сервисе FeedBurner счетчик плагина в это время будет показывать "0 (ноль)" подписчиков фида.


Пример боковой панели Simple Counters.


Плагин в действии вы можете подсмотреть прямо на этом блоге справа либо разглядеть его визуальное воплощение на скриншотах ниже:

Виджет-информер социальных кнопок Simple Counters

Виджет-информер социальных кнопок Simple Counters

  воскресенье, марта 25, 2012  

Боковая панель социальных кнопок
Стандартный блок социальных кнопок для "расшаривания" материала блога уже давно и незыблемо является неотъемлемым его атрибутом. Обычно он располагается сразу после статьи и представляет собой подборку иконок соответствующих ресурсов.

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

Об ее установке в блог мы и поговорим далее.

  суббота, марта 24, 2012  

Flash-игра The Great Massacre (Великая резня)
Резня во flash-игре The Great Massacre (Великая резня) и вправду предстоит быть великой и весьма дикой. Герою придется сокрушить бесчисленное множество врагов, и все ради того, чтобы вновь обрести однажды утерянное бессмертие.

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

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

Управление осуществляется с помощью клавиатуры, список приемов и перемещение вы можете подсмотреть непосредственно в самой игре.

Взмахнуть суровым тесаком:

   

Flash-игра Immortal Souls
Красочная и захватывающая flash-игра Immortal Souls поведает нам об извечной борьбе добра со злом и наоборот. Вам, как главному герою, отведена ключевая роль в искоренении скверны и полчищ демонических чудовищ. Миссия за миссией вам предстоит уничтожать различных монстров посредством пошаговых поединков.

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

Помимо прочего, в наличие имеется возможность постоянной прокачки статов, покупка нового снаряжения и остальные элементы, сопутствующие стандартным RPG-играм.

Ступить на путь света и добра:

   

Flash-игра Robokill 2 RPG
Увлекательная flash-игра Robokill 2 RPG заставит вас окунуться в мир роботизированных монстров и замкнутых пространств.  Robokill 2 RPG  привлекателен как графически, так и в игровом плане.

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

В данном flash-экшене присутствует множество миссий, заданий и разлетающихся гильз. Управление происходит клавишами W, S, A, D, захват цели и стрельба - мышью. С каждым повышением уровня робота будет доступно новое вооружение и более усиленная мощь его беспощадных автоматов.

Когда твои друзья - лишь механический кулак да ржавый автомат:

  пятница, марта 23, 2012  

Flash-игра Stick Wars
Flash-игра Stick Wars 1.3 не блещет великолепной графикой и прочим лоском. Однако в ней присутствуют некое очарование и самобытное исполнение игровой механики.
В центре событий непрекращающаяся война неких казуальных человечков, представленных двумя противоборствующими лагерями. Одной из сторон вам и предстоит руководить, раз за разом пытаясь уничтожить противника.

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

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

Управлять полчищами человечков:

   

Flash-игра Heroes of Mangara
Интересная flash-игра "Heroes of Mangara" в стиле фэнтезийного Tower Defense. Здесь игроку предстоит отбивать присущие этому жанру flash-игр полчища различных демонических супостатов, волна за волной пытающихся пробиться на другую сторону карты.

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

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

Встать на пути демонических созданий:

   

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

За основу идеи взят плагин jQuery Drop caption, с помощью которого можно выводить содержимое title у изображений в виде красочной, плавно всплывающей под курсором, подсказки с неким поясняющим картинку текстом.

Данное "украшательство" состоит из двух скриптов: собственно, самого скрипта dropcaptions.js, который реализует вывод всплывающей подсказки у изображений, и скрипта easing.1.3.js, позволяющий настроить и осуществить эту подсказку красиво. При желании, можете перезалить их на собственные файловые хостинги.

Плагин jQuery для красочных всплывающих подсказок у изображений


Живое демо


  четверг, марта 22, 2012  

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

Основные прелести последних нововведений заключены в появившейся возможности правки файла robots.txt вплоть до создания собственного, о чем еще раньше владельцы блогов от Blogger могли лишь тихо мечтать, с завистью посматривая на другие CMS. Также теперь возможно указать нужное описание для КАЖДОЙ страницы блога, прописывая соответствующие мета-теги к ней. Ко всему, пользователь сможет настроить свой вариант "Страница не найдена", когда посетитель блога случайно перейдет на несуществующую страницу блога.

Новые настройки Blogger для поисковых систем

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

Новые настройки Blogger для поисковых систем

При добавлении в текст ссылок появилась функция, с помощью которой можно сразу указать открытие ссылки в новом окне (тег target="_blank") и запрет на индексацию (добавление тега rel="nofollow") посредством простой маркировки галочкой.

Новые настройки Blogger для поисковых систем

Всеми нововведениями можно воспользоваться, проследовав в административной панели блога: Настройки > Настройки поиска.

Ай да Blogger, ай да чей-то сын!

  воскресенье, февраля 26, 2012  

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

Как правило, данный трюк "прокатывает" на стандартных шаблонах, потому как в остальных все привносимые в шаблон определения будут, по сути, отличаться от уже прописанных и не работать. Соответственно, все весьма индивидуально...

Пример того, что у нас может получиться:

Пример отображения иконок у ярлыков и комментариев в посте

   

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

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

Для достижения вожделенного эффекта достаточно добавить непосредственно в блог одну строку и, как бонусное действие, сохранить шаблон.

  суббота, февраля 25, 2012  

Небольшое вращение списка меню с помощью CSS
С помощью вмешательства CSS можно выделить любой список ссылок или обычной текстовой информации в блоге.
Один из таких органичных и стильных способов оформления мы и рассмотрим далее. Сам способ легко применим и основан только на CSS.

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

Визуальное воплощение трансформации ссылок меню при наведении:


  четверг, февраля 16, 2012  

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

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

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

Действующий пример скрипта всплывающей подсказки вы можете подсмотреть у любой соответствующей ссылки в этом блоге, но дабы свести до минимума физическое усилие по перемещению указателя мыши со стороны читателя, сокращу путь, предложив взглянуть на пример совсем рядом:
Загадка:
Какое слово начинается с трех букв "Г" и заканчивается тремя буквами "Я"?
Отгадка.

Загадка:
Назовите слово с пятью буквами "Ы".
Отгадка.

  понедельник, февраля 13, 2012  

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

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

По традиции, мы против несправедливости мира, а посему скажем дружно "Ай-яй-яй" разработчикам и попробуем исправить это досадное недоразумение. Тем паче добавить комментарии Disqus на статичные страницы блога довольно просто, как оказалось, потребуется всего лишь крошечная трепанация нескольких строк кода в шаблоне.

  воскресенье, февраля 05, 2012  

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

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

Таким образом, можно заставить контент блога быть относительно интерактивным к действиям посетителей.

Пример.

Ниже вы можете посмотреть это свойство ссылок в действии.



< Наведите курсор >

( Наведите курсор )

{ Наведите курсор }

[ Наведите курсор ]

\\ Наведите курсор //



Для достижения данного эффекта не потребуется никаких скриптов, все выполняется средствами CSS.

  суббота, февраля 04, 2012  

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

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

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

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

  пятница, февраля 03, 2012  

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

Для создания красивой рамки вокруг картинок в постах достаточно добавить в шаблон несколько строк кода.

Пример:

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

  среда, февраля 01, 2012  

Оригинальные счетчики RSS и Twitter с обновляемой статистикой
На сегодняшний день счетчики RSS (Фида) и Twitter являются важной частью блога и неотъемлемым элементом дизайна. Они предоставляют возможность немедленно подписаться на все обновления ресурса и следить за его новостными изменениями из большинства доступных сервисов. Ко всему они предоставляют наглядную статистику подписчиков блога.

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

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

Наш будущий виджет счетчиков может выглядеть так:

Оригинальные счетчики RSS и Twitter с обновляемой статистикой

Действующий пример возможно увидеть в правом верхнем углу тестового блога.

  воскресенье, января 29, 2012  

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

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

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

Тем не менее, приступим, собственно, к теме сегодняшнего поста. Заключается она в описании и интегрировании в блог одного из проявлений чудесных возможностей jQuery - оригинальном плагине jquery.hoverpulse.js. Суть его заключается в плавном увеличении изображений при наведении на них курсора мыши. А именно в эффекте, когда картинка очаровательно выезжает на передний план, увеличиваясь в заданных ранее размерах и не тревожа соседние элементы, а после увода курсора мыши принимает первоначальный вид. Выглядит все это весьма аккуратно и симпатично.

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

Плавное увеличение изображений при наведении с помощью плагина jQuery

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