• Авторизация


Кнопочки делаем 30-03-2015 20:29 к комментариям - к полной версии - понравилось!

Это цитата сообщения ka82 Оригинальное сообщение

Кнопочки делаем :)

Кнопки есть разные.
Например, есть кнопки - флешки (шуточные). Развлекаться тут: http://www.liveinternet.ru/users/ka82/post275377421
Есть кнопки "далее" (убрать текст под кат). Это можно делать с помощью картинок-гифок и просто картинок. [more=<img src="АДРЕС КАРТИНКИ" />]. Подробнее тут: http://www.liveinternet.ru/users/ka82/post171857399/
Примеры:
Берем картинку, например [показать]
Вставляем ее адрес в тег
[more=<img src="http://img0.liveinternet.ru/images/attach/c/2//70/855/70855532_blu_1.gif" />]
Про то как убирать под кат полробнее тут: http://www.liveinternet.ru/users/ka82/post171857399/
А здесь я хочу остановиться на таких кнопках:


Можно делать кнопки на любой сайт, пост, страницу.
Если вас устраивают только кнопки-картинки, то можете сделать сами такую "картинку" на сайте (под получившейся пустой кнопкой будет слово download - т.е. загрузить картинку)
[показать]

Подобных сайтов, делающих кнопки он-лайн, много, можете поискать в Яндексе, Гугле и т.д. В любом случае эту "пустую" кнопку надо будет вставить в тег чтобы вас отсылало на какой-то сайт.

Примеры тега:
1 Откроется в том же окне если правой клавишей мыши не указать открыть в новом окне:
<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" > КОД ПУСТОЙ КНОПКИ </form>
2 Откроется в новом окне / вкладке даже если правой клавишей мыши будете просить открыть в том же окне. Ключевая команда здесь с пробелом target="_blank"
<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank"> КОД ПУСТОЙ КНОПКИ </form>
3 Откроется в том же окне если правой клавишей мыши не указать открыть в новом окне. Подходит для кодов не только кнопок, но и просто текстов и картинок - отсылок
<a href="АДРЕС КУДА ПЕРЕХОДИТЬ">КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА </a>
4 Откроется в новом окне / вкладке даже если правой клавишей мыши будете просить открыть в том же окне. Ключевая команда здесь с пробелом target="_blank". Подходит для кодов не только кнопок, но и просто текстов и картинок - отсылок
<a href="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank">КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА </a>
5 Аналог предыдущего случая 4, открывается всегда в новом окне / вкладке, просто пишется более коротко:
[url=АДРЕС КУДА ПЕРЕХОДИТЬ] КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА [/url]

А здесь - как сделать не просто кнопку-картинку, а чтобы при нажатии она еще и как будто "нажималась".
Первый вид кнопки, с указанием точных размеров высоты HEIGHT: 100px и ширины WIDTH: 607px. Если сделать ширину меньше, текст не поместится.
<div align="center"> - просто команда находиться кнопке по центру строки.
Итак, вот "пустая" кнопка, т.е. которая никуда не ведет, можете жать на нее сколько хотите:

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

Как написать:
<input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" />

А вообще кнопка будет вас отсылать туда, куда вы укажете, какой адрес страницы, сайта, блога. Зачем нужно target="_blank" уже знаете (чтобы открывало в новом окне / вкладке), так что можете стереть эти буквы при желании. Ширина и высота фиксированы, но если текст будет слишком длинный в ширину, то он просто не поместится на кнопке, поэтому надо подредактировать величину, например, сделать ширину не WIDTH: 207px, а WIDTH: 410px или даже больше (можно и меньше если текста мало)
Просто "пустая" кнопка:

<input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" />

Кнопка, ведущая на какой-то сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank"><div align="center"><input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" /></div></form>

То же, но без фиксированного указания широты и высоты. В этом случае она растянется на ширину текста:
<div align="center"> - просто команда находиться кнопке по центру строки.

А вот тут даже нет фиксированного размера букв (в таких случаях размер переносится с настроек дизайна дневника применительно к размеру текста в вашем дневнике). И тогда это уже не кнопка...
Вот что получилось:

<input style="type="submit" value="Пишем любой тег" />

Другой тип кнопки:
"Пустая" кнопка:

<input type="submit" value="ПОДПИСЬ КНОПКИ">

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><input type="submit" value="ПОДПИСЬ КНОПКИ"></form>

