060.gif


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

Read more... )

022.gif
взято
009.gif008.gif007.gif 006.gif 005.gif 004.gif

- Раздача гифов под аватарочки, первому, кто скажет - беру.
fotovivo

Новость с бородой до пола, не то что бы не знала - не обращала внимания.
Глупостями балуемся с Гугл-переводчиком:

Read more... )

fotovivo


АдБлок против «Промо» - кто кого. Первый раунд, на странице рейтингов, баннерорезка выигрывает
вчистую. Противник не сдается и коварно вписывается в обновленную френдленту, где прикидывается
обыкновенным дружеским постом, не выделяющимся в общем ряду, с минимумом опознавательных признаков.
Что может предложить AdB на этот случай?

Read more... )



Меняем шапку и фон журнала. Развлекаемся и проникаемся

1-й способ - простой и всем известный: выбрать дизайн с гибкими настройками, вроде выводка Chameleon-ов,
или Expressive, для которого есть целый конструктор от Yoksel - lj.yoksel.ru

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

Хотите взять что-нибудь минималистичное, вроде Sorbet Lavender, My News и задать
во всю ширь фон-подложку собственного сочинения? У Painterly поменять радикально-пурпурный
цвет линков? В Carousel вставить свою картинку?

Родная жжешная страничка - удобная модель для освоения веб-премудростей.

Read more... )

Кст про мой Flexible Squares любопытная вещь выяснилась: суповцы проговорились в комментах,
что в нем нет "промо" и не будет - если смотреть Ленту "в своем стиле" (поскольку ряд дизайнов
больше не поддерживаются - обновления к ним не применяются) мелочь, а приятно :)



В следующем сезоне: как сделать эффект,
как у Rainbow, а Top Secket не таким официозным
Реактивный истребитель сносит джинсу, баянчики и желтуху на главной:

Read more... )



В Хроме работает, если сначала ввести в адресную строку
java
script:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0)

а потом убрать пробел в "java script".

(Предварительно, разумеется, нужно стереть httр://www.livejournal.com//ratings/ или адрес полюбившейся странички)

ко вчерашней теме добавочка из мумми-сумочки

Если уж картинки можно наложить одну на другую, то надпись и подавно.

Read more... )


Не ждите чуда! Чудите сами!


Cамый простой способ:

Read more... )

Здрав-ствуй Де-ду-шка Мо-роз!


Мини-тест: пишем письмо Деду Морозу
(Разработчики рекомендуют писать серьезно!)

Внимание - звук!





Magic-Pen: рисуете снежки - они перекатываются.
Или блоки для снеговика. Сбить флажок - перейти на следующий уровень.



Пазл - Винни-Пух на снегу





В предыдущем выпуске рассматривали как позиционировать флеш на странице
- не там, куда его угораздит встать, а там где нам нужно; остановились на том,
что для размещения в ЖЖ код прописывается между тэгами <lj-embed id=""></lj-embed>.
Пора развить тему на предмет - где взять этот код или как его написать.


С картинкой или видео все умеют управляться - меню по клику "копировать ссылку" и в визуальном
редакторе - "вставить URL". Увы, с флешкой это не прокатит.

Есть два простых способа получить ссылку на интересующий swf-файл:
напрямую из кодов или воспользоваться сторонним сервисом.
Напр. сайт save2go.ru - вытаскивает прямые ссылки медиа-файлов со страницы по указанному адресу.

Найти в источнике - не многим сложнее:

fotovivo

Правой кнопкой мышки вызываем меню -> "посмотреть код"(Хром) /"исследовать элемент"(ФФ, Яб) -> открываем консоль,
щелчок по левому уголку консоли и щелчок по нужному элементу -> получаем строку с искомым адресом.
Копируем.
- Важно, что бы ссылка была с расширением .swf - это флеш.
Путь к файлу может быть скрыт под скриптом (оканчивается на. js), это нам не годится;
поисковиком можно найти такой же ролик или открытку на более сговорчивых сайтах,
обычно их копируют сотни раз (если это не что-то авторское-коммерческое,
с которым лучше и не связываться.)


Пишем HTML-код для вставки


Адрес файла у нас есть, как его теперь пристроить на свою страницу?

Подобно <img src="">для изображений,
для медийного файла есть соответствующий тэг <embed> в котором адрес подгружаемого контента
тоже прописывается в атрибут src="" (от Source, источник)

Полностью:
<embed src="httр:/адресвашегофайла.swf" type="application/x-shockwave-flash" width="300" height="260"> -
type - сообщаете браузеру чтоб приготовился грузить флеш; и задаете размеры окошка под это дело.

Это в самом минималистичном варианте, дополнительные параметры могут быть весьма развесистыми
(некоторые способствуют стабильной работе, некоторые для наших целей вообще лишние).
И не забудьте обернуть в жежешный: <lj-embed id=""></lj-embed>

