На главную

Вебмастеру

В Разное

Livejournal

Элементарный жж-кат, скрывающий часть записи под "Read more”:
<lj-cut> ТЕКСТ </lj-cut>
жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:
<lj-cut text="ПОДЗАГОЛОВОК"> ТЕКСТ </lj-cut>
Если скрываете пост до конца, достаточно поставить в нужном месте один тег:
<lj-cut>

Работу ката не видно в режиме «ПРОСМОТР».
В каментах и Профиле кат не работает.

Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale
<lj user="wildmale">
Сссылка на сообщество, например: aforism
делается точно так же:
<lj user="aforism">

Вместо wildmale пишем Дикий самец:
<a href="lj://user/wildmale/">Дикий самец</a>
Ежели надо с «человечком»: Дикий самец:
<lj user="wildmale" title="Дикий самец">
Скопировав код, не забудьте поменять реквизиты.

Ежели хотите сделать так: wildmale
или эдак: comm и commun
то вам СЮДА

Кнопка Repost (Перепостить)
Вставкой в пост этого тега вы публикуете кнопку «Repost» (Перепостить):
<lj-repost />

Одинарный тег <lj-repost /> приведет к размещению всей записи.

Для репостинга фрагмента исходной записи используется парный тег:
Перепост этого фрагмента

Название кнопки меняется параметром «button»:

С недавних пор в ЖЖ в посты можно вставлять интерактивные карты с сервисов Google.Maps или Яндекс.Карты

Для этого используется специальный тег: <lj-map url=URL-карты>

Что такое URL-карты можно узнать ЗДЕСЬ

Кнопки «лайк» для Facebook, Вконтакте, Google
Все кнопки:

Прописать отдельные кнопки:

Названия кнопок и их написания для вставки:

«Recommend» от FaceBook (facebook или fb);
«+1» от Google (google или go);
«♥» от vKontakte (vkontakte или vk);
«Tweet» от Twitter1 (twitter или tw);
«+10 ЖЖетонов» от LiveJournal (livejournal или lj)

Отключить автоформатирование.
По умолчанию при написании постов в ЖЖ включено автоформатирование. То есть любая ссылка, опубликованная в формате http://ssilka будет активной, а клавиша enter переводит текст или код на новую строку. Чтобы сделать ссылку неактивной (как здесь) или опубликовать, например, две картинки в ряд, нужно отключить автоформатирование. Вот так:

<lj-raw> фрагмент без автоформатирования</lj-raw>

Полезный совет:

Отключение LJTIMES
Зайти СЮДА
снять галку в строке «включить LJTIMES»

Самые распространенные вопросы:

