Секреты ЖЖ
Оригинал взят у breeze222 в post
Блог в ЖЖ - Кнопки для блога
Как сделать активные кнопки для размещения в постах или сайдбаре (боковой панели)? Этот пост Вам поможет,
в нем на практике рассмотрены вопросы, которые будут полезны и начинающим и опытным блогерам.
Работа может проводиться или в режиме Визульного редактора или в режиме HTML. Если речь идет о копировании кодов
в пост, то они вставляются только в режиме HTML, запомните это.
После вставки кода можно перейти в Визуальный редактор и посмотреть, что получилось. Пост при этом сохранять нет
необходимости. В сайдбар (боковую панель) код вставляется обычным копированием.
Очень много полезного Вы можете найти на ресурсе http://htmlka.com/ и в сообществе http://journals-covers.livejournal.com/.
Чтобы не перегружать Вас информацией, я расскажу об основных способах, которые могут пригодиться каждому блогеру.
Как превратить обычный кат в кнопку.
HTML-код ката ЖЖ выглядит так
текст поста
Чтобы получить результат, достаточно в месте необходимого ката вставить начальную часть кода
Завершающая часть появится в конце текста самостоятельно.
text="Текст ката" - если Вам нужен свой текст для ката, то его можно вставить таким образом в кавычки,
но эту часть кода можно вообще исключить
текст поста
Тогда в месте ката будет надпись Читать дальше...
Коды, которые превратят обычный кат ЖЖ в симпатичные прямоугольные кнопки, обнаружены мной в статье
Дрессируем Lj-cut. Если Вы хотите себе такие кнопки, то скопируйте понравившийся Вам код.
Далее надо перейти по ссылке http://www.livejournal.com/customize/options.bml. Затем нажать на строку Ваши
стили, найти окно Ваш Css и вставить туда код, после этого нажать кнопку Сохранить изменения (справа).
Если в этом окне уже есть какой-то код, то код для ката вставляется в самом конце и не забудьте оставить
пустую строку, разделяющую коды.
Как нарисовать кнопку для блога.
Если Вы не особенно дружите с программами типа фотошопа, то я рекомендую воспользоваться одним из онлайн-сервисов
для создания кнопок. С учетом разных рейтингов, по мнению пользователей сети одним из наиболее удобных является Генератор кнопок для сайтов.
Мне он показался простым и интуитивно понятным в работе.
Как им пользоваться? Переходите по указанной ссылке и в появившемся окне указываете необходимые размеры.
Для примера, у меня в блоге кнопки справа на боковой панели имеют размер 150х30. Вы можете менять цифровые
значения и сразу видеть, как меняется будущая кнопка.
Как изменить цвет? Нажимаете курсором на цветные квадраты с надписью Color и в появившемся окне вводите
6-значный HTML-код цвета (символы вводить без пробелов). Выбрать можно здесь или здесь или где угодно.
Лучше всего использовать стандартные цвета, так как если Вам понадобится изготовить такие же
дополнительные кнопки, проще будет вспомнить использованный ранее код цвета.
Переходя по вкладкам в этом редакторе меняйте значения и увидите, как будет смотреться кнопка.
На вкладке Image через Insert Image можно вставить изображение, которое будет кнопкой, предварительно надо его обрезать или
уменьшить до размера будущей кнопки, например 150х50 пикселей (цифры могут быть другими).
Рекомендую Вам выбрать и придерживаться одного размера для всех кнопок (запомнить или записать где-нибудь),
так блог выглядит более аккуратно. На вкладке Text в кнопку можно вставить текст, меняя тип, размер и цвет шрифта.
После всего этого нажимаете Save и изображение сохраняется в формате PNG. Для кнопок
(особенно закругленных) рекомендую пользоваться этим форматом, а не JPG.
Все кнопки (файлы с изображением кнопок) лучше залить на фотохостинг ЖЖ, в отличие от картинок для
постов, которые лучше хранить на внешнем фотохостинге, например на Яндекс Фотках.
Адрес картинки (кнопки) на разных фотохостингах
Это условный HTML код картинки, причем текст и цифры в кавычках далее можно менять для получения необходимого
результата, например чтобы подогнать по ширине, но это вносит сложности и я рекомендую сразу делать качественно
без дальнейших исправлений. Для этого и нужны стандартные размеры, которые Вам надо выбрать самостоятельно.
Если у Вас уже есть нормальная картинка для кнопки и Вы не собираетесь менять размеры и прикреплять всякие
подсказки, то часть элементов можно сократить и тогда мы получим следующее:
Ссылка - это адрес картинки, например http://ic.pics.livejournal.com/saintly_scum/51864505/420898/420898_original.png
Как вставить активную кнопку в режиме визуального редактора.
Загружаем изображение кнопки в ЖЖ, идем в альбом http://saintly-scum.livejournal.com/pics/catalog/360/420898,
нажимаем Оригинал и копируем адрес из строки браузера
http://ic.pics.livejournal.com/saintly_scum/51864505/420898/420898_original.png
Далее находим в посте место для кнопки, нажимаем на панели меню редактирования поста кнопку Добавить
фото и в окно Укажите здесь URL изображения вставляем адрес кнопки (это может быть ЖЖ или другой фотохостинг),
нажимаем Добавить в запись и видим.
Теперь кнопку (и любую другую картинку в посте) можно сделать активной, прикрепив к ней ссылку.
Для этого выделяем кнопку мышью, и в меню редактирования нажимаем Добавить ссылку, при этом
появится окно, в него надо ввести ссылку, которая будет открываться при нажатии кнопки.
У меня к этой кнопке привязана ссылка http://saintly-scum.livejournal.com/16836.html. Вот, что получилось
после прикрепления ссылки к кнопке. Нажмите ее и увидите пост, в котором тоже есть активные кнопки.
Таким образом Вы можете прикреплять ссылки к любым изображениям в блоге.
Как вставить кнопку или баннер в пост или на боковую панель (сайдбар).
Вставлять будем в режиме HTML. Этот способ подходит и для поста и для сайдбара
(боковой панели). Для этого нам понадобится код:
Это условный HTML-код картинки, к которой прикреплена ссылка. Элементы этого кода:
href - в кавычках указывается ссылка, которая должна открываться при нажатии
title - в кавычках указывается подсказка, которая появляется при наведении курсора
на картинку (кнопку)
src - в кавычках указывается адрес, где находится картинка (кнопка)
alt - в кавычках указывается текст, который появится, если картинка не загрузилась
target="_blank" - необходимо, чтобы ссылка открывалась в новом окне браузера
Часть элементов можно сократить, я обычно оставляю только следующие, так мне удобнее
Рекомендую воспользоваться каким-нибудь простым текстовым редактором, типа блокнота и
с помощью этой основы подготовить код для своих кнопок. Для этого надо просто вставить
в такой шаблон прямо в кавычки ссылку и адрес картинки без лишних пробелов.
Например в случае рассмотренной ранее кнопки это будет так:
Теперь этот код можно вставить или в пост в режиме редактора HTML или на боковую панель,
как у меня в блоге. В результате получим активную кнопку.
Полученный код можно сохранить в текстовом редакторе типа блокнота, это может пригодиться в будущем.
Теперь установим активную кнопку в сайдбар (боковую панель)
Для этого переходим по ссылке http://www.livejournal.com/customize/options.bml, нажимаем Сайдбар и
в окно Текст копируем этот код, нажимаем Сохранить изменения.
Таким же образом на боковой панели можно разместить любое изображение без прикрепленной ссылки,
например рекламный баннер, надо просто вставить код картинки (смотрите выше Адрес картинки на разных фотохостингах).
Можно сделать несколько кнопок, это очень удобно для поиска информации в блоге. Напоминаю, что у
Вас в сайдбаре должна быть включена панель Свой текст. Посмотрите в пункте Порядок виджетов в сайдбаре.
Лично у меня в блоге в этом пункте отключено отображение календаря и всего прочего, кроме панели текста Custom Text или Текст.
На всякий случай, сохраняйте полученный код в текстовом редакторе перед сохранением поста, чтобы не потерять
результат работы при сбоях в сети.
Блог в ЖЖ - Кнопки для блога
Как сделать активные кнопки для размещения в постах или сайдбаре (боковой панели)? Этот пост Вам поможет,
в нем на практике рассмотрены вопросы, которые будут полезны и начинающим и опытным блогерам.
Работа может проводиться или в режиме Визульного редактора или в режиме HTML. Если речь идет о копировании кодов
в пост, то они вставляются только в режиме HTML, запомните это.
После вставки кода можно перейти в Визуальный редактор и посмотреть, что получилось. Пост при этом сохранять нет
необходимости. В сайдбар (боковую панель) код вставляется обычным копированием.
Очень много полезного Вы можете найти на ресурсе http://htmlka.com/ и в сообществе http://journals-covers.livejournal.com/.
Чтобы не перегружать Вас информацией, я расскажу об основных способах, которые могут пригодиться каждому блогеру.
Как превратить обычный кат в кнопку.
HTML-код ката ЖЖ выглядит так
текст поста
Чтобы получить результат, достаточно в месте необходимого ката вставить начальную часть кода
Завершающая часть появится в конце текста самостоятельно.
text="Текст ката" - если Вам нужен свой текст для ката, то его можно вставить таким образом в кавычки,
но эту часть кода можно вообще исключить
текст поста
Тогда в месте ката будет надпись Читать дальше...
Коды, которые превратят обычный кат ЖЖ в симпатичные прямоугольные кнопки, обнаружены мной в статье
Дрессируем Lj-cut. Если Вы хотите себе такие кнопки, то скопируйте понравившийся Вам код.
Далее надо перейти по ссылке http://www.livejournal.com/customize/options.bml. Затем нажать на строку Ваши
стили, найти окно Ваш Css и вставить туда код, после этого нажать кнопку Сохранить изменения (справа).
Если в этом окне уже есть какой-то код, то код для ката вставляется в самом конце и не забудьте оставить
пустую строку, разделяющую коды.
Как нарисовать кнопку для блога.
Если Вы не особенно дружите с программами типа фотошопа, то я рекомендую воспользоваться одним из онлайн-сервисов
для создания кнопок. С учетом разных рейтингов, по мнению пользователей сети одним из наиболее удобных является Генератор кнопок для сайтов.
Мне он показался простым и интуитивно понятным в работе.
Как им пользоваться? Переходите по указанной ссылке и в появившемся окне указываете необходимые размеры.
Для примера, у меня в блоге кнопки справа на боковой панели имеют размер 150х30. Вы можете менять цифровые
значения и сразу видеть, как меняется будущая кнопка.
Как изменить цвет? Нажимаете курсором на цветные квадраты с надписью Color и в появившемся окне вводите
6-значный HTML-код цвета (символы вводить без пробелов). Выбрать можно здесь или здесь или где угодно.
Лучше всего использовать стандартные цвета, так как если Вам понадобится изготовить такие же
дополнительные кнопки, проще будет вспомнить использованный ранее код цвета.
Переходя по вкладкам в этом редакторе меняйте значения и увидите, как будет смотреться кнопка.
На вкладке Image через Insert Image можно вставить изображение, которое будет кнопкой, предварительно надо его обрезать или
уменьшить до размера будущей кнопки, например 150х50 пикселей (цифры могут быть другими).
Рекомендую Вам выбрать и придерживаться одного размера для всех кнопок (запомнить или записать где-нибудь),
так блог выглядит более аккуратно. На вкладке Text в кнопку можно вставить текст, меняя тип, размер и цвет шрифта.
После всего этого нажимаете Save и изображение сохраняется в формате PNG. Для кнопок
(особенно закругленных) рекомендую пользоваться этим форматом, а не JPG.
Все кнопки (файлы с изображением кнопок) лучше залить на фотохостинг ЖЖ, в отличие от картинок для
постов, которые лучше хранить на внешнем фотохостинге, например на Яндекс Фотках.
Адрес картинки (кнопки) на разных фотохостингах
Это условный HTML код картинки, причем текст и цифры в кавычках далее можно менять для получения необходимого
результата, например чтобы подогнать по ширине, но это вносит сложности и я рекомендую сразу делать качественно
без дальнейших исправлений. Для этого и нужны стандартные размеры, которые Вам надо выбрать самостоятельно.
Если у Вас уже есть нормальная картинка для кнопки и Вы не собираетесь менять размеры и прикреплять всякие
подсказки, то часть элементов можно сократить и тогда мы получим следующее:
Ссылка - это адрес картинки, например http://ic.pics.livejournal.com/saintly_scum/51864505/420898/420898_original.png
Как вставить активную кнопку в режиме визуального редактора.
Загружаем изображение кнопки в ЖЖ, идем в альбом http://saintly-scum.livejournal.com/pics/catalog/360/420898,
нажимаем Оригинал и копируем адрес из строки браузера
http://ic.pics.livejournal.com/saintly_scum/51864505/420898/420898_original.png
Далее находим в посте место для кнопки, нажимаем на панели меню редактирования поста кнопку Добавить
фото и в окно Укажите здесь URL изображения вставляем адрес кнопки (это может быть ЖЖ или другой фотохостинг),
нажимаем Добавить в запись и видим.
Теперь кнопку (и любую другую картинку в посте) можно сделать активной, прикрепив к ней ссылку.
Для этого выделяем кнопку мышью, и в меню редактирования нажимаем Добавить ссылку, при этом
появится окно, в него надо ввести ссылку, которая будет открываться при нажатии кнопки.
У меня к этой кнопке привязана ссылка http://saintly-scum.livejournal.com/16836.html. Вот, что получилось
после прикрепления ссылки к кнопке. Нажмите ее и увидите пост, в котором тоже есть активные кнопки.
Таким образом Вы можете прикреплять ссылки к любым изображениям в блоге.
Как вставить кнопку или баннер в пост или на боковую панель (сайдбар).
Вставлять будем в режиме HTML. Этот способ подходит и для поста и для сайдбара
(боковой панели). Для этого нам понадобится код:
Это условный HTML-код картинки, к которой прикреплена ссылка. Элементы этого кода:
href - в кавычках указывается ссылка, которая должна открываться при нажатии
title - в кавычках указывается подсказка, которая появляется при наведении курсора
на картинку (кнопку)
src - в кавычках указывается адрес, где находится картинка (кнопка)
alt - в кавычках указывается текст, который появится, если картинка не загрузилась
target="_blank" - необходимо, чтобы ссылка открывалась в новом окне браузера
Часть элементов можно сократить, я обычно оставляю только следующие, так мне удобнее
Рекомендую воспользоваться каким-нибудь простым текстовым редактором, типа блокнота и
с помощью этой основы подготовить код для своих кнопок. Для этого надо просто вставить
в такой шаблон прямо в кавычки ссылку и адрес картинки без лишних пробелов.
Например в случае рассмотренной ранее кнопки это будет так:
Теперь этот код можно вставить или в пост в режиме редактора HTML или на боковую панель,
как у меня в блоге. В результате получим активную кнопку.
Полученный код можно сохранить в текстовом редакторе типа блокнота, это может пригодиться в будущем.
Теперь установим активную кнопку в сайдбар (боковую панель)
Для этого переходим по ссылке http://www.livejournal.com/customize/options.bml, нажимаем Сайдбар и
в окно Текст копируем этот код, нажимаем Сохранить изменения.
Таким же образом на боковой панели можно разместить любое изображение без прикрепленной ссылки,
например рекламный баннер, надо просто вставить код картинки (смотрите выше Адрес картинки на разных фотохостингах).
Можно сделать несколько кнопок, это очень удобно для поиска информации в блоге. Напоминаю, что у
Вас в сайдбаре должна быть включена панель Свой текст. Посмотрите в пункте Порядок виджетов в сайдбаре.
Лично у меня в блоге в этом пункте отключено отображение календаря и всего прочего, кроме панели текста Custom Text или Текст.
На всякий случай, сохраняйте полученный код в текстовом редакторе перед сохранением поста, чтобы не потерять
результат работы при сбоях в сети.