Получить код для размещения | Ещё видео!

Делаем вот такой пост. С шапкой вверху

ТЕКСТ поста

Для этого заходим на http://vln.dp.ua/li/t/, заполняем все поля и получаем код для дневника.

Цвета задаются в виде трех чисел через запятую без пробелов. Например для красного цвета необходино написать 255,0,0

Для примера я заполнял поля вот так

Текст подсказки это текст которые всплывет при наведении на шапку мышкой

Фон для шапки //i029.radikal.ru/0904/25/910ce6bcf443.jpg, фон для поста //img1.liveinternet.ru/images/attach/c/0//46/678/46678707_47.jpg

Важно! Вставлять код нужно в простом редакторе и обязательно убрать галочку "сохранять переносы". Что бы не приходиль вручную прописывать переносы поставьте вместо "ТЕКСТ поста" <pre>Ваш текс</pre>. Текст, который окружен тегами <pre> будет выведен со всеми пробелами и переносами точно так же как он выглядит в черновике

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

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

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

Я её родимую, я её сердечную
Шибко поцелую, крепко обниму
И слегка общупаю, опосля, конечно,
Я с неё залёточки, ай, да всё сниму.

А от мыслей этих чтой-то подымается,
Не в штанах, конечно, а в моей душе,
Ведь душа томится, ведь душа-то мается,
Не идёт обманщица, за полночь уже.

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

Получить код для размещения | Ещё видео!

Добавьте к элементу стиль cursor: и при наведении на него мышкой будет меняться вид курсора

style="cursor: default;"

style="cursor: crosshair;"

style="cursor: help;"

style="cursor: move;"

style="cursor: pointer;"

style="cursor: progress;"

style="cursor: text;"

style="cursor: wait;"

style="cursor: n-resize;"

style="cursor: ne-resize;"

style="cursor: e-resize;"

style="cursor: se-resize;"

style="cursor: s-resize;"

style="cursor: sw-resize;"

style="cursor: w-resize;"

style="cursor: nw-resize;"

Иногда, когда текст поста слишком длиный, удобно сделать в начале поста содержание в виде ссылок на определенные места в посте. Как это делать? Очень просто. Для этого нужны якоря. Я корь это тег <A с именем.
Например: <a name="label1"></a>Если где то в посте сделать сслыку <a href="#label1">На метку 1</a> если клацнуть на эту ссылку вы попадете на нужное место в посте

Апрель Мамин день

 Апрель
Верба, верба, верба,
Верба зацвела.
Это значит, — верно,
Что весна пришла
Это значит — верно,
Что зиме конец.
Самый, самый первый
Засвистел скворец.
Засвистел в скворечне:
Ну, теперь я здешний.
Но весне не верьте,
Слышен ветра свист.
Ветер, ветер, ветер
По дорогам вертит
Прошлогодний лист.
Все апрелю шутки!
Сельский детский сад
Утром скинул шубки,
В полдень — снегопад.
Но не так уж скверно
Обстоят дела,
Если верба, верба
Верба зацвела.

Агния Барто

Стихи маме Мамин день
Вот подснежник на поляне,
Я его нашел.
Отнесу подснежник маме,
Хоть и не расцвел.
И меня с цветком так нежно
Мама обняла,
Что раскрылся мой подснежник
От ее тепла

Г. Виеру

На страницах возможно не только горизонтальное позицирование элементов но и порядок в каком элементы будут перекрывать друг друга тем самым имитируя "3-е измерение"

Пример с тремя слоями

Вот что получим

Обратите внимание на 2 момента. position: relative указывает на то что положение элемента будет задаваться относительно его нормального положения, z-index: - указывает порядок, в каком элементы будут накладыватся друг на друга. Чем больше значение z-index тем "выше" располагается элемент

Если поменять значения z-index то порядок в котором элементы будут выводится будет другим

Теперь первый слов будет самым верхним, а третий слой - нижним

То же самое можно проделать не только с текстом, но и, например, с таблицами. В этом примере в первой таблице z-index: 2, а второй теблице z-index: 1;

В этом примере в первой таблице z-index: 1, а второй теблице z-index: 2;

Пример рукописного шрифта

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

Заходим на http://vln.dp.ua/li/f/t.php, выбираем шрифт, указываем размер шрифта и вводим текст. Жмем на "получить рисунок с текстом" и получаем то что хотели :). Рисунок выделен рамкой для удобства. Дальше клацаем на рисунке правой кнопкой мыши, вибираем "сохранить изображение как". Сохраняем на комп, а дальше вставляем в нужно место в пост дневника.

Сделаем рамку с заголовком и закругленым уголком.

Новогодняя песня

В лесу родилась елочка,
В лесу она росла,
Зимой и летом стройная,
Зеленая была.

Метель ей пела песенку:
"Спи, елочка, бай-бай!"
Мороз снежком укутывал:
"Смотри, не замерзай!"

Трусишка зайка серенький
Под елочкой скакал.
Порою волк, сердитый волк
Рысцою пробегал.

