388x60 Ads

Как сделать красивые кнопки или кнопку - ссылку

Добрый день, уважаемые читатели блога БЛОGГЕР!

БЛОGГЕР - всегда полезная и интересная информация и в этой статье вы узнаете, как сделать красивые кнопки или как сделать кнопку ссылку.

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

Честно говоря я долго раздумывал писать ли эту статью. Дело в том, что на эту тему написано очень много другими авторами. С другой стороны, если возникают у людей такие вопросы, значит им нужно помочь.

Самый простой и быстрый способ создать кнопку, это воспользоваться CSS генератором кнопок. Там все просто. Двигаете ползунки, выбираете цвета, копируете код и вставляете его в вашем шаблоне перед:
]]></b:skin>
Далее, в нужный вам контейнер или таблицу вставляете код ссылки. Для того, что бы ваша ссылка превратилась в кнопку, добавьте в тег < a >, присвоенный вами класс CSS, например: class="button"
Созданную вами таким образом ссылку - кнопку можно наложить поверх какого то изображения.

SEO инструменты


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

Разместить кнопку по верх изображения можно следующим образом. Добавьте изображение в статью. Затем переключитесь в редакторе сообщения в режим HTML и сразу после контейнера с изображением добавьте код: Кнопка ссылка
Расположите вашу кнопку поверх изображения изменяя значения показателей left и top. Текст перед ссылкой (в примере он в теге h2) заменяете на свое усмотрение.

Может возникнуть вопрос, почему стиль этого контейнера не прописать в CSS?

Это может быть не практично, потому что изображения в статье могут быть разных размеров и по разному размещены.

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

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

Добавляйтесь в подписчики блога БЛОGГЕР и вы будете всегда в курсе последних событий, и узнаете интересные идеи




Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


4 коммент.:

ideyniy комментирует... [Ответить]

Блин! Вот с сдвижением конечно...мне маскировать нужно...а какой еще способ знаешь?

specproect.net комментирует... [Ответить]

Вот всегда был благодарен людям, открывающие простые истины ламерам. Я в админки ничего не шарю... Вот только благодаря таким как вы блогам и плаваю на поверхности - в хорошем смысле.

Игорь комментирует... [Ответить]

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

Анонимный комментирует... [Ответить]

Огромное человеческое спасибо за пост!!! все получилось!!!!

Отправить комментарий