Оформляем аннотацию (ссылки, кнопки)

Автор: Наталья Изотова / Добавлено: 30.05.18, 16:28:13

1. Ссылка в аннотации

Код:

<a href="АДРЕС ССЫЛКИ">ТЕКСТ ССЫЛКИ</a> 

 

Выглядит это так:

2. Маленькая голубая (зеленая, красная, желтая) кнопка

Определяющая часть выделена соответствующим цветом.

 

Код  для голубой:

<a class="btn btn-info" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Выглядит так:

Код для зеленой

<a class="btn btn-success" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Код для синей:

<a class="btn btn-primary" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Код для желтой:

<a class="btn btn-warning" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Код для красной:

<a class="btn btn-danger" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Код для белой:

<a class="btn btn-default" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Код для лиловой:

<a class="btn btn-purp" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

 

3. Большая лиловая или синяя кнопка, кнопка с закругленными краями

(автоматически подстраивается под ширину окна)

 

Код:

<a class="btn btn-purp btn-block" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Выглядит так:

Код для синей: 

<a class="btn btn-primary btn-block" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

Код для закругленной кнопки любого цвета и ширины:

<a class="btn btn-block" href="АДРЕС ССЫЛКИ" style="background-color:#F08080; color:#fff; font-weight:bold; border-radius:90px; height:60px; line-height:60px; padding:0;">ТЕКСТ КНОПКИ</a>

 Если вы хотите такую же кнопку, просто скопируйте код в окне.

 

Если хотите изменить, то давайте немного разберемся, что за что отвечает:

style="background-color:#F08080 - цвет фона, самой кнопки

Это цвет фона, в данном случае - светлый коралл.

Вот отличный сайт с html-кодами десятков цветов, выбирайте на свой вкус. Вам нужно HEX-представление во втором столбике, то есть тот самый код из шести цифр, начинающийся #.

 

color:#fff; font-weight:bold

Цвет шрифта (белый) и его насыщенность (полужирный). Цвет - так же, как с фоном.

Насыщенность:

bold - полужирный

normal - обычный

Жирность можно задать числом от 100 до 900 с шагом 100. Например, 100 - самый светлый, 400 -нормальный, 700 - полужирный. 900 - самый жирный. В коде так и пишется: 

font-weight:500 - насыщенность шрифта

 

Идем дальше, вот это значение контролирует радиус закругления краев:

border-radius:90px - радиус закругления

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

 

height:60px - высота кнопки

Тут все понятяно.

line-height:60px - высота, на которой находится текст

Меняя это значение, вы можете передвигать текст вверх и вниз.

 

4. Кнопки разного размера 

(возможны любые цвета из п.2)

 

Код кнопки большого размера 

<a class="btn btn-info btn-lg" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

 

Код кнопки среднего размера (задан по умолчанию, можно не выставлять): 

<a class="btn btn-info  btn-md" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

Код кнопки уменьшенного размера:

<a class="btn btn-info  btn-sm" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

Код кнопки минимального размера:

<a class="btn btn-info  btn-xs" href="АДРЕС ССЫЛКИ" rel="nofollow" target="_blank">ТЕКСТ КНОПКИ</a>

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

Комментарии:

Всего веток: 136

Александр Раевский 03.12.2019, 12:51:25

Эксперимент показал, что такого рода ссылки можно вставлять только в окне аннотации. Знает кто-нибудь, нет ли возможности оформить перекрёстную ссылку в тексте книги? Вставка html- кода ссылки напрямую в текст книги почемуто не работает.
Очень нужно! Если у вас цикл из нескольких книг, герои которых переходят из книги в книгу, без такого рода ссылок очень трудно обойтись. Всё время приходится пояснять для читателя упомянутые события и ситуативных героев, которые ранее были подробно описаны или встречались в предыдущих книгах.
Фу-х! Кажется, справился! Предложение длинное, как бабушкин чулок!

В ветке 5 Комментариев. Показать

Последний комментарий в ветке:

Александр Раевский 03.12.2019, 13:16:48

Наталья Изотова, Хм... Звучит разумно. Спасибо! Приму на вооружение.

Лина Вива 02.12.2019, 14:59:51

Супер-Супер! Спасибо огроменнейше, то, что надо сейчас! Блог срочно в закладки, чтобы не потерялся! :))

