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

Суббота, 04 Марта 2017 г. 22:32 + в цитатник

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

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

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

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

Для этого воспользуемся вот такой формулой
<form action="//www.liveinternet.ru/journal_proc.php?action=redirect&url=АДРЕС страницы" target="_blank" method="get"><input type="submit" value="Название кнопки" /><input type=hidden name=tok value=0ca35b147ee05dbf417f93907d31e8ed /></form>

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

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

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

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

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

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

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

<form action="//www.liveinternet.ru/journal_proc.php?action=redirect&url=АДРЕС страницы" method="get"><button style="type="submit""><img src="Адрес картинки" /></button><input type=hidden name=tok value=0ca35b147ee05dbf417f93907d31e8ed /></form>

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

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

<form action="//www.liveinternet.ru/journal_proc.php?action=redirect&url=Адрес страницы" target="_blank" method="get"><button type="submit"><img src="АДРЕС КАРТИНКИ" align="absMiddle" /> TEКСT</button><input type=hidden name=tok value=0ca35b147ee05dbf417f93907d31e8ed /></form>

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

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

<a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=АДРЕС СТРАНИЦЫ"><button title="ВСПЛЫВАЮЩИЙ ТЕКСТ"><table border="5" background="Адрес ФОНА"><tbody><tr> <td><center>НАЗВАНИЕ КНОПКИ</center></td> </tr></tbody></table></button></a>

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

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

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

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

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

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

Рубрики:

ПОМОЩЬ- уроки

ПОМОЩЬ- уроки

Метки: уроки по ведению дневника

<a href="https://www.liveinternet.ru/users/6020052/post410080544/">СѓСЂРѕРє- РєР°Рє СЃРґРµР»Р°С‚СЊ РїСЂРѕСЃС‚СѓСЋ РєР»РёРєР°Р±РµР»СЊРЅСѓСЋ РєРЅРѕРїРѕС‡РєСѓ</a><br/>Р”РµР»Р°РµРј СЃР°РјСѓСЋ РїСЂРѕСЃС‚СѓСЋ РєР»РёРєР°Р±РµР»СЊРЅСѓСЋ РєРЅРѕРїРѕС‡РєСѓ СЃ РЅР°РґРїРёСЃСЊСЋ.

РћС‡РµРЅСЊ С‡Р°СЃС‚Рѕ РЅР°Рј С‚СЂРµР±СѓСЋС‚СЃСЏ РєРЅРѕРїРѕС‡РєРё, С‡С‚Рѕ СЃРґРµР»Р°С‚СЊ СЃСЃС‹Р»РєСѓ РЅР° РєР°РєРѕР№ С‚Рѕ СЃР°Р№С‚, РёР»Рё  СЃРґРµР»Р°С‚СЊ Р±СЂРѕРґРёР»РѕС‡РєСѓ РїРѕ Р±Р»РѕРіСѓ, РёР»Рё С‡СЊРёРј С‚Рѕ СѓСЂРѕРєР°Рј Рё С‚.Рґ. РљР°Рє СЃРґРµР»Р°С‚СЊ РІРѕС‚ С‚Р°РєСѓСЋ, СЃР°РјСѓСЋ РїСЂРѕСЃС‚СѓСЋ РєР»РёРєР°Р±РµР»СЊРЅСѓСЋ РєРЅРѕРїРєСѓ СЃ РЅР°РґРїРёСЃСЊСЋ!

Р”Р»СЏ СЌС‚РѕРіРѕ РІРѕСЃРїРѕР»СЊР·СѓРµРјСЃСЏ РІРѕС‚ С‚Р°РєРѕР№ С„РѕСЂРјСѓР»РѕР№

Рђ С‚РµРїРµСЂСЊ РїРѕРїРѕРґСЂРѕР±РЅРµРµ. Р¤РѕСЂРјСѓР»Р° РІС‹РіР»СЏРґРёС‚ РІРѕС‚ С‚Р°Рє

Р—РґРµСЃСЊ РЅР°РґРѕ Р·Р°РјРµРЅРёС‚СЊ СЃР»РѕРІР° РђР”Р Р•РЎ РЎРўР РђРќРР¦Р«, РЅР° С‚РѕС‚ Р°РґСЂРµСЃ, РєСѓРґР° РІС‹ С…РѕС‚РёС‚Рµ РїРѕРїР°СЃС‚СЊ СЃ РїРѕРјРѕС‰СЊСЋ СЌС‚РѕР№ РєРЅРѕРїРєРё.  Р”Р»СЏ РїСЂРёРјРµСЂР° Р±РµСЂРµРј СЃР°Р№С‚ РјРµР»РєРёС… Р°РЅРёРјР°С€РµРє, Рё РґРµР»Р°РµРј РЅР° РЅРµРіРѕ РєРЅРѕРїРѕС‡РєСѓ- РїРѕСЃС‹Р»Р°Р»РѕС‡РєСѓ.. Р’РѕС‚ Р°РґСЂРµСЃ СЌС‚РѕРіРѕ СЃР°Р№С‚Р°, http://fantasyflash.... <a href="https://www.liveinternet.ru/users/6020052/post410080544/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Метки

-Цитатник

-Рубрики

-Ссылки

-Я - фотограф

-Поиск по дневнику

-Подписка по e-mail

-Интересы

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

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