Настраиваемые кнопки: полезное

[Spitzer Igel]

Проходим: Настройки - Настройка сайта - Настраиваемые кнопки.
Инструкция по настройке кнопок здесь
В разделе Настраиваемые кнопки есть малозаметная ссылка на Библиотеку кнопок.
В Библиотеке кнопок находятся такие полезные кнопки, как Обтекание картинки текстом, таблица, красный цвет шрифта.

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

Значения цветов можно взять здесь.

Если вы в предыдущем треде поделились кодом, но я забыла вас указать, сообщайте!

Сноски

Название: Текст в сноске
Значение:

<span title="ТЕКСТ ПРИМЕЧАНИЯ" style="border-bottom: 1px dashed black; padding-bottom: 1.8px; cursor: help;">СЛОВО</span>*

Название: Сноска с картинкой
Значение:

<div style="display: inline;" class="withfloat"><font color="#A52A2A">СЛОВО</font><div class="flwin" style="margin-bottom: -200px;margin-right: 0px"><img src="АДРЕС КАРТИНКИ" width="50%;"></div></div>

Название: Сноска с картинкой и текстом
Значение:

<span class="withfloat" style="display:inline"><span style="color:#A52A2A; ">СЛОВО</span><div class="flwin" style="margin: 10px 0px;"><div style="padding-right: 15px; padding-left: 15px; padding-bottom: 5px; color: #000000; font-size:14px; line-height:20px; padding-top: 5px; background-color: #FFFFFF"><div align="center"> <img src="АДРЕС КАРТИНКИ" width="50%;"> 
КОММЕНТАРИЙ</div></div></div></span>

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

вставив в значении

<img style="max-width:ПРОЦЕНТ%;" src="АДРЕС" alt="НАЗВАНИЕ">

таким образом при необходимости вы легко нажмете на эту кнопку в процессе написания поста, добавите адрес нужной картинки в кавычки после src= и (опционально) название картинки в кавычки после alt= (оно будет отображаться в посте, если картинка не загрузится, что оч важно, если ваша картинка — не просто картинка, а еще и тег more).

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

От Леди*Ночь:
для изменения размера текста:
вот такое надо прописать в значении кода кнопки, вместо 25 можно поставить нужный вам размер. Написав текст, нужно выделить его и нажать на кнопку, чтобы все заработало.))

<span style="font-size:25px">[maRk]</span>[cuRs]

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

<font color="BlueViolet">[maRk]</font>[cuRs]

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

<img src="[maRk]" style="margin: 0pt 8px 0pt 0pt; float: left;" vspace="2" hspace="4" />[cuRs]

От lady snark:
Рамка для картинки
Я еще сделала там сверху отступ: если ставить несколько картинок одну за другой без пустой строки - между ними будет небольшой зазор (в половину строки). Но если вам это не нужно, просто замените в коде 5 на 0.

Иконка:

http://static.diary.ru/userdir/3/1/3/6/3136550/85341101.gif

Код:

<img src="http://[maRk]" style="border:1px solid black; margin-top:5px; margin-bottom:0px;" alt="image">[cuRs]

Цитата
Я специально сделала без курсива: не люблю большие тексты курсивом, да и в тексте может быть свое форматирование - чтоб не сбивалось. Если любите цитаты курсивом, можно просто вставить в начале и в конце

<i> ...</i>

Иконка:

http://static.diary.ru/userdir/3/1/3/6/3136550/85343821.gif

Код:

<div align=left style="margin-top:10px; margin-left:20px; margin-bottom:10px; padding: 6px; border-style:solid; border-width:1px; opacity:.7;">[maRk]</div>

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

http://static.diary.ru/userdir/3/1/3/6/3136550/85341099.gif

Код:

<div align="left">[cuRs][maRk]</div>

Линк
Иконка (с лошадью))

http://static.diary.ru/userdir/3/1/3/6/3136550/85343240.gif

Код:

<a href="[cuRs]">[maRk]</a>

Отступ
Иконка:

http://static.diary.ru/userdir/3/1/3/6/3136550/85343089.gif

Код:

<span style="padding-left:25px;">[cuRs][maRk]</span>

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

<ul> ... </ul>

Автор
Я обычно таким образом приделываю линк на источники: (c). Можно и знак копирайта поставить, но там неочевидно что кликабельно - а в таком варианте можно догадаться )).
Иконка:

http://static.diary.ru/userdir/3/1/3/6/3136550/85341133.gif

Код:

(<a href="http://[maRk]" alt="author" target=_blank>c</a>)[cuRs]

Оформление цитаты:

<span style="font: italic 14px Verdana; display: block; margin: 0px; padding: 7px; border-top: 1px solid BlueViolet; border-right: 1px solid BlueViolet; border-bottom: 1px solid BlueViolet; border-left: 5px solid BlueViolet"></span>