У меня на странице embed присутствует вот в такой комплектации:

<lj-embed id=""><embed src="httр:/тутадресфайла.swf" quality="high" type="application/x-shockwave-flash" menu="false" allowfullscreen="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="ширина" height="высота"></lj-embed>

Хотя и без дополнительной оснастки тоже работает.


Существует аналогичный embed-у тэг object, записывается похожим образом (и они взаимозаменяемы):

<object type="application/x-shockwave-flash" data="httр:/адресфайла.swf"><param name="move" Value="httр:/адресфайла.swf"></object>

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

Напр. - код "гадательного шара" внизу:

<lj-embed id=""><object type="application/x-shockwave-flash"  data="http://img1.liveinternet.ru/images/attach/d/1//5011/5011503_mywar.swf" width="700" height="500">
<p>Упс.Тут была флешка</p>

<param name="menu" value="false"><param name="scale" value="noScale"><param name="allowFullscreen" value="true"><param name="allowScriptAccess" value="never"><param name="bgcolor" value="#4ca7fc"><param name="wmode" value="direct"></object></lj-embed>


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

рамку отрисовать, скругление уголков и еще сотню характеристик расписать на пол-страницы. Жужа их все равно не прожевывает.

Для флеша с прозрачным фоном (как часики в предыдущем посте) следует добавить параметр:
<param name="wMode" value="transparent"/>
но он тормозной, без cпециальной надобности лучше не пользоваться.



Упражнение для закрепления:

Попробуйте вытащить адреса флешек первым и вторым способом и вставить в запись с помощью тэгов embed и object:





оооооооооооооооооооооооооооооооооооооооооооооооооооооооо




Для самых искушенных - дополнительное: поменять фон часиков :)
(пользуясь материалами первой части)


Примечание -

исправлять настройки в коде флешки (передвигать, размер подгонять) можно сколько угодно, пока пост не отправлен.
Когда embed получит свой внутри-жжешный id= - исправить уже ничего не удастся. Если нужно отредактировать -
только снести всю флешку и вставить заново. А пользоваться предпросмотром можно свободно, не на что не влияет.

У ЖЖ особые отношения с параметром scale noScale, который запрещает масштабирование,
если его убрать - то подстроить нужный размер как хотелось бы - не даст lj-embed,
предустановленные настройки сжимают контент до небольшой превьюшки.

Код для вставки в профиль легко получить запостив флеш "под глазом", останется только перенести его в раздел "О себе".
Некоторые стили допускают НTML в сайдбаре (там, где есть поле для пользовательского текста), но не все.


А если у меня не видно флеш?

- Либо модуль АдобФлеш не установлен, отключен сознательно, либо браузер не дружит с флеш-плеером.
На последний случай есть подробные инструкции по настройке: для Виндовс и для Андроид.
Как вариант - излишне рьяная баннерорезка давит подгружаемый контент.


Спроси Шар


В предыдущих сериях:
★ Нарядим блог, как елочку
★ Как добавить к посту нижний колонтитул (отбивку между записями)
★ Новогодний спойлер. Конструктор спойлерных кнопок.
★ Как повесить на контрл-стрип то, что вы хотите, чтоб там висело
Подписаться на тэги (или метки) можно двумя способами -
- со страницы "зафренда"
http://www.livejournal.com/friends/add.bml?user=имярек



или с помощью функции "подписаться" в меню поста
(у меня конвертик в верхнем правом углу, в каждом дизайне свои фишки)

адрес этой опции:
http://www.livejournal.com/manage/subscriptions/entry.bml?journal=fotovivo&itemid=207732

В первом случае вы будете видеть во ленте только те посты автора,
которые отмечены соответствующим тегом.

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

- А зачем такое нужно?
Read more... )

Пример button-а (для дружеского сообщества делала) -




Подробно о дизайне кнопок - http://fotovivo.livejournal.com/149646.html
Действующая модель "гадания по книге"
(когда случайная строка на случайно выбранной странице дает наводку к задуманному вопросу -
Que sera, sera, судьба говорит загадками). Книга на этот раз - сетевая подборка пирожков-порошков


fotovivopirojokpirojok 2pirojok 3pirojok 4pirojok 5pirojok 6pirojok 7pirojok 8pirojok 9pirojok 10pirojok 11pirojok 12pirojok 13pirojok 14pirojok 15pirojok 16pirojok 17pirojok 18pirojok 19pirojok 20pirojok 21pirojok 22pirojok 23pirojok 24pirojok 25pirojok 26pirojok 27pirojok 28
Выбери пирожок - получи стишок


Read more... )
Под катом - как сделать такую игрушку в своем блоге.
Начало

Как добавить к посту нижний колонтитул

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

Смотреть пример

Read more... )


