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

Четверг, 05 Февраля 2015 г. 20:06 + в цитатник

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

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

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

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

Для этого воспользуемся вот такой формулой
<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=36377e8770573b0c5ae02b0799d1fa4e /></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=36377e8770573b0c5ae02b0799d1fa4e /></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=36377e8770573b0c5ae02b0799d1fa4e /></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>

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

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

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

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

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

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

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

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 14 - Этот пост для тех, кто имел СВОЙ БЛОГ на майле
Часть 15 - Как и где найти ВСЕ свои метки в блогах, сохраненных на майле
Часть 16 - Делаем самую простую кликабельную кнопочку с надписью.
Часть 17 - Как вытащить картинку из Microsoft Word, и перевести ее в рисунок формата jpeg
Часть 18 - Как к каждой записи в дневнике, сделать свой простенький курсор, и вставить его в пост.
...
Часть 28 - Как к каждой записи сделать свой фон.
Часть 29 - Как получать извещения о новых постах, и где это сделать в настройках дневника.
Часть 30 - Как наложить ФЛЕШ, на прозрачном фоне, на любую картинку

Серия сообщений "ЛИРУ":
Часть 1 - Наводишь курсор и видишь значения клавиш
Часть 2 - Шпаргалка по формулам.
...
Часть 14 - Оформление дневника для начинающих и не только.
Часть 15 - Генератор шрифтов OnLine.
Часть 16 - Делаем самую простую кликабельную кнопочку с надписью.
Часть 17 - >Урок конвертирования флешки (swf) в видеофайл
Часть 18 - Всегда под рукой
...
Часть 26 - ЛиРу - основы работы в расширенном редакторе ( часть 2-ая).
Часть 27 - ЛиРу - основы работы в расширенном редакторе ( часть 1-ая).
Часть 28 - Новое Оформление дневника для Лирушников.

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

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

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

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

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

Tetyana_Hrynchuk обратиться по имени Пятница, 20 Марта 2015 г. 22:16 (ссылка)

Большое спасибо!

Ответить С цитатой В цитатник

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

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

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

LiveInternetLiveInternet

-Рубрики

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

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

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

-Статистика

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