Делаем самую простую кликабельную кнопочку с надписью.

Воскресенье, 24 Августа 2014 г. 18:57 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

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

Для этого воспользуемся вот такой формулой
<form action="АДРЕС страницы" target="_blank" method="get"><input type="submit" value="Название кнопки" /><input type=hidden name=tok value=845c773d3f1f65d5181384a5c454af9e /></form>

А теперь поподробнее. Формула выглядит вот так

Здесь надо заменить слова АДРЕС СТРАНИЦЫ, на тот адрес, куда вы хотите попасть с помощью этой кнопки. Для примера берем сайт мелких анимашек, и делаем на него кнопочку- посылалочку.. Вот адрес этого сайта, http://fantasyflash.ru/index.php?&kontent=anime который я взяла в адресной строке сайта

Теперь переносим его на нашу кнопочку. Стираем слова АДРЕС СТРАНИЦЫ, а вместо этих слов подставляем адрес http://fantasyflash.ru/index.php?&kontent=anime Запись тогда будет выглядеть вот так

А теперь пишем слова, которые хотим видеть на кнопочке, стерев слова НАЗВАНИЕ КНОПКИ. Например ИДЕМ СЮДА, или, САЙТ ЗДЕСЬ, вообщем все, что вы хотите. Я сейчас напишу САЙТ С КАРТИНКАМИ ЗДЕСЬ. Выглядеть теперь наша запись будет вот так

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

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

Можно вместо слов на кнопочку вставить мелкую картинку, например со стрелочкой, звездочкой и пр. Вот код этой кнопочки.

<form action="АДРЕС страницы" method="get"><button style="type="submit""><img src="Адрес картинки" /></button><input type=hidden name=tok value=845c773d3f1f65d5181384a5c454af9e /></form>

Вместо слов АДРЕС СТРАНИЦЫ, вновь подставляем адрес странички, куда поведет кнопка, а в место слов АДРЕС КАРТИНКИ, ставим ее адрес. Я взяла звездочку, с того же сайта, на который мы и делали кнопочку. Картинки там мелкие и очень удобные для того что бы делать такие кнопочки.
Адрес картинки берете так- ВСТАЕТЕ МЫШКОЙ НА КАРТИНКУ, ЖМЕТЕ ПРАВУЮ КНОПКУ МЫШИ И ВЫБИРАЕТЕ "КОПИРОВАТЬ ССЫЛКУ НА ИЗОБРАЖЕНИЕ" или выбираете свойства, а в них находите адрес картинки и копируете его.
Теперь наша кнопочка выглядит вот так.

Можно сделать кнопочку, где будет и картинка и текст. Вот этот код

<form action="Адрес страницы" target="_blank" method="get"><button type="submit"><img src="АДРЕС КАРТИНКИ" align="absMiddle" /> TEКСT</button><input type=hidden name=tok value=845c773d3f1f65d5181384a5c454af9e /></form>

Здесь все аналогично, заменяем слова на АДРЕС СТРАНИЧКИ, затем АДРЕС КАРТИНКИ и СЛОВА ДЛЯ КНОПКИ. Тогда наша кнопочка будет выглядеть вот так

Можно так же такую кнопочку сделать на любом фоне, и с всплывающей подсказке. Вот этот код.

<a target="_blank" href="АДРЕС СТРАНИЦЫ"><button title="ВСПЛЫВАЮЩИЙ ТЕКСТ"><table border="5" background="Адрес ФОНА"><tbody><tr> <td><center>НАЗВАНИЕ КНОПКИ</center></td> </tr></tbody></table></button></a>

Все аналогично, вместо слов вставляете адреса картинки, странички куда поведет кнопка, адрес фона. И ВНИМАНИЕ - здесь на кнопке можно писать всплывающий текст. Это значит, что при НАВЕДЕНИИ МЫШКОЙ НА КНОПКУ ВСПЛЫВЕТ ПОДСКАЗКА. Наведите мышкой на кнопочку пониже, и увидите как это будет выглядеть. Тогда наша кнопочка будет выглядеть так!

ВНИМАНИЕ, ТЕКСТ НА КНОПОЧКЕ, можете спокойно редактировать- размер шрифта, цвет и прочее.
Вот и все. Для вашего удобства, все выше приведенные коды кнопочек я сейчас сделаю табличкой, что бы удобнее было пользоваться.

Текст на кнопке -
Картинка на кнопке -
Текст и картинка на кнопке -
Кнопка на фоне, с всплывающим текстом -

Как самому сделать оригинальную кнопочку в фотошопе онлайн ЭДИТОР, смотрим ВОТ ЗДЕСЬ

И еще один замечательный сайт с уже готовыми кнопочками на все темы, где вы найдете как подписанные кнопочки, так и без надписи. Жмите на эту кнопочку.

Успехов! Надеюсь у всех все получится!

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 14 - Этот пост для тех, кто имел СВОЙ БЛОГ на майле
Часть 15 - Как и где найти ВСЕ свои метки в блогах, сохраненных на майле
Часть 16 - Делаем самую простую кликабельную кнопочку с надписью.
Часть 17 - Как вытащить картинку из Microsoft Word, и перевести ее в рисунок формата jpeg
Часть 18 - Как к каждой записи в дневнике, сделать свой простенький курсор, и вставить его в пост.
...
Часть 22 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 23 - Сделать текст с окошечком прокрутки (флеймом)
Часть 24 - Как быстро вставить в пост на ЛиРу картинку из Интернета