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

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

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

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

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

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

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

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

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

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

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

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

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







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

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

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

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


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

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

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

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

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

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

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

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

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

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

Пример.

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



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

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

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

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

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



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

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

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

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

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

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

  понедельник, сентября 05, 2011  

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

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

Выглядит такая способность следующим образом:
+ + + + +

  воскресенье, сентября 04, 2011  

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

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

Пример этого замечательного виджета вы можете увидеть на страницах тестового блога.

  суббота, сентября 03, 2011  

Виджеты бегущей строки
В продолжении прежнего поста про придание тексту разнообразного движения предлагаю несколько готовых виджетов бегущей строки.

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

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

Размещение виджета бегущей строки в блоге.

Достаточно скопировать код к выбранному примеру движущихся строк и интегрировать в блог посредством гаджета HTML/JavaScript либо с помощью вкладки "Изменить HTML" непосредственно в тело публикуемого сообщения.

  пятница, сентября 02, 2011  

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

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

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

Дабы читатель имел представление о чем идет речь, привожу примерный вариант развития событий на изображении ниже:

Выделяем заглавные буквы заголовков в блоге

Таким образом, посредством одной небольшой правки шаблона вы сможете выделить одновременно все заглавные буквы:
  • в названиях сообщений,
  • в заголовках у виджетов боковой колонки;
  • в подписях даты.
Баловоство, но нам ничего не чуждо :)

  четверг, сентября 01, 2011  

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

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

Пример такого эффекта вы можете посмотреть ниже. Наиболее красочно неон смотрится на темном фоне.

BloggaRolla
BloggaRolla
BloggaRolla
BloggaRolla
BloggaRolla
BloggaRolla

  понедельник, августа 29, 2011  

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

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

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

Вариант 1:

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

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

  вторник, июля 26, 2011  

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

Достаточно разместить его с помощью гаджета HTML/JavaScript, как из шапки вашего блога, независимо от расположения гаджета, будет исторгаться небольшой снегопад пульсирующих сердечек.

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

  понедельник, июля 25, 2011  

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

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

Пример виджета переводчика:

Виджет онлайн-перевода в блог

  воскресенье, июля 10, 2011  

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

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

Изменение размеров часов выполняется путем внесения своих числовых значений в участки кода height="" и width="" скриптов часов.
Для корректной работы часов требуется поддержка Flash браузером.

Пример крутящихся часов:

   

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

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

В Blogger блок анекдотов устанавливается при помощи чудесного гаджета HTML/JavaScript.

   

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

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

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

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

Рабочий пример виджета "футбольных" часов:



   

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

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

Конечно, оформление данного блока анекдотов весьма и весьма аскетично, тем не менее, хорошим мироощущением читателей он способен обеспечить.

Пример виджета анекдотов:



   

Этот небольшой информер позволяет узнать подробные данные об IP-адресе, установленной операционной системе, стране и виде браузера пользователя вплоть до версии. Размер виджета-информера регулируется благодаря изменению значений width="" height="" в коде, опубликованном чуть ниже.

Пример информера:

IP
В блог виджет устанавливается с помощью гаджета HTML/JavaScript либо во вкладке "Изменить HTML" при создании страницы блога.

Код информера:
<img src="http://www.wieistmeineip.de/ip-adresse/?size=125x125" border="0" width="125" height="125" alt="IP" />