amio (amio) wrote,
amio
amio

Как оформить блог в ЖЖ - 4 (Кнопки для блога)

Как сделать активные кнопки для размещения в постах или сайдбаре (боковой панели)? Этот пост вам поможет, в нем на практике рассмотрены вопросы, которые будут полезны и начинающим и опытным блогерам. Полезную информацию можно найти и в других моих постах рубрики Дизайн блога.


Работа может проводиться или в режиме Визуального редактора или в режиме HTML. Если речь идет о копировании кодов в пост, то они вставляются только в режиме HTML, запомните это.

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

В сайдбар (боковую панель) код вставляется обычным копированием. Как это делается, подробно рассказано в заключительной части этого поста.

Очень много полезного вы можете найти в сообществе http://journals-covers.livejournal.com/. Чтобы не перегружать вас информацией, я расскажу об основных способах, которые могут пригодиться каждому блогеру.


Как превратить обычный кат в кнопку

HTML-код ката ЖЖ выглядит так



Чтобы получить результат, достаточно в месте необходимого ката вставить начальную часть кода



Завершающая часть появится в конце текста самостоятельно.

text="Текст ката" - если вам нужен свой текст для ката, то его можно вставить таким образом в кавычки, но эту часть кода можно вообще исключить



Тогда в месте ката будет надпись Читать дальше...

Коды, которые превратят обычный кат ЖЖ в симпатичные прямоугольные кнопки, обнаружены мной в статье Дрессируем Lj-cut. Если вы хотите себе такие кнопки, то скопируйте понравившийся вам код.

Далее надо перейти по ссылке http://www.livejournal.com/customize/options.bml?group=customcss. Затем найти окно Ваш Css и вставить туда код, после этого нажать кнопку Сохранить изменения (справа).

Если в этом окне уже есть какой-то код, то код для ката вставляется в самом конце и не забудьте оставить пустую строку, разделяющую коды.

Будьте внимательны, не во всех дизайнах блогов есть доступ к 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


Как вставить активную кнопку в режиме визуального редактора

Далее расскажу на примере своего блога. Загружаем изображение кнопки на удобный фотохостинг или в фотоальбом ЖЖ, далее копируем адрес картинки-кнопки, он имеет примерно такой вид



С помощью курсора находим в посте место для кнопки, нажимаем на панели меню редактирования поста кнопку Добавить фото и в окно Укажите здесь URL изображения вставляем адрес кнопки, нажимаем Добавить в запись и видим в посте кнопку.

Теперь кнопку, как и любую другую картинку в посте, можно сделать активной, прикрепив к ней ссылку. Для этого выделяем кнопку мышью, и в меню редактирования нажимаем Добавить ссылку.

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

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

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


Как вставить активную кнопку в режиме HTML

Вставлять будем в режиме HTML. Этот способ подходит и для поста и для сайдбара (боковой панели). Для этого нам понадобится код:



Это условный HTML-код картинки, к которой прикреплена ссылка. Элементы этого кода:

href - в кавычках указывается ссылка, которая должна открываться при нажатии
title - в кавычках указывается подсказка, которая появляется при наведении курсора на картинку (кнопку)
src - в кавычках указывается адрес, где находится картинка (кнопка)
alt   - в кавычках указывается текст, который появится, если картинка не загрузилась
target="_blank" - необходимо, чтобы ссылка открывалась в новом окне браузера

Часть элементов можно сократить, я обычно оставляю только следующие, так мне удобнее



Всё очень просто, для кода вам требуется две ссылки - адрес ресурса, который вы хотите открыть и адрес кнопки (картинки) - ссылка на фотохостинге.

Рекомендую воспользоваться каким-нибудь простым текстовым редактором, типа блокнота и с помощью этой основы подготовить код для своих кнопок. Для этого надо просто вставить в такой шаблон прямо в кавычки ссылку и адрес картинки без лишних пробелов.

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


Устанавливаем кнопку в сайдбар (боковую панель)

Доступ к сайдбару по ссылке http://www.livejournal.com/customize/options.bml?group=sidebars. Не забудьте проверить включение виджета Свой текст (Custom Text). Подготовленный код копируется в окно с таким же названием.

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

Таким же образом на боковой панели можно разместить любое изображение без прикрепленной ссылки, или со ссылкой, например рекламный баннер.

Можно сделать несколько кнопок, это очень удобно для поиска информации в блоге. Напоминаю, что у вас в сайдбаре должна быть включена панель Свой текст. Посмотрите в пункте Порядок виджетов в сайдбаре.

Лично у меня в блоге в этом пункте отключено отображение календаря и всего прочего, кроме панели текста Custom Text или Текст.

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

Надеюсь, что информация будет для вас полезной, тему оформления я собираюсь продолжить в следующих постах. С кнопками мы наверное разобрались, а о работе с картинками читайте мой пост Как постить картинки в Живом Журнале.

http://amio.livejournal.com/



Tags: livejournal, Дизайн блога
Subscribe

Posts from This Journal “Дизайн блога” Tag

  • Долгожданные лайки

    В Живом Журнале появились лайки и это очень хорошо! И пусть злобно ругаются всякие олдфаги и владельцы старого дизайна, которые лайков не видят.…

  • Простая кнопка для блога

    Пригодится таким же как и я сторонникам минимализма. Кнопку не надо рисовать и смотрится она категорично, скромно и со вкусом. Ее HTML-код…

  • Редактирование постов в Живом Журнале

    Расскажу об этой теме руководствуясь своим опытом работы с блогом. В справке Живого Журнала и в других блогах вы этих сведений не найдете и…

  • Секреты видео YouTube для блога в Живом Журнале

    У блогеров Живого Журнала часто возникает необходимость использования видео в блоге. Эта информация поможет, если вы хотите сделать все красиво и…

  • Удобная форма поиска в блоге

    Расскажу подробно и с примерами, как установить в блоге Живого Журнала удобную форму поиска, которая пригодится и новичкам и опытным блогерам.…

  • Как найти комментарии в Живом Журнале

    Новая улучшенная форма поиска своих и чужих комментариев в блогах Живого Журнала, которая пригодится и опытным и начинающим блогерам. Делается…

  • Как постить картинки в Живом Журнале

    Практические советы, основанные на личном опыте работы с блогом, которые могут пригодиться и опытным и начинающим блогерам. Когда я читаю…

  • Полезные советы для Живого Журнала

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

  • О происках Гугла и дизайне ЖЖ

    Расскажу своими словами, чтобы было понятно каждой классической блондинке. Гугл затеял очередную реформу и выставил требования к владельцам…

promo amio october 16, 2015 07:02
Buy for 10 tokens
В этом посте вы найдете сведения, которые несомненно пригодятся и новичкам и опытным блогерам Живого Журнала. Все изложенное основано на моем собственном опыте и на моих ошибках. Пост будет обновляться и дополняться новыми материалами. Соответствующие посты откроются, если вы нажмете на…
Comments for this post were disabled by the author