Чу! Снег по лесу частому
Под полозом скрипит;
Лошадка мохноногая
Торопиться, бежит.

Везет лошадка дровенки,
А в дровнях старичок, [мужичок]
Срубил он нашу елочку
Под самый корешок.

Теперь она, нарядная,
На праздник к нам пришла
И много, много радости
Детишкам принесла.

Для этого понадобяться 2 рисунка, один для фона заголовка и рисунок уголка

- Фоновый рисунок заголовка высотой 25 пикселей и шириной в 1 пиксель

- рисунок уголка ширина и высота по 25 пикселей

Что бы сделать такую рамку понадобится 3 <DIV>. Один общий который задаст ширину рамки, один для заголовка рамки и див в котором разместится текст

Упрощенно это выглядит так

Полный вариант выглядит так. Для удобства я пронумеровал дивы 1,2,3

Первый див задает общую ширину рамка width 600px и добавляет бордер к рамке border: solid 1px #00000f;

Обратите внимание на то что высота второго дива задана явно и составляет height: 25px столько же сколько и высота фонового рисунка который задается в background

Остальные стили задают цвет фона, размер шрифта и тд.

Что бы скруглить уголок нужно поверх угла дива вывести рисунок скругленного уголка. Что бы вывести рисунок в нужном нам месте нужно к рисунку добавить стиль position: relative и параметрами top, left задать нужное нам место

Код с скругленым уголком выглядит вот так

Что бы не мучаться с видом рамки уберите галочку с "Сохранять переводы строк в тексте."
Что бы текст выводился со всеми пробелами и переносами строк заключите его в теги <pre></pre>

Разместим текст в две колонки. Что бы было веселее читать пост я позаимствовал стишок http://kievforum.org/showthread.php?t=1183. ( не рекламы ради, а гуглю спасибо :))) )

Познакомились мы в чате
Ты представилася Катей
Оказалось - ты Иван...
ах, какой ты хулиган

Все сайты умерли, осталось только ICQ,
И лишь ReGet качает тихо мне игру,
И звук "ха-ха" писклявым тихим тоном,
С забытья голову мою срывает стоном...

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

Что из страны не грез, не сновидений,
Нас вырвет, прекратя весь круг сомнений,
И встретиться возможно станет наяву,
Мерцает монитор, я всё же сплю...

Нас двое лишь на эту Сеть,
И мы не верим в нашу смерть...

Это можно было бы сделать таблицей, но есть вариант проще - использовать div.
Попробуем разместить каждый стих в своем диве

В примере кода я не указал что бы было проще читать код, а при выводе добавлю рамку к каждому диву

Вот что получится

Познакомились мы в чате
Ты представилася Катей
Оказалось - ты Иван...
ах, какой ты хулиган

Все сайты умерли, осталось только ICQ,
И лишь ReGet качает тихо мне игру,
И звук "ха-ха" писклявым тихим тоном,
С забытья голову мою срывает стоном...

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

Что из страны не грез, не сновидений,
Нас вырвет, прекратя весь круг сомнений,
И встретиться возможно станет наяву,
Мерцает монитор, я всё же сплю...

Нас двое лишь на эту Сеть,
И мы не верим в нашу смерть...

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

Зададим ширину дивов добавив стиль width, для того что бы дивы размещались рядом, а не друг под другом нужно к каждому диву добавить стиль float: left это выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.

Вот теперь мы получили 2 колонки

Познакомились мы в чате
Ты представилася Катей
Оказалось - ты Иван...
ах, какой ты хулиган

Все сайты умерли, осталось только ICQ,
И лишь ReGet качает тихо мне игру,
И звук "ха-ха" писклявым тихим тоном,
С забытья голову мою срывает стоном...

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

Что из страны не грез, не сновидений,
Нас вырвет, прекратя весь круг сомнений,
И встретиться возможно станет наяву,
Мерцает монитор, я всё же сплю...

Нас двое лишь на эту Сеть,
И мы не верим в нашу смерть...

Что дальше делать с колонками зависит только от Вашей фантазии :). Можно добавить фоновый рисунок прописав в стиле background: url('ссылка на фоновый рисунок'), выравнивание в каждой колонке можно делать любым прописав в стиле каждого дива text-align: left, center, right

Пример кода колонок, размещенных в начале поста

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

Что бы разместить колонки по центру нужно добавить <center> и еще один общий див с шириной равной суммарной ширине колонок со всеми отступами и бордерами

Должно получиться вот так

Очень часто попадаются видеоролики которых нет возможности скачать простыми способами и для которых нет кода для размещения. Если есть желание разместить такой видеоролик в дневнике то достаточно кликнуть правой кнопкой мышки на видеоролике и выбрать "copy embed html", а затем в простом редакторе кликнуть правой кнопкой на поле для поста и сделать "вставить". И все :))))

Все это отлично работает в opera и seamonkey ( mozilla ). Работает ли это в других браузерах я не проверял.