От mr_death:
Подсказка
Есть такой вариант подсказки

<span title="подсказка" style="border-bottom: 1px dashed grey; padding-bottom: 0.8px; cursor: help">текст</span>

Код вставки музыки:

<i>@музыка:</i> <object data= http://whiteheadman.narod.ru/webplayer-en/webplayer.swf type="application/x-shockwave-flash" width="240" height="64">
<param name="movie" value= http://whiteheadman.narod.ru/webplayer-en/webplayer.swf>
<param name="menu" value="false"> 
<param name="scale" value="noscale">
<param name="flashvars" value="src=[maRk]&autostart=no"></object>[cuRs]

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

@музыка:

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

От Bacca.:
Кнопка, позволяющая менять размер картинки в превью:
Без марков и курсоров, просто код. Там же на странице настройки кнопок их можно скопировать и добавить.

<a href="ссылка на картинку" target=_blank><img src="ссылка на картинку" width="сколько надоpx;"></a> 

Это код картинки, которая в оригинале на стороннем хостинге.

От  Ver/o/nika:

галочка и крестик

<img src="http://static.diary.ru/userdir/4/3/0/1/430184/84725119.png">
 [cuRs] 

<img src="http://static.diary.ru/userdir/4/3/0/1/430184/82739746.png"> [cuRs] 

Comments

[jihiri_kuro]

Обтекание картинки текстом у меня не работает:

Браузер Опера.

[Леди*Ночь]

Spitzer Igel, полезный пост, и будет здорово, если добрые пользователи продолжат делиться своими фишками.))
Вот только я не автор кнопок, которые принесла, кодировать не умею, но вот искать полезное - иногда да.) Я к тому, что может слово "автор" заменить каким нибудь, типа "кодом поделился", а то вдруг придет настоящий автор да как обидится!)))
А так то мне все равно, главное, что кнопки есть.))

И спасибо всем, кто делится своими.

[Леди*Ночь]

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

[Spitzer Igel]

Леди*Ночь,

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

Заменю чуть попозже

[jihiri_kuro]

Леди*Ночь, я отключала сроллинг, но у меня перестала работать настроенная кнопка превью для картинок из других источников. Теперь не знаю, умная я или красивая что мне нужнее!

[Ver/o/nika]

jihiri_kuro, а давайте мы в вашей кнопке покопаемся, авось починим)

[jihiri_kuro]

Ver/o/nika, думаете, что проблема в ней? Вот ее значение:

[MORE=<img src="[maRk]" width="120px">]<img src="[maRk]">
[/MORE][cuRs]

Я ее обнаружила в недрах Diary Tips, и она довольно старенькая.

[Ver/o/nika]

jihiri_kuro, и у нее есть лишний перенос строки в самом коде.

[MORE=<img src="[maRk]" width="120px">]<img src="[maRk]">[/MORE][cuRs]

Теперь проблем быть не должно.

[jihiri_kuro]

Ver/o/nika, это какая-то мистика, но в настройках кода кнопки этого переноса нет! Я, конечно, ваш вариант на всякий случай подставила, посмотрим, отразится ли это на ее работе.

[Ver/o/nika]

jihiri_kuro, я еще дома попробую сама кнопкой попользоваться, вернусь)

[Ver/o/nika]

jihiri_kuro, его может быть просто не видно, кстати. Из-за ширины блока.

[zverenysh]

Вау здорово! Спасибо за подборку!

[jihiri_kuro]

Ver/o/nika, почистила кеш, перезагрузилась — все работает, картинка обтеклась, превьюшки не поломались, смайлы опять стоят рядышком… ура!

[zverenysh]

Кстати вот здесь кнопочки для списка от волшебного рукастого человека
Пишет  Теодорик Ходячая Катастрофа:

17.11.2017 в 20:20

Простыня с кнопочками

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

http://teokataastrofa.diary.ru/js/ve/themes/advanced/images/indent.gif

честно спеёр из кнопки в визуальном редакторе
Значение:

<div style="margin: 0px 0px 0px 40px; ">[maRk]</div>[cuRs]

ею можно сразу всю часть списка, которой надо "понизить" уровень выделить и жмякнуть.
надо ещё один уровень ниже? просто то же самое второй раз!

а теперь сами маркеры, ими надо выделять построчно:

፨ Точки

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356979.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">፨ [maRk]</div>[cuRs]

ᐅ Треугольник 1

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356981.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">ᐅ [maRk]</div>[cuRs]

ᐊ Треугольник 2

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356982.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">ᐊ [maRk]</div>[cuRs]

🌣 Солнышко

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356987.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🌣 [maRk]</div>[cuRs]