Кнопка с таким вот фоном:
"Пустая" кнопка:

<input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" />

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" /></form>

Текст и размер на кнопке можно увеличить подобно тексту в сообщении. Обрамление b:
<b>ВНУТРИ БУДЕТ ЖИРНЫЙ ШРИФТ</b>
Обрамление font size="+1" (можно и +2, и +3 по желанию) или font size="4pt"
<font size="4pt"> ВНУТРИ БУДЕТ ТАКОЙ РАЗМЕР</font>
Сравните с предыдущим вариантом если только в вашем дневнике текст не является крупным по умолчанию (тогда разницы можете не увидеть т.к. этот шрифт уже сделан настройками дизайна дневника):

<b><font size="+1"> <input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" /></font></b>

По идее, после слова style=" можно приписать не только фон, но и все что хотите применимое к обычному тексту в тегах типа div (шрифт, размер и т.д.). Вот пример "пустой" кнопки:

<input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('ФОН КНОПКИ'); font-family:ШРИФТ БУКВ НАПР.arial; font-size:РАЗМЕР БУКВ НАПР.24pt; color:ЦВЕТ БУКВ НАПР.#00FF00;" />

Третий тип кнопки:
"Пустая" кнопка. Текст-пояснялка нужен для того, чтобы когда вы наводите курсор на кнопку, даже не нажимая на нее, появляется всплывающий текст-подсказка.

<button title="ТЕКСТ-ПОЯСНЯЛКА"><table border=5><tbody><tr><td><center><font color=#ЦВЕТ БУКВ НАПР. #BA55D3 size=РАЗМЕР БУКВ НАПР. 4>НАЗВАНИЕ КНОПКИ</font></center></td></tr></tbody></table></button>
Для тех, кто знает тег "таблица", можете увидеть, что table border="5" - это рамка таблицы толщины 5. Можете сделать толщину больше (напр. не 5 а 11) или меньше (напр. 1). По умолчанию 0 рамки вообще НЕ будет, а цвет по умолчанию как правило цвета букв (у меня - черный, но это видит Опера, а Эксплоэр НЕ видит!!!), поэтому рамку можете "раскрасить" по правилам работы с таблицами, например border: #119931 3px solid;
Итого вместо <table border=5> получится: <table style="border:#F70000 3px solid; ">
Пояснение: #F70000 - цвет рамки, 3px толщина рамки, solid - стиль рамки.

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><button title="ТЕКСТ-ПОЯСНЯЛКА"><table border=5><tbody><tr><td><center><font color=#ЦВЕТ БУКВ НАПР. #BA55D3 size=РАЗМЕР БУКВ НАПР. 4>НАЗВАНИЕ КНОПКИ</font></center></td></tr></tbody></table></button></form>

Четвертая кнопка:
"Пустая" кнопка.

<button style="BACKGROUND: #ЦВЕТ ФОНА КНОПКИ НАПР. #8080ff; WIDTH: ШИРИНА КНОПКИ НАПР.150px" type="submit"><img src="URL КАРТИНКИ"></button>

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><button style="BACKGROUND: #ЦВЕТ ФОНА КНОПКИ НАПР. #8080ff; WIDTH: ШИРИНА КНОПКИ НАПР.150px" type="submit"><img src="URL КАРТИНКИ"></button></form>
А вот такая кнопка, даже с картинкой и переносами :)
Экспериментируйте с цветом и границей рамки (пунктир, двойная, точечная и т.д.)
 (50x50, 2Kb)






Серия сообщений "Кодировщик":
Шрифты, кнопки и прочее оформление

Часть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
...
Часть 23 - Редкие символы с тегом написания
Часть 24 - Шрифты (надеюсь ваш браузер отображает все перечисленные)
Часть 25 - Кнопочки делаем :)
Часть 26 - Таблицы делаем
Часть 27 - Буквы-хамелеоны MS Outlook и Wingdings
...
Часть 30 - Ctrl как горячая клавиша
Часть 31 - Символы (просто скопируйте что надо)
Часть 32 - Фильтруем (убедитесь, что ваш браузер видит тени букв)


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Кнопочки делаем | GROTTESK - Дневник GROTTESK | Лента друзей GROTTESK / Полная версия Добавить в друзья Страницы: раньше»