Со Старо-ново-годом! Счастья на весь год!
Как прикрутить картинку к заголовку поста,
в таком роде:


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

Read more... )


Клуб начинающих бабушек РЕ-ПОСТНАЯ КНОПКА






Ccылочка с разукрасом

<a style="padding: 25px 100px; font-size: 3em; font-weight: bold; color: #323299; text-shadow: 2px 2px 1px red; background: url(http://s003.radikal.ru/i201/1103/79/31d7fd28ba13.gif) no-repeat 2px;" href="httр://MY.livejournal.com/"> Ccылочка с разукрасом </a>
Вот такую растопыру:



Баннер исчез из "шапки" ЖЖ, то-то счастье )

Дальше "по китайски":

Read more... )

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



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


Вдогонку ко вчерашнему

Спойлерные кнопки своими руками

Read more... )

Само-репост из - Приручаем спойлер
Как повесить на контрл-стрип то,
что вы хотите, чтоб там висело

(АПД.
Предистория, для новичков в жж: незадолго до выхода поста СУП повесил на верхнюю полосу символику,
с которой не все оказались согласны. С другой стороны не все оказались согласны с несогласными.
Несколько кодовых строк решают проблему без споров и раздоров - каждый может украсить синюю притолоку журнала по своему усмотрению.)






Берёте картинку с прозрачным фоном,
(напр. по запросу "новогодний клип-арт", "гирлянда гиф")

На странице http://www.livejournal.com/customize/options.bml?group=customcss
в открывшееся окошко копируете код:



подставьте адрес своей картинки и соответствующие размеры (width - ширина height - высота)

Enjoy )

РЕ-ПОСТНАЯ КНОПКА
в превозданном виде.

Попросту, по-рабоче-крестьянски.
Не все знают, что у "сохранить как..." есть опция скачивания страниц "со всеми потрохами".

Read more... )
А как это все проделать на автопилоте,
не щелкая вручную на каждой из сотен страниц - в следующей серии.
"Падающие бабки" становятся мемом,
несколько раз натыкалась на непонятное - что за старухи такие валятся?
У [livejournal.com profile] paninina встретила текст, с чего пошло

Переписка по техзаданию

Capt1ure

Типа простота такая, все как договорились, тока еще это, это и вот это :)
На самом деле не бог весть задача, минута дела для профи.

Можем и себе замутить в таком роде =)

(Бабки падают только в самой записи, в ленте не видно)


Делается так:
заходим на страницу пользовательских кодов,

http://www.livejournal.com/customize/options.bml?group=customcss

копируем и вставляем туда вот такую конструкцию -

#entry-fotovivo-№№№№№{

displey:block !important;
position:relative;
z-index:1;
color:red;
}
#entry-fotovivo-№№№№№:before{
content: url(http://ic.pics.livejournal.com/fotovivo/19078119/65419/65419_original.gif); /* starushka */
position:absolute;
z-index:3;
left:-500px;
top:-700px;
width:178px;
height:173px;
}
#entry-fotovivo-№№№№№:hover:before {
transition: all 5s ease-in;
-webkit-transition: all 5s ease-in;
-moz-transition: all 5s ease-in;
-o-transition: all 5s ease-in;
-moz-transform: translate(1000px, 1000px);
-webkit-transform: translate(1000px, 1000px);
-o-transform: translate(1000px, 1000px);
-ms-transform: translate(1000px, 1000px);
transform: translate(1000px, 1000px);
}
#entry-fotovivo-№№№№№:after{
content: url(http://ic.pics.livejournal.com/fotovivo/19078119/136258/136258_original.gif); /* hvost */
position:absolute;
z-index:2;
right:6%;
top:0;
width:65px;
height:542px;
}
#entry-fotovivo-№№№№№:hover:after{
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}


Где "№№№№№" - номер текущего поста, а вместо fotovivo напишите свое.
Картинки можно утащить как есть или поменять на какие угодно.

Если там в окошке что-то уже имеется - пристраиваем добавочку снизу, стараясь не стереть
чего-нибудь ненароком (на всякий случай стоит сохраниться, в блокноте где-нибудь);
если у вас это в первый раз, то потренироваться на левом акке не помешает.

- Где взять номер поста?
- Только отправить по началу под глазом, и вписать полученный номер в CSS, иначе не как.

Но можно эффект подвесить к какому-нибудь другому элементу на странице,
к верхней полосе например, тогда фокус будет виден во всем журнале,
не только в одной записи.
(Имя элемента подскажет браузер - щелчок в выбранном месте -> по левому клику выпадающее меню -> находим что-то типа
"узнать код элемента"; "#entry-ИМЯ-№№№№№" заменим на его id или класс.

В некоторых стилях текущая запись может иметь id вида .asset-ИМЯРЕК-1234567 или .post-ИМЯРЕК-1234567
проверяйте в элементах кода)


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