1. «Почему именно у меня и не работает кат?»
или «Почему введенная в пост LJ и HTML-разметка не работает и публикуется как есть?»
Дело в том, что на странице «Написать пост» (http://www.livejournal.com/update.bml) ДВА режима – «Визуальный редактор» и «HTML». Представленные здесь теги работают только в режиме «HTML».

ТЕКСТ

Your text	<s>Your text</s>
Your text	<u>Your text</u>
Your text	<b>Your text</b>
`Your text`	<samp>Your text</samp>
Your text	<big>Your text</big>
Your text	<i>Your text</i>
*Your text*	<b><i>Your text</i></b>
*Your text*	<u><b><i>Your text</i></b></u>
Your text	<small>Your text</small>
TEXT^sup	TEXT<sup>sup</sup>
TEXT_sub	TEXT<sub>sub</sub>

Your text

Your text

Your text

Супермелкий шрифт. Например: Я тебя люблю Или: Я тебя люблю

Минимальное значение font-size:1pt (самый мелкий)
Аналогично делается суперкрупный шрифт.

Меняем вид шрифта:
Your very intresting text

Your very intresting text

На заметку: typetester.org – полезный сайт для желающих поэкспериментировать с текстом

Your very intresting text

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ

Синий текст подчеркнут красной линией

Синий текст в красной рамке

Цветной текст с цветным фоном

Посмотреть сочетаемость цветов

Цветной текст с цветным фоном в цветной рамке

<span style="background-color:dodgerblue; color:white; padding:3px; border:3px solid red;">Текст</span>

Текст, подчеркнутый пунктиром

<span style="border-bottom: 2px dashed red;">Текст, подчеркнутый пунктиром</span>

Текст, подчеркнутый точками

<span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый пунктиром</span>

Текст, подчеркнутый двойной чертой

<span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span>

Текст, окаймленный разноцветным пунктиром

<span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>

Текст в двойной рамке

<span style="border-style: double; padding:3px;">Текст в двойной рамке</span>

Цветной текст в двойной цветной рамке

<span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>

Ваш текст в объемной 3D-рамке

<span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>

На заметку:

Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и получим (на примере выше):

Ваш текст в объемной 3D-рамке

то бишь рамку на всю ширину поста.

Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где width:200px; – ширина блока 200 пикселей,
height:50px; - высота блока 50 пикселей

Получим:

Ваш текст в объемной 3D-рамке

<div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст </div>

Сервис для подбора цвета

Аббревиатура: HTML

Так называемый «спойлерный» текст, проявляющийся при его выделении. Типа:
«А убийцей в том кино был дворецкий«

Так называемая «буквица»: В некотором царстве…

<font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш офигительно креативный текст

<p title="Пояснительный текст">Основной текст</p>

Текст «наоборот»:
Повернуть текст задом-наперед

Расстояние между словами

<div style="word-spacing: 20px;">Расстояние между словами</div>

Больше расстояние между словами

<div style="word-spacing: 40px;">Больше расстояние между словами</div>

Расстояние между буквами

<div style="letter-spacing: 10px;">Расстояние между буквами</div>

А здесь задано расстояние между строками по вертикали пятьдесят пикселов

<div style="line-height:50px;">Расстояние между строками</div>

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

опаньки!

Невидимый фрагмент записи

<div style="visibility: hidden;">Невидимый фрагмент записи</div>

Еще способ скрыть текст:

<!– Ваша служебная невидимая пометка –>

Приподнять одну фразу на 5 пикселей над текстом

Приподнять <span style="position: relative; top:-5px;">фразу</span>

Опустить одну фразу на 5 пикселей ниже текста

Опустить <span style="position: relative; bottom:-5px;">фразу</span>

Повернуть текст на 90 градусов (работает только в IE):

Раз, два, три

<span style=writing-mode:tb-rl;>Текст</span>

Следующий трюк, напротив, работает только в Opera и Mozilla FF:

Раз, два, три, четыре, пять, шесть

Выделение цитаты в тексте.
Пример:
Еще поэт-романтик Новалис писал в Средние Века:

Любимая! Ты – аббревиатура Вселенной.

<div style="border-right: #000080 1px solid; padding-right: 4px; border-top: #000080 1px solid; padding-left: 3px; font-size: 92%; padding-bottom: 4px; border-left: #000080 1px solid; color: #000080; padding-top: 2px; border-bottom: #000080 1px solid; background-color: #f0f0ff"> ТЕКСТ ЦИТАТЫ</div>

Написать текст, имея фоном картинку:

Светить всегда, светить везде – до дней последних донца! Светить – и никаких гвоздей!

<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: white; padding: 8px; background-image:url("URL картинки");"> ТЕКСТ</div>

Лучше брать маленькую картинку – она будет автоматом повторяться, пока продолжается текст. Атрибутами width и height в % или px (пикселах) можно задать определенный размер фоновой области

Эффект с подсветкой текста (наведите курсор на текст):
в некоторых блогсервисах (жж) может не работать

МОЙ ЗАМЕЧАТЕЛЬНЫЙ И КРЕАТИВНЫЙ ТЕКСТ

<font onmouseover="style.backgroundColor='pink'; style.cursor='hand'" onMouseOut="style.backgroundColor='silver';">МОЙ ТЕКСТ</font>

Разбить текст на две колонки:

текст левой колонки

текст правой колонки

Код:
<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки
</table>

Правильное (и уважительное) указание автора под скопированным текстом (цитатой) с всплывающей доп. информацией при наведении курсора
Пример

<div align=right><cite title="Информация">© АВТОР</cite></div>

"Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

Я
 Пешу
 Лесинкой!!!

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым "моноширинным" шрифтом. Обычно в качестве такого шрифта используется Courier New. Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

C
 Днем
 Рождения!

<pre style="font-family:'Arial Black'">ваш текст</pre>

Текст, обтекаемый другим текстом:

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

Ситком устроен по-другому, нежели фильм, где стиль игры более реалистичный. Обычно на съемках 95% ситкомов есть живая публика, аудитория, смех которой и звучит за кадром. Это преувеличенный стиль игры, голоса должны передавать больше эмоций и быть просто громче; много не вполне естественной мимики и жестов.

Быстро написать так: Моипоздравления!!!
Можно ЗДЕСЬ

Бегущая строка

Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие браузеры не всегда корректно отображают работу различных его атрибутов.

для ЖЖ: «HTML-тэг marquee теперь вырезается из текста комментария при отображении (т.е. сам текст будет отображаться, но он не будет анимирован или скрыт).»
СУП. Релиз #75 от 4 Фев, 2011

your running text
<marquee>your running text</marquee>

your running text

your message here

your running text

your message here

your running text

your text here

your exciting message here your exciting message here your exciting message here your exciting message here

<marquee bgcolor="pink" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee><marquee bgcolor="silver" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee>

Останавливаем строку наведением курсора мыши

бонус

Сайты, где много движущихся анимашек:
glitter-graphics.com
bigoo.ws

Flying text

<marquee direction="up" scrollamount="1" height="150" style="filter:wave(add=1, phase=10, freq=2, strength=300); colortag="red";><font color="navy" size=+3>FLYING TEXT</font></marquee>

« П Л Я Ш Е М и П О Е М ! ! »

Можно типа информера прикрутить:

- Я недавно на свадьбе был!
– А что у тебя с лицом?
– Разбили на счастье.
———-
– Почему рука забинтована?
– Дятла с ладошки кормила…
———-
Мне приходится работать, он любит отдохнуть. Я – злой, он – добрый. Я живу с женой, он – шлындает по девочкам. С большим трудом я понимаю, как вообще мы можем с ним уживаться в одном человеке. ———-

<marquee style="background:pink; padding:10px; border-right: silver 2px solid; border-top: silver 2px solid; border-left: silver 2px solid; border-bottom: silver 2px solid;" scrollamount=1 scrolldelay=60 direction=up width=250 height=60>ТЕКСТ</marquee>

С

Д
Н
Е
М

Р
О
Ж
Д
Е
Н
И
Я
!

Таблицы

Табличным кодом можно задать цветной фон поста:

Теги… Все эти кавычечки, буквочки и скобочки – как узоры следов на снегу. Сначала – неизвестная азбука, а потом, когда вникнешь – книга, прочтение которой не вызывает затруднений. Упоительнейшее занятие – пишешь слово, затем оборачиваешь его замысловатыми иероглифами, кутаешь в слои черно-белых символов и получаешь восхитительнейший результат. © singita

Можно фоном поста сделать картинку:

Спокойной ночи, дорогие друзья мои…

<table cellpadding=30>
<tr>
<td background=URL картинки><font color=white>TEXT</font></td>
</tr>
</table>

Параметр cellpadding задает оступ текста от границ картинки. Если объем текста превышает размеры картинки, она будет автоматически продублирована нужное число раз (в примере выше 2 раза)

Таблицей можно сделать рамку картинки:

ЗАКАТ

<center><table border="20" bgcolor="brown">
<caption align=bottom>ВАША ПОДПИСЬ</caption>
<tr><td>
<table border="12" bgcolor="brown">
<tr><td><img src=АДРЕС КАРТИНКИ></td></tr>
</table></td></tr>
</table></center>

Размер картинки любой – рамка сама «подгонится»

Быстро наложить текст на картинку без графических редакторов:

Закат на даче

<table border="0" cellpadding="0" cellspasing="0">
<tr>
<th width=.. height=.. background="URL КАРТИНКИ" valign="bottom">
<font color="yellow">ВАШ ТЕКСТ</font></th>
</tr>
</table>

В значения width и height вместо многоточий ставятся размеры картинки (их можно узнать из пункта «Свойства» вашей картинки)

Разделить пост на две части можно так:

Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis …

В качестве разделителя служит пустой столбец
<td width="2" bgcolor="#000000"></td> , меняя width и bgcolor , меняем цвет и толщину разделителя

Делаем галереи картинок с помощью таблиц:
(здесь использованы кликабельные превьюшки. что и вам советую)

Ее код:
<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
</tr>
<tr>
<td>картинка-три</td>
<td>картинка-четыре</td>
</tr>
<tr>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>

Или так:

Код:
<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
<td>картинка-три </td>
</tr>
<tr>
<td>картинка-четыре</td>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>

Думаю, принцип понятен. Атрибут cellspacing=8 здесь задает расстояние между картинками, равное 8 пикселов

Изображения

Код любой картинки в сети в простом варианте:
<img src="http://site/…jpg">
Уникальный адрес (URL) типа http://site/…jpg выдает картинке фотохостинг (специальный сайт), куда ее необходимо закачать с вашего компьютера. По сути, любая картинка, которую вы видите в сети – отдельная веб-страничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его всегда можно в свойствах картинки)
Среди «чайников» кочует миф, что можно показывать в блоге картинки прямо со своего компьютера. Это не так. Для этого ваш компьютер должен быть круглосуточно работающим веб-сервером.

Запомните: Если вы удаляете картинку из галереи хостинга (например, «фотоальбома жж»), то она исчезнет и из вашего блога!

Резюме: если знаете адрес своей или чей-то картинки формата http://…jpg вы можете опубликовать ее кодом:

Так вставляются картинки в комментарии к записям.

Как сделать, чтобы текст «обтекал» картинку?
Легко – картинка слева, текст справа:
добавляем в код картинки:
align=left hspace=20
Код картинки примет вид:
<img src="http:…" align=left hspace=20>
Помни:
align=left – картинка слева, текст справа
align=right – картинка справа, текст слева
hspace=20 – расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 – расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):
<img src="http:…" align=left hspace=20 vspace=15>

Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
<br><br><br> – три пустые строки.

Вставить две и более картинки горизонтально:
<nobr>Текст (картинки)</nobr> – все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

Регулируем расстояние меж картинками по-горизонтали:
С помощью «неразрывного пробела»:  
Расстояние, равное 8 пробелам будет выглядеть так:
       
Вставляется меж кодов картинок, есс-но

Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: – введите в код картинки title="ТЕКСТ"

Если надо цветную рамку , добавьте в код картинки: style="border:5px solid red;" – задана красная рамка толщиной 5 пикселей

Чтоб быстро вставить картинку с другого сайта, вставьте в пост:
<img src="">
затем войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

Оптимальный способ уменьшить размер фото на компьютере: Читать

Имя отправителя *:
E-mail отправителя *:
Тема письма:
Текст сообщения *: