Блоговод | Подсветка специального текста в Blogger-блоге

Подсветка специального текста в Blogger-блоге

После публикации WordPress плагина wp-special-textboxes появились пожелания Blogger-блогеров о конвертации данного плагина для использования в Blogger (blogspot). Выполняю сие пожелание.

Special textboxes – это небольшой интерфейс вывода специальных сообщений в теле статьи в виде цветных секций:

Это пример подсветки текста-предостережения. Вывод производится спомощью class=“alert”. Длина подсвечиваемого текста не имеет значения.

Это пример подсвеченного текста для вывода линка скачивания. Вывод производится с помощью class=“download”.

Это пример информационного блока. Вывод производится посредством class=“info”.

Это пример подсветки предупреждающего текста. Выводится при использовании class=“warning”.

Установка

Зайдите в панель управления блогом. Перейдите на страницу МАКЕТ->Изменить HTML. Вставьте, показанный ниже код, сразу после тега head:

<link href='//rublezoid.googlepages.com/special-textboxes.css' media='screen' rel='stylesheet'/>

1	<link href='//rublezoid.googlepages.com/special-textboxes.css' media='screen' rel='stylesheet'/>

Использование

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

<div class="class_name">Подсвечиваемый текст</div>
<!-- ИЛИ -->
<p class="class_name">Подсвечиваемый текст</p>

<div class="class_name">Подсвечиваемый текст</div>

<p class="class_name">Подсвечиваемый текст</p>

где class_name может принимать значения:

alert – красный блок. Предостережение, опасность.
download – синий блок. Скачивания.
info – зелёный блок. Информация.
warning – жёлтый блок. Предупреждение.
grey – серый блок без иконки.

Вот и всё … Удачи!

Похожие статьи:

13.03.2009 / Blogger, Виджеты (Blogger), Мои проекты / Метки: Blogger, виджет, коды

Поделитесь статьёй

Об авторе

minimus

Lead Frontend Developer (ReactJS, NodeJS)

[title element="h4"] Комментарии (15) [/title]

SiMBa – 14.03.2009 - 13:20:

ответ

спасибо
a13x4ndr – 17.03.2009 - 11:34:

ответ

Интересно! Спасибо за инфу.
Helga – 30.03.2009 - 00:50:

ответ

Большое спасибо Но есть один вопросик : возможно сделать так как у вас в блоге чтоб показывало сколько человек скачало ? ( вывод линка скачивания) если ссылки залиты на depositfiles или letitbit ?
- minimus – 30.03.2009 - 16:55:
  
  ответ
  
  Боюсь, что нет. У меня стоит WordPress плагин download-manager. Для Blogger сделать возможно, но “овчинка не стоит выделки” …
Zefir – 14.05.2009 - 10:38:

ответ

Спасибо… Установил… Работает… Довольный, как слон… =))
- minimus – 14.05.2009 - 12:13:
  
  ответ
  
  Пользуйтесь на здоровье!
kibastos – 25.10.2009 - 12:30:

ответ

спасибо за виджет))
Алекс – 17.06.2010 - 03:39:

ответ

Спасибо, отличный плагин! Возьму себе на вооружение
- minimus – 17.06.2010 - 12:03:
  
  ответ
gr00sh – 22.08.2010 - 19:15:

ответ

Так я и не понял, где найти тэг HEADER. подскажите, пжл, где его найти в HTML макета. Спасибо.
- minimus – 22.08.2010 - 20:30:
  
  ответ
  
  Обычно блок HEAD начинается на второй строке файла макета …
  - gr00sh – 22.08.2010 - 20:52:
    
    ответ
    
    По поиску – тэг <head> и сразу после него вставить код на следующей строчке.
    header – тут не причем, я так понимаю.
    “Обычно блок HEADER начинается на второй строке файла макета …” – это не так =)
    спасибо за полезность.
    - minimus – 22.08.2010 - 21:04:
      
      ответ
      
      Угу!
Михаил Мурашев – 22.04.2012 - 22:43:

ответ

не работает (
- minimus – 22.04.2012 - 23:19:
  
  ответ
  
  Google Pages уже нет, соответственно, нет и CSS-файла там лежавшего – вот и не работает …