Как сделать окошко для кодов?
 

Всем привет. Часто получаю в личку один и тот же вопрос - Как вставить код или текст в окошечко. Вот решила об этом и в блоге написать - вдруг кому ещё интересно будет.

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

<textarea rows="5" cols="40">Ваш текст или код Вашей картинки.

Теперь чуть подробнее о коде и как его применять

rows="5" - Цифра 5 это ВЫСОТА окошка
cols="40" - Цифра 40 это ШИРИНА окошка
При необходимости поменяйте эти значения на нужные Вам.

Пример на картинке:
1. Загрузите нужную картинку,
2. Скопируете код окошка написанный выше и поставьте его после загруженной картинки,
3. Скопируете код картинки полностью и вставьте его после кода окошка.

КАРТИНКА --->>> КОД ОКОШКА --->>>КОПИЯ КОДА КАРТИНКИ

<img width="300" height="200" data-cke-saved-src="//img1.liveinternet.ru/images/attach/c/2//68/714/68714354_1294071282_59012937_1a04f142cfe2.gif" src="//img1.liveinternet.ru/images/attach/c/2//68/714/68714354_1294071282_59012937_1a04f142cfe2.gif" alt="" />

Плюсом, то что Вас ещё может заинтересовать :
1.Сделай слайд-шоу
2.Коды цвета для текстов
3.Сделай для блога кнопку.
4.Как сделать баннер-картинку для блога.
5.Как сделать рамочку для текста самому.
Всё остальное для оформления - рамочки, эпиграфы, картинки и инструкция как вставить их в пост находятся в разделе - Для оформления блога 

Делаем Окошко для кодов.
 

Этот урок как делать окошко для кодов.
Очень полезная штука и удобная.Можно быстро скопировать код
и занимает мало места.Очень хорошо подходит для рамочек.
Если у вас получилась красивая рамка и хочется поделиться с другими её кодом.
Выглядеть окошко без кода будет так.
ВАШ КОД

SvetlanaT

Сделать текст с окошечком прокрутки (флеймом)
 

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

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 20 - Как просматривать и брать картинки с Яндекс фото в связи с новыми изменениями
Часть 21 - Как увидеть пароль вместо звездочек?
Часть 22 - Сделать текст с окошечком прокрутки (флеймом)
Часть 23 - Как быстро вставить в пост на ЛиРу картинку из Интернета
Часть 24 - Рамка для блога, имитирующая картину.
...
Часть 28 - Как получать извещения о новых постах, и где это сделать в настройках дневника.
Часть 29 - Как наложить ФЛЕШ, на прозрачном фоне, на любую картинку
Часть 30 - Онлайн генераторы HTML цвета
 

Формулы окошка.
 

<br/> <center><textarea readonly="readonly" cols="30" rows="2" style="font-size: 7px; color:#cecbcd; background-color:#7e7079; border: solid 2px #cecbcd;">ваш код</textarea></center>   ваш код

</br> <center><textarea cols="25" readonly="readonly" rows="2" style="font-size: 7px; color: #FFDAB9; background-color: #350202; border: solid 1px #FFDAB9 ;">ваш текст</textarea></center></td>   ваш текст

<br/> <center><img class="post_img" title="" src="//img-fotki.yandex.ru/get/6620/132297003.64/0_9dd8e_47445f3_XS.jpg" border="0" alt="" width="50" height="50"></center><center><div style="width: 180px; height: 10px; overflow: auto; background-color: #cbc6c9; border: 1px solid #6a6368; padding: 3px;"><textarea style="background-color: #6a6368; color: #cecbcd; border: black1px solid;" cols="15" rows="1">ВАШ КОД</textarea></div></center>   ВАШ КОД

Серия сообщений "= формулы":
Часть 1 - Расположение музыки на картинке
Часть 2 - Как сделать таблицу на ЛиРу
...
Часть 31 - Плеер для музыки с ЮТУБ
Часть 32 - Делаем баннер самостоятельно
Часть 33 - Формулы окошка.

Разные стили Прокрутки для поста.
 

По просьбам моих ПЧёлок немного про прокрутки.
Существуют восемь атрибутов, которыми можно задавать различные параметры полос прокрутки. Не обязательно использовать одновременно все атрибуты. Стили Прокрутки бывают разные, с цветом и просто обычные серенькие.
Ещё раз из чего она состоит.
1. scrollbar-face-color -это цвет передней стороны панели прокрутки
2. scrollbar-arrow-color -это цвет треугольника на верхнем и нижнем квадратах.
3. scrollbar-3dlight-color -это цвет отсвета.
4. scrollbar-highlight-color -это цвет верхней и левой граней панели прокрутки.
5. scrollbar-shadow-color -это цвет нижней и правой граней панели прокрутки.
6. scrollbar-darkshadow-color -это нижний отсвет прокрутки.
7. scrollbar-track-color -это цвет полосы, по которой "ходит" панель прокрутки.
8. #FFFFFF ;#A21F0E -это коды цвета, которые можно менять.

---

ЗДЕСЬ далее... SvetlanaT

Как правильно вставлять код в окошко для кодов.
 

Многие сталкиваются с проблемой, особенно на ЛиРу, что при вставлении кодов в кодовое окошко, код в окне выставляется не полностью - обрезаются "хвостики" или наоборот - начало кода, или когда в посте блога надо написать HTML-код в виде текста а многие этого не умеют. Так что же делать, чтобы код остался в тексте сообщения виден как HTML? Напишу несколько вариантов, как это сделать. 1. Код с использованием тэга <input Код баннера можно поставить вот в такое окошечко. Это самый простой вид окошечка, и его используют в основном для небольших кодов.

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 17 - Заморские сайты к НОВОМУ ГОДУ
Часть 18 - 100 самых полезных сайтов Интернета
Часть 19 - Как правильно вставлять код в окошко для кодов.
 

Набор цветных окошек для кодов