Последний комментарий в ветке:

Наталья Изотова 02.12.2019, 15:23:54

Лина Вива, Спасибо, буду рада, если пригодится))

Вера Чуднова 02.12.2019, 14:40:57

Спасибо! Очень полезный блог!)

Последний комментарий в ветке:

Наталья Изотова 02.12.2019, 15:23:37

Вера Чуднова, Спасибо))

Лёля Фольшина 27.11.2019, 22:48:49

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

В ветке 9 Комментариев. Показать

Последний комментарий в ветке:

Лёля Фольшина 01.12.2019, 20:56:29

Наталья Изотова, ааа, понятно

Ольга Тишина 29.11.2019, 13:29:01

Огромное вам спасибо! У меня все получилось, и кнопки и картинки(визуализации). Все просто и легко.

Последний комментарий в ветке:

Наталья Изотова 29.11.2019, 13:31:43

Отлично! Спасибо, что воспользовались блогом)

Юнона Руни 27.11.2019, 13:22:08

Огромное вам спасибо! Так доступно все написали! Просто восторг!

Последний комментарий в ветке:

Наталья Изотова 27.11.2019, 13:59:40

Юнона Руни, Спасибо большое, старалась))

Valentina May 25.11.2019, 19:14:22

Огромное спасибо!
Ваш блог - просто находка))

Последний комментарий в ветке:

Наталья Изотова 25.11.2019, 19:23:17

Valentina May, Спасибо большое, очень приятно)))

Ирина Гусева 21.11.2019, 12:52:43

Класс! Забрала) Пригодится!))

Последний комментарий в ветке:

Наталья Изотова 21.11.2019, 13:09:43

Спасибо, рада быть полезной)

Артем Кочеровский 18.11.2019, 05:46:04

Спасибо!

Последний комментарий в ветке:

Наталья Изотова 21.11.2019, 13:09:23

Спасибо, что заглянули)

Алиса Перова 10.11.2019, 02:24:35

Огромное Вам спасибо за инфУ))

Последний комментарий в ветке:

Наталья Изотова 10.11.2019, 09:22:56

Пожалуйста)

Ольга Лучезар 03.11.2019, 12:49:14

Спасибо, очень полезная информация!

Последний комментарий в ветке:

Наталья Изотова 03.11.2019, 12:50:40

Ольга Лучезар, Пользуйтесь на здоровье)

Мирела 22.10.2019, 18:07:24

Спасибо, интересно!

Последний комментарий в ветке:

Наталья Изотова 22.10.2019, 18:13:02

Пожалуйста)

Анна Леденцовская 22.10.2019, 15:44:04

Спасите, помогите! В блоге, в флешмобе ссылки не ставятся! Причем одну скопировала из анотации, где она прекрасно работает. А в блоге одни коды((( Где я накосячила???? Очень прошу, помогите!

В ветке 4 Комментариев. Показать

Последний комментарий в ветке:

Наталья Изотова 22.10.2019, 15:59:08

Анна Леденцовская, Удачи!

Саша Ким 21.10.2019, 13:09:58

Благодарю за полезную информацию)

В ветке 4 Комментариев. Показать

Последний комментарий в ветке:

Наталья Изотова 21.10.2019, 13:24:53

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

Анна Завадская 19.10.2019, 06:52:21

Большущее спасибо! Сама дошла до большой кнопки, но вот маленькую - не могла никак сделать. Искренняя благодарность!

Последний комментарий в ветке:

Наталья Изотова 19.10.2019, 08:34:51

Рада быть полезной)

Фелис Моретти 17.10.2019, 06:17:35

Огромнейшее спасибо за инструкции!

Последний комментарий в ветке:

Наталья Изотова 17.10.2019, 06:31:46

Пользуйтесь на здоровье)

Маруся Хмельная 17.10.2019, 00:18:11

Не лишне поднять будет, напомнить. Ап такому нужному блогу.

Последний комментарий в ветке:

Наталья Изотова 17.10.2019, 00:20:23

Маруся Хмельная, Спасибо огромное!)

Маруся Хмельная 28.09.2019, 15:27:53

Наталья, подскажите, а можно ли сделать активной ссылку в самом тексте? Если да, как? Хочу в конце проды сделать ссылку на блог.

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Маруся Хмельная 28.09.2019, 16:30:34