💀 Череп

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356989.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">💀
 [maRk]</div>[cuRs]

🕱 И кости

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85357000.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🕱 [maRk]</div>[cuRs]

🖤 Сердце

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356990.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🖤 [maRk]</div>[cuRs]

⚫ Кружочек

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85357064.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">⚫ [maRk]</div>[cuRs]

⚪ Окружность

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85357078.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">⚪ [maRk]</div>[cuRs]

🖸 С точкой

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356991.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🖸 [maRk]</div>[cuRs]

☐ Пустой

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85357074.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">☐ [maRk]</div>[cuRs]

☑ С галочкой

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85357069.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">☑ [maRk]</div>[cuRs]

🗴 Крест

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356992.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🗴 [maRk]</div>[cuRs]

🗸 Галочка

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356993.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🗸 [maRk]</div>[cuRs]

🟊Звёздочка

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356997.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🟊[maRk]</div>[cuRs]

🡆 Стрелочка

Обозначение:

http://static.diary.ru/userdir/3/1/8/1/3181025/85356998.png

Значение:

<div style="margin: 0px 0px 0px 40px; ">🡆 [maRk]</div>[cuRs]

Кстати, к уже выложенным смайлам я бы рекомендовал прописать [cuRs] в конец, а то после нажатия на кнопку, курсор встаёт перед смайликом по крайней мере, у меня так, если в значении просто код вставки картинки

URL комментария

[zverenysh]

И про превращения картинки в нечто для "утаскивания" от того же автора:
Пишет  Теодорик Ходячая Катастрофа:

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

простынка

для примера взял первую попавшуюся картинку)

Вариант 1, под морем просто код с картинкой
Пример:

<img src="https://i.imgur.com/h6uCkMP.png" style="width: 149px; max-width:90%;" alt="кнопка">

Значение:
[CODE][more=[maRk]][CODE][maRk][/CODE][/more][cuRs][/CODE]

Вариант 2, под морем картинка и код
Пример:

<img src="https://i.imgur.com/h6uCkMP.png" style="width: 149px; max-width:90%;" alt="кнопка">

Значение:
[CODE][more=[maRk]][maRk] [CODE][maRk][/CODE][/more][cuRs][/CODE]

Вариант 3, это как 1, только со ссылкой
Пример:

<a href="ССЫЛКА"><img src="https://i.imgur.com/h6uCkMP.png" style="width: 149px; max-width:90%;" alt="кнопка"></a>

Значение:
[CODE][more=[maRk]][CODE]<a href="ССЫЛКА">[maRk]</a>[/CODE][/more][cuRs][/CODE]

Вариант 4, это как 2, только со ссылкой
Пример:

<a href="ССЫЛКА"><img src="https://i.imgur.com/h6uCkMP.png" style="width: 149px; max-width:90%;" alt="кнопка"></a>

Значение:
[CODE][more=[maRk]][maRk] [CODE]<a href="ССЫЛКА">[maRk]</a>[/CODE][/more][cuRs][/CODE]


значения ссылок проставляю автозаменой слова "ссылка" на саму ссылку

всем добра)

к сожалению, коде не ест кода, в которых уже есть коде,
поэтому пришлось так

URL комментария

[lady snark]

Полезная тема!

[*Bacca*]

Кнопка, позволяющая менять размер картинки в превью:

это моя)

[Spitzer Igel]

Bacca., указала

[*Bacca*]

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

[fotin@]

люди! а почему у меня эти кнопочки стали вот такие? я думала пару дней и настроится, но нет.
это временно?
ифчо - все надписи русскими буквами

[Ver/o/nika]

fotin@, сходите сюда, там ищут правду)

[fotin@]

Ver/o/nika, спс
надо переназвать все латиницей по ходу и вопрос снимается сам собой)

[Spitzer Igel]

Красиво выделить цитату
Пишет  Irinaki:

12.11.2017 в 23:41

maedhe, Olven,
держите)

<span style="display: block; margin: 3px 0px 0px 30px; border-left: 2px solid #817a85; padding-left: 4px; font-style: italic; color: #6d4a65">[maRk]</span>
[cuRs]

чуть больше инфы

пояснения:
margin - это отступы сверху, справа, снизу, слева
border-left - толщина и цвет полосочки слева
padding-left - расстояние между полосочкой и текстом
цвета можно подставлять любые

выделяете текст, тыкаете на кнопочку - и весь выделенный текст подставляется на место [maRk]
на всякий случай скрин take.ms/j7hwab

URL комментария

Пример:
На самом деле один и тот же китайский иероглиф 茶, обозначающий чай, на мандаринском диалекте континентальной части Китая произносится, как "chá", а на диалекте Min Nan, который распространен на прибрежной части Китая, произносится, как "te".