Озвучку прикрутить тоже не вопрос,
просто я не люблю посторонних звуков на страницах

Да! Текст записи получится красным - это в тестовых целях,
после отладки color:red; можно убрать.




Кому позаморачиваться - велкам под спойлер =)
animashki

Обещанный мануал по виртуальному рукоделию

animashki

Используем всю ту же программу FastStone Image Viewer 5.3 Freeware
(См. Руководство по ресайзу)
Portаblе (сразу пойдет скачивание;
устанавливать не надо; работает откуда угодно, хоть с флешки)


На виртуальных сервисах более-менее успешно можно расцветить аватарочку,
добавить оживляж - дождик-снежок, кривляющуюся рожицу;
httр://picasion.com/ - прост как три копейки, тупо сращивает три кадра в анимированный гиф.
httр://avatar.pho.to/ru/hoarding/ с эффектами и фенечками.

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

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

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

А самое примечательное - не декларированная, но доступная возможность работать со слоями и масками,
в норме присутствующая у прог уровня Фотошопа.

При всем своеобразии, логику обращения с этими функциями в Фаст Стоун можно уяснить на паре примеров за один вечер, тогда как курс "ФШ за пол-часа" идет только в комплекте с "Игрой на арфе за пять минут" :)

Заглянуть под кат, +100500 схем и скринов ☛ )

Далее в программе - "Листопад". "Как делать фоны". "Раскадровка с клон-штампом". Оставайтесь с нами! :)

animashki

АПД.
Я не считаю, что "гифки - это пошло". Ребячество, да, не без того, не велик грех.
А изготовленное своими руками, адресату предназначенное - то и вполне душевно
(словами тоже не всем по силам избежать казенных выражений, кому-то открыточки лучше удаются).
Мелькающие аватары не особо одобряю, утомляют.
Если "прыгающие колобки" в ленте вконец достали - в ФайрФоксе и Хроме есть опция отключать анимацию, флеш и т.д, вплоть до полного отключения графики.
содержит не 60 и не 360 журналов.
В ТОПах который раз полоскают тему "списка активных израильских блогов",
кто-то куда-то вошел, кто-то не вошел, какие-то выводы делают из этого факта.

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

Бродят самопальные перечни "известных-популярных",
на которые общественность дружно ссылается и столь же дружно ругается

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

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

Результаты самого ЖЖ: даже тех, кто указал регион в "Интересах",
заметно больше предсказанного счетчиком
Ce


Но зачем гадательные скрипты, когда все данные в открытом доступе.

Хороший повод совершить -

Экскурс по гугло-поиску



и почерпнуть несколько полезных штук хозяйке на заметку

1sk

Оператор inurl: (буквально "в урле") ищет слово в адресе (то, что сразу за двоеточием, без пробела)

Заглянуть под кат ☛ )

Вывод тривиальный: рейтинги-списки-шорт-листы верстаются под конкретные запросы,
приписка "обновления производятся автоматически" ничего не гарантирует -
автоматику программируют люди, а людей есть интересы =)


Несложно прикрутить себе в журнал такую штуку -
Поиск по блогу
Яндекс

Коды раздает сам blogs.yandex

jaga

Занятный элемент нашелся на просторах развитого ХТМЛ
- рисует на странице кнопочку:

<button> Нажми на меня </button>

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

Такая же, да не совсем - для "бутона" можно определять стили:



раскрашивать - менять цвета и обрамление,
задавать фон картинкой, кучерявые шрифты, тени и скругления уголков;
button переносит стилевые издевательства, которые традиционная команда input напрочь игнорировала.

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

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

Повод поразмяться на тему Каскадные стили - это просто! -:)


   Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!

Read more... )

И классика жанра:



(в новую запись встроится пост про "Лайкаунтер")

Код "утащилки":
<a href="http://www.livejournal.com/update.bml?repost_type=c&amp;repost=http://UZER.livejournal.com/000000.html&amp;nodraft=1" target="_blank" data-service="livejournal" class="b-sharethis-item"><button alt="fotovivo.lj.ru" style="cursor:pointer; weight:105px; height:57px; color:#272b21; text-shadow: 2px 2px #fff, 3px 3px #5dfc60; font-size:0.85em"><img alt="fotovivo.lj.ru" src="http://ic.pics.livejournal.com/fotovivo/19078119/66580/66580_original.gif" style="margin-left:5px; vertical-align:middle" /> Утащить к себе</button></a>

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



Единственный доступный в жж-записи случай,
когда button работает по прямому назначению - активирует заданное действие:
открывает форму ответа и вписывает туда предустановленное значение -


Profile

rimon_fotovivo

April 2017

S M T W T F S
      1
23 4 5678
9101112131415
16171819202122
23242526272829
30      

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 23rd, 2017 12:39 pm
Powered by Dreamwidth Studios