Наталья Изотова, ясно, спасибо!

Ан Мазарин 19.09.2019, 11:50:58

Спасибо огромное за ваши разъяснения, все очень доступно расписано)
Хорошего вам дня ^^

Последний комментарий в ветке:

Наталья Изотова 19.09.2019, 12:26:46

Спасибо большое, и вам!)

Диана Дейко 21.08.2019, 21:42:21

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

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Диана Дейко 21.08.2019, 21:58:16

Спасибо)))

Ульяна Тюмень 20.08.2019, 20:03:46

Спасибо! А то я даже цикл боюсь ставить, мне кажется, точно накосячу.

В ветке 5 Комментариев. Показать

Последний комментарий в ветке:

Ульяна Тюмень 20.08.2019, 23:35:48

Наталья Изотова, Спасибо! Пробую.
Ура!!!
Очень благодарна!

Марина Третьякова 16.08.2019, 20:14:03

это очень ценная инфа!автору добра!

Последний комментарий в ветке:

Наталья Изотова 16.08.2019, 22:29:34

МАРИНА Т, Спасибо большое, взаимно!)

Кира Ланвин 03.08.2019, 13:38:55

Спасибо!

Последний комментарий в ветке:

Наталья Изотова 03.08.2019, 15:16:57

Кира Ланвин, Пользуйтесь на здоровье)

Ландыш 27.07.2019, 23:47:54

Спасибо!

Последний комментарий в ветке:

Наталья Изотова 28.07.2019, 09:16:52

Олеся Евсеева, Спасибо, что заглянули)

Лилия Бланш 27.07.2019, 23:31:40

огромное спасибо!

Последний комментарий в ветке:

Наталья Изотова 28.07.2019, 09:16:35

Лилия Бланш, Рада быть полезной))

Alla Ch 11.07.2019, 16:13:47

Спасибо♥

Последний комментарий в ветке:

Наталья Изотова 11.07.2019, 23:07:15

Alla Ch, Пользуйтесь на здоровье)

Шанель Оберлин 26.06.2019, 18:04:40

Спасибочки))

Последний комментарий в ветке:

Наталья Изотова 26.06.2019, 20:10:13

Шанель Оберлин, Рада быть полезной)

Tatka S. 26.06.2019, 17:57:03

ОГРОМНОЕ СПАСИБО)))))))

Последний комментарий в ветке:

Наталья Изотова 26.06.2019, 20:10:04

Tatka S., Спасибо, что заглянули)

Дарья Свирская 28.05.2019, 09:17:51

спасибо!!!!!!!!!!!!!

Последний комментарий в ветке:

Наталья Изотова 28.05.2019, 22:33:36

Дарья Свирская, На здоровье)

Анна Апрельская 28.05.2019, 07:45:40

Огромное спасибо за чудесный блог!

Последний комментарий в ветке:

Наталья Изотова 28.05.2019, 22:33:15

Анна Апрельская, Рада быть полезной)

Рина Флай 21.05.2019, 23:56:52

Спасибо за Палочку-Выручалочку ;))

Последний комментарий в ветке:

Наталья Изотова 22.05.2019, 00:02:11

Рина Флай, Спасибо, что заглянули!)

Tate Sparrow 12.05.2019, 14:55:16

Какая полезная информация. Так все понятно и здорово. Я прям очень рад, что попалась эта запись.

Последний комментарий в ветке:

Наталья Изотова 12.05.2019, 20:10:06

Tate Sparrow, Спасибо большое!)

VF 12.05.2019, 11:15:47

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

Последний комментарий в ветке:

Наталья Изотова 12.05.2019, 11:22:33

VF, Спасибо! Рада стараться)

Svetika 11.05.2019, 20:56:04

Спасибо! Очень полезно!

Последний комментарий в ветке:

Наталья Изотова 11.05.2019, 21:20:53

Svetika, Рада, что вам пригодилось)

Анна Стефаненко 30.04.2019, 18:54:42

Спасибо большое! С Вашей помощью все оказалось легко и просто!)

Последний комментарий в ветке:

Наталья Изотова 30.04.2019, 18:55:53

Анна Стефаненко , Спасибо) Это самой главное)

Дориана Флос 16.04.2019, 10:46:31

У всех получается, а у меня нет. Делаю всё как написано. Что нужно делать после того как напишешь ссылку?

Последний комментарий в ветке:

Наталья Изотова 16.04.2019, 18:04:14

Дориана Флос, Сейчас аннотация сохранятся автоматически, как только в переходите в режим просмотра/содержание/еще куда-то.
Так что нажимать ничего не надо, просто куда-то перейти.

Светлана Багрянцева 14.04.2019, 07:33:56

Спасибо. Как раз искала ифу как это делается.

Последний комментарий в ветке:

Наталья Изотова 14.04.2019, 10:36:57

Светлана Багрянцева, Рада быть полезной)

Ирина Кармелевская 14.04.2019, 10:06:36

Ой, один из лучших блогов. Спасибо большое.

Последний комментарий в ветке:

Наталья Изотова 14.04.2019, 10:36:42

Ирина Кармелевская, Спасибо)

Арина Вильде 11.03.2019, 15:14:58

Спасибо! Информация действительно полезна!! ♥️

Последний комментарий в ветке:

Наталья Изотова 11.03.2019, 18:57:56

Арина Вильде, Спасибо, что заглянули)

Ольга Фроленкова 01.03.2019, 21:20:12

Наталья огромная благодарность! У меня тоже получилось! )))

Последний комментарий в ветке:

Наталья Изотова 02.03.2019, 07:46:05

Ольга Фроленкова, Спасибо) Рада быть полезной)

Разия Оганезова 01.03.2019, 21:18:46

Спасибо!!! Все быстро получилось♥️♥️♥️

Последний комментарий в ветке:

Наталья Изотова 02.03.2019, 07:45:36

Разия Оганезова, Отлично) Рада помочь)

Арина Рекк 01.03.2019, 12:53:49

Спасибо большое!

Последний комментарий в ветке:

Наталья Изотова 01.03.2019, 14:35:52

Арина Рекк, Рада быть полезной)

Илья Громов (РЕРОЛ) 17.02.2019, 16:58:12

Отлично! Спасибо!

Последний комментарий в ветке:

Наталья Изотова 17.02.2019, 17:18:52

Рерол, :)
Спасибо, что заглянули)

Лилия Тимофеева (Безгачёва) 05.02.2019, 19:11:20

Спасибо огромное))

Последний комментарий в ветке:

Наталья Изотова 05.02.2019, 21:37:42

Лилия Тимофеева (Безгачёва), Рада стараться)

Аселина Арсеньева (Aselesa) 31.01.2019, 20:18:47

Большое спасибо:))

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Аселина Арсеньева (Aselesa) 31.01.2019, 22:13:02

Наталья Изотова, еще как! Я эту загадку месяц пыталась разгадать))

Мика Ртуть 23.01.2019, 20:08:09

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

Последний комментарий в ветке:

Наталья Изотова 23.01.2019, 20:12:31

Мика Ртуть, Спасибо большое) Я очень рада, что смогла сделать блог, который оказался полезным стольким людям)))

Елизавета Бранник 23.01.2019, 12:50:52

Не устану говорить спасибо!!!

Последний комментарий в ветке:

Наталья Изотова 23.01.2019, 15:33:42

Елизавета Бранник, Спасибо) Приятно очень)

Елена Попова (ХЕЛЕН) 10.01.2019, 01:59:04

Спасибо!

Последний комментарий в ветке:

Наталья Изотова 10.01.2019, 10:35:17

ХЕЛЕН, Пожалуйста, пользуйтесь)

Вероника Колесникова 05.01.2019, 22:24:47

Спасибо ОГРОМЕННОЕ за такой полезный и нужный блог! На секунду мелькнул в виджете именно в тот момент, когда я туда посмотрела.
Вы просто невероятная умница, что поделились секретами, причем так конкретно и четко! Еще раз спасибо!!! :)

Последний комментарий в ветке:

Наталья Изотова 05.01.2019, 23:20:18

Вероника Колесникова, Спасибо большое за теплые слова)
Я очень рада, что блог продолжает помогать авторам красиво оформлять аннотации!

Lana Marcy 05.01.2019, 21:59:35

Огромное спасибо за кнопочки!!!

Последний комментарий в ветке:

Наталья Изотова 05.01.2019, 23:18:38

Lana Marcy, Пожалуйста, пользуйтесь на здоровье)

Books language: