rimonfotovivo: (Default)


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

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

Read more... )

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




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

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



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

Enjoy )

РЕ-ПОСТНАЯ КНОПКА
rimonfotovivo: (Default)
Давишняя идея - соорудить из опроса "лайковую кнопку"
сократив его до одной-двух позиций и раскрасив под button - снова всплывает [livejournal.com profile] nehludoff -
"зимы ждала, ждала природа" общественность ждет спасибной кнопы,
но похоже склоняется к тому, что опрос на "настоящий лайк" все-таки не тянет:
нажмешь - и нету пуговки, скучные линеечки вытягиваются.
А СУП не обнадеживает - дескать, все себе понаставят
и станут соревноваться в накручивании индекса лайкирования.

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

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

Вариант номер раз:
ссылка-картинка плюс обыкновенный счетчик для веб-страниц.

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

Счетчик абсолютно защищен от накруток!
(Потому что это совершенно бессмысленно - в исходных настройках можете сразу выставить хоть пятьдесят миллионов =)
Для произвести впечатление способ не пременим - что и требовалось!,
а для себя вполне: полюбопытствовать, сколько посетителей достали страницу из под ката -
наглядно, под рукой, не озадачиваясь статистикой из недр гугл-аналитекса;
или френда поддержать, лайкнув по кнопочке )

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

Заглянуть под кат )
И прочее блогостроительство по тэгу:
rimonfotovivo: (Default)
По итогам минувшего мини-конкурса http://fotovivo.livejournal.com/106822.html

удачнее всего в серию круглого-занятного вписалась группа товарищей
от [livejournal.com profile] lupersolski под девизом: "Сколько за бочок не кусай - отрастает" :)



К сиамским яблочкам присоединяется римоновый приз-сюрприз


настольный 3d-блокнотик, готов отправиться к победителю :)
(мой тотем; римон на иврите - гранат :)


И по традиции, остальные участники, зрители-ценители тоже не останутся без подарков ! :)


Выбери коробочку,
запости полученный сюрприз в комментарии или забери с собой
:





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

*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*:*


Как сделать поздравительный тест:

<table border="0" cellpadding="1px" cellspacing="18px"><tr align="middle"><td>
<div style="display: inline-block;  background: #edeff1 url(http://images9.fotki.com/v131/photos/2/2946372/12797981/donacM_001-vi.jpg)  no-repeat; width: 100px; height: 100px;  border: 1px dashed grey;"></div><form name="updateForm" action="http://ВАШЖЖ.livejournal.com/111111.html?mode=reply#add_comment" method="post"><input type="hidden" maxlength="100" tabindex="15" value="&lt;center&gt;&lt;a href=&quot;http://fotovivo.livejournal.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://files.myopera.com/rilus/albums/14980022/donacG_001.png&quot;&gt;&lt;/a&gt;&lt;/center&gt;" name="body" class="text" size="1" /><input type="submit" value=" ">
</form></td><td>
<div style="display: inline-block;  background: #edeff1 url(http://images60.fotki.com/v367/photos/2/2946372/12797981/donacM_002-vi.jpg)  no-repeat; width: 100px; height: 100px;   border: 1px dashed grey;"></div><form name="updateForm" action="http://ВАШЖЖ.livejournal.com/111111.html?mode=reply#add_comment" method="post"><input type="hidden" maxlength="100" tabindex="15" value="&lt;center&gt;&lt;a href=&quot;http://fotovivo.livejournal.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://files.myopera.com/rilus/albums/14980022/donacG_002.png&quot;&gt;&lt;/a&gt;&lt;/center&gt;" name="body" class="text" size="1" /><input type="submit" value=" ">
</form></td><td>
<div style="display: inline-block;  background: #edeff1 url(http://images15.fotki.com/v1624/photos/2/2946372/12797981/donacM_003-vi.jpg) no-repeat; width: 100px; height: 100px;   border: 1px dashed grey;"></div><form name="updateForm" action="http://ВАШЖЖ.livejournal.com/111111.html?mode=reply#add_comment" method="post"><input type="hidden" maxlength="100" tabindex="15" value="&lt;center&gt;&lt;a href=&quot;http://fotovivo.livejournal.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://files.myopera.com/rilus/albums/14980022/donacG_003.png&quot;&gt;&lt;/a&gt;&lt;/center&gt;" name="body" class="text" size="1" /><input type="submit" value=" ">
</form></td><td>
<div style="display: inline-block;  background: #edeff1 url(http://images19.fotki.com/v678/photos/2/2946372/12797981/donacM_004-vi.jpg)  no-repeat; width: 100px; height: 100px;   border: 1px dashed grey;"></div><form name="updateForm" action="http://ВАШЖЖ.livejournal.com/111111.html?mode=reply#add_comment" method="post"><input type="hidden" maxlength="100" tabindex="15" value="&lt;center&gt;&lt;a href=&quot;http://fotovivo.livejournal.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://files.myopera.com/rilus/albums/14980022/donacG_004.png&quot;&gt;&lt;/a&gt;&lt;/center&gt;" name="body" class="text" size="1" /><input type="submit" value=" ">
</form></td><td>
<div style="display: inline-block;  background: #edeff1 url(http://images60.fotki.com/v224/photos/2/2946372/12797981/donacM_005-vi.jpg)  no-repeat; width: 100px; height: 100px;   border: 1px dashed grey;"></div><form name="updateForm" action="http://ВАШЖЖ.livejournal.com/111111.html?mode=reply#add_comment" method="post"><input type="hidden" maxlength="100" tabindex="15" value="&lt;center&gt;&lt;a href=&quot;http://fotovivo.livejournal.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://files.myopera.com/rilus/albums/14980022/donacG_005.png&quot;&gt;&lt;/a&gt;&lt;/center&gt;" name="body" class="text" size="1" /><input type="submit" value=" ">
</form></td><td>
<div style="display: inline-block;  background: #edeff1 url(http://images116.fotki.com/v108/photos/2/2946372/12797981/donacM_006-vi.jpg)  no-repeat; width: 100px; height: 100px;   border: 1px dashed grey;"></div><form name="updateForm" action="http://ВАШЖЖ.livejournal.com/111111.html?mode=reply#add_comment" method="post"><input type="hidden" maxlength="100" tabindex="15" value="&lt;center&gt;&lt;a href=&quot;http://fotovivo.livejournal.com&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://files.myopera.com/rilus/albums/14980022/donacG_006.png&quot;&gt;&lt;/a&gt;&lt;/center&gt;" name="body" class="text" size="1" /><input type="submit" value=" ">
</form></td></tr></table>














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

Самые искушенные юзеры, заменив урлы картинок(выделено цветом), могут оформить тест по собственному вкусу :)

( -Чтобы сообщение отправлялось прямо в журнал пользователя, как в репостах, нужно немного по-другому прописать action, но мне более по душе система вольно-размещаемого комментария :)












rimonfotovivo: (Default)

Стильные стили и дивные div-ы



Содержание:
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили

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

Для любителей заморачиваться: Как написать код кнопки, шаг за шагом


На подступах к HTML ☛  )

Как выделить абзац цветом,
ровненько напечатать стихи по центру?
Сделать врезку с картинками?

Подбираемся к стилям ☛  )

Примерчик
"Доски объявлений" на DIV-ах:
( по мотивам популярных "верхних постов" ) -

Правила посещения блога

Резюме в трех экземплярах
с детальным указанием
причин явки - ОБЯЗАТЕЛЬНО!

Явка без
уважительной причины
-НЕДЕЙСТВИТЕЛЬНА!

ГРАФИК посещаемости
°
°
Список на отчисление
°
°
°





сертификaт об обрезании
предъявлять в развернутом виде!
☉              ☉
  ПЕРЕДОВИКИ ПРОИЗВОДСТВА
комментов
________________
__________
____


Отличники репо-заготовки:
    ▣ ▣ ▣ ▣ ▣ ▣ ▣


☉                                ☉
Дополнительный перечень требований


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


Только текст и форматирование, никаких картинок - попробуйте выделить и скопировать нижнее правое объявление ;)

Блоки с декорациями ☛ )



Стилевые эффекты применительно к ЖЖ ☛  )

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

Углы блока скруглить до такой степени, что он превратится в окружность.
Вставить изображение - а фон и границы при этом сделать невидимыми.
Анимированная картинка тоже годится, смайлик будет прыгать на спойлере :)
На что фантазии хватит.

Квадратные скобки вокруг ссылки никуда не денешь, разве что утопить их в фоне, слив его по цвету со шрифтом.
(На этот случай предпочтителен фон без градиента. На выпуклой кнопке маскировка менее успешна)

LJ-спойлерная кнопка своими руками ☛  )

Готовые примеры:

Снежок:

Развернуть ➽

Код для внесения в Custom CSS:



➽ стрелочка - шрифтовый элемент, в стили не входит;
таких псевдо-букв в таблице уникодов тьма http://unicode-table.com/ru/#geometric-shapes


Щенок

Читать дальше ➽


Код:




Сторож

Разбудить ➽






Капсула

 Принять... 






Цербер

Развернуть...






Беспокойная кнопка может даже носиться по полю :)

Развернуть ▷▷▷


<marquee behavior="alternate"  width="400px" height="102px"> <lj-spoiler title="Открыть!"> Этот текст будет скрыт.</lj-spoiler></marquee>

Код самой кнопки:




Для особого оживленной странички - целый выводок спойлеров гуськом:

Этот текст будет скрыт. ~o~Всякого тут понаписано.~o~Все те же~o~Конец.~o~Продолжение следует.


(Если не бегают, то у вас - Хром, он баловство с marquee не жалует http://fotovivo.livejournal.com/86586.html )
в отличии от прочих стилевых изысков, которые во всех расхожих браузерах -
выглядят примерно одинаково.


Есть отличный рецепт от http://journals-covers.livejournal.com/110085.html как осуществить аналогичный подход к лж-кату.























































("Живые" спойлеры - зеленые, щелкнуть - откроются, остальные - только внешний вид для примера :)

АПД Новогодние кнопочки: fotovivo.livejournal.com/100617

rimonfotovivo: (Default)
Секреты автозамены 2

Сижу на больничном, играю с АкелПадом.
Т.е. на работу да, а к внуку не, чтоб не надышать на них простудную бациллу.
От того и расписалась последнюю неделю, свободное время выдалось =)
Больше половины постов у меня на неистощимую тему "как я шла с работы",
но иногда по пути еще и на всякие мудреные изощрения пробивает.
Вот опять развело на тему ХТМЛства.
Знаю, что френды эту заумь не очень любят, но таки выложу, может кому и пригодится.


Есть в ЖЖ такая опция, как группы.



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

Техника ☛ )


◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘ ◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘



На случай, если кто вдруг заинтересовался автозаменительной эквелибристикой.
Предлагается задача:

Вот так выглядит в ЖЖ страница посетителей



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

Для тренировки. Полезно бывает на малознакомом поле поразмять мозговую мышцу. На упреждение.
Когда изменения (хас ве халила/не про нас будь сказано) станут заметны, поздновато спохватываться.

- Это по поводу тэга, как обещала в прошлый раз.


rimonfotovivo: (Default)
Грузите картинки бочками пачками - эквилибристика автозамены

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


Продолжение темы Как без хлопот запостить полсотни фот

Без предисловий и лирических отступлений - прямо к делу (работает при открытом кате):
                              Google-pikasa           Flickr

Лирика ☆☆☆☆ )


Free counters!
rimonfotovivo: (Default)
или Как без больших хлопот запостить полсотни фот-2

makro





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

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

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

Read more... )


Код кнопки устроен по тому же принципу блока с закруглениями (без картинок, только хтмл):


☞ ЖМИ!




Flag Counter

PS
А к чему пункт первый в метках - об этом следующим разом.

Profile

rimonfotovivo: (Default)
rimonfotovivo

November 2016

S M T W T F S
  12345
6789101112
13141516171819
20212223 242526
27282930   

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 18th, 2017 09:22 am
Powered by Dreamwidth Studios