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

Пятница, 20 Февраля 2015 г. 12:08 + в цитатник

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

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

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

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

Для этого воспользуемся вот такой формулой
<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=fd027dd5a7ea2f68bf12f2953950d955 /></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=fd027dd5a7ea2f68bf12f2953950d955 /></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=fd027dd5a7ea2f68bf12f2953950d955 /></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 - Как к каждой записи в дневнике, сделать свой простенький курсор, и вставить его в пост.
...
Часть 29 - Как получать извещения о новых постах, и где это сделать в настройках дневника.
Часть 30 - Как наложить ФЛЕШ, на прозрачном фоне, на любую картинку
Часть 31 - Онлайн генераторы HTML цвета

Серия сообщений "нужная информация":
Часть 1 - Оформление дневника для начинающих
Часть 2 - Генераторы таблиц
...
Часть 21 - Как убрать вирус в браузере. |ВАЖНО|
Часть 22 - Почему тормозит компьютер или ноутбук?
Часть 23 - Делаем самую простую кликабельную кнопочку с надписью
Часть 24 - Кнопка для перехода по страничкам Дневника
Часть 25 - Кнопка- Помощь Блогеру
...
Часть 42 - Генератор дизайнов для ЖЖ
Часть 43 - Мои рубрики в простом редакторе
Часть 44 - PARTY

Метки: кликабельные кнопочки
Понравилось: 1 пользователю

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

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

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

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

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

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

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

LiveInternetLiveInternet

-Метки

-Цитатник

-Приложения

-Рубрики

-Ссылки

-Музыка

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

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

-Друзья

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

-Сообщества

-